/* SIMOKO — ops-console skin over Sneat.
   One palette: warm paper surface, deep pine primary, amber/indigo/crimson accents. */

:root {
  /* retint Bootstrap primary (was Sneat purple #696cff) → pine.
     Covers toast, dropdown active/hover, focus rings, badges — anything on --bs-primary. */
  --bs-primary: #1e5c4f;
  --bs-primary-rgb: 30, 92, 79;

  --tk-ink: #20302b;
  --tk-ink-soft: #5c6b64;
  --tk-paper: #f4f1ea;
  --tk-card: #fdfcf9;
  --tk-well: #eceae3; /* surface secondary: row hover, wells, neutral chips */
  --tk-line: #e3ddd0;
  --tk-pine: #1e5c4f;
  --tk-pine-deep: #12362e;
  --tk-amber: #b97416;
  --tk-amber-soft: #f7e8d0;
  --tk-indigo: #45509e;
  --tk-indigo-soft: #e2e5f6;
  --tk-crimson: #a63a31;
  --tk-crimson-soft: #f6e0dd;
  --tk-moss: #3e7d43;
  --tk-moss-soft: #e0eddd;
  --tk-font-display: 'Bricolage Grotesque', sans-serif;
  --tk-font-body: 'Instrument Sans', sans-serif;
  --tk-font-mono: 'Spline Sans Mono', monospace;
}

/* ---- Base surfaces & type ---- */
body {
  font-family: var(--tk-font-body);
  background: var(--tk-paper);
  color: var(--tk-ink);
}

h1, h2, h3, h4, h5, h6, .card-title, .navbar-crumb {
  font-family: var(--tk-font-display);
  color: var(--tk-ink);
  letter-spacing: -0.01em;
}

.navbar-crumb {
  font-size: 1.05rem;
  font-weight: 600;
}

.card {
  background: var(--tk-card);
  border: 1px solid var(--tk-line);
  box-shadow: 0 1px 2px rgba(32, 48, 43, 0.05);
}

.bg-navbar-theme,
.layout-navbar.navbar-detached {
  background: var(--tk-card) !important;
  border: 1px solid var(--tk-line);
  box-shadow: 0 1px 2px rgba(32, 48, 43, 0.05);
}

.bg-footer-theme { background: transparent !important; }

/* ---- Sidebar: light paper ---- */
.bg-menu-theme {
  background: var(--tk-card) !important;
  color: var(--tk-ink);
  border-right: 1px solid var(--tk-line);
}
.bg-menu-theme .menu-link,
.bg-menu-theme .menu-header-text {
  color: var(--tk-ink-soft) !important;
}
.bg-menu-theme .menu-item.active > .menu-link {
  background: var(--tk-amber-soft) !important;
  color: var(--tk-ink) !important;
  border-left: 3px solid var(--tk-amber);
  font-weight: 600;
}
.bg-menu-theme .menu-item .menu-link:hover {
  color: var(--tk-ink) !important;
  background: rgba(32, 48, 43, 0.04) !important;
}
.bg-menu-theme .menu-divider { border-color: var(--tk-line); }

/* kill Sneat's purple right-edge indicator — the amber left border is the active marker */
.layout-wrapper:not(.layout-horizontal) .menu-vertical .menu-inner > .menu-item.active::before {
  display: none;
}
/* menu-header: no gray dash, quiet uppercase label */
.bg-menu-theme .menu-header::before { display: none; }
.bg-menu-theme .menu-header .menu-header-text {
  color: var(--tk-ink-soft) !important;
  opacity: 0.65;
  font-size: 0.68rem;
  letter-spacing: 0.12em;
}
/* hide the javascript:void(0) collapse toggle bubble in the brand row (mobile closes via overlay) */
#layout-menu .app-brand .layout-menu-toggle { display: none !important; }

.brand-mark {
  font-size: 1.5rem;
  color: var(--tk-amber);
  line-height: 1;
}
.brand-text {
  font-family: var(--tk-font-display);
  color: var(--tk-ink) !important;
  font-size: 1.05rem;
}

/* ---- Primary actions ---- */
.btn-primary {
  background-color: var(--tk-pine) !important;
  border-color: var(--tk-pine) !important;
  box-shadow: none;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
  background-color: var(--tk-pine-deep) !important;
  border-color: var(--tk-pine-deep) !important;
}
.btn-outline-primary {
  color: var(--tk-pine) !important;
  border-color: var(--tk-pine) !important;
}
.btn-outline-primary:hover {
  background: var(--tk-pine) !important;
  color: #fff !important;
}
a { color: var(--tk-pine); }
.form-control:focus, .form-select:focus {
  border-color: var(--tk-pine);
  box-shadow: 0 0 0 0.2rem rgba(30, 92, 79, 0.12);
}
.page-item.active .page-link {
  background-color: var(--tk-pine) !important;
  border-color: var(--tk-pine) !important;
}

/* ---- Monospace identifiers ---- */
.mono, .ticket-number, .ref-no {
  font-family: var(--tk-font-mono);
  font-size: 0.85em;
  letter-spacing: 0;
}
.ticket-number { font-weight: 600; color: var(--tk-pine); }

/* Kolom Durasi: tiket berjalan yang menua ditandai warna + titik, mengikuti
   bahasa visual chip status supaya kebaca sekilas (latar lembut saja terlalu
   samar di dark mode). Semua lewat --tk-* → dark mode ikut otomatis. */
.duration { color: var(--tk-ink-soft); }
.duration.is-warn, .duration.is-late {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-weight: 700;
  padding: 0.15rem 0.45rem;
  border-radius: 0.3rem;
  border: 1px solid currentColor;
}
.duration.is-warn::before, .duration.is-late::before {
  content: '';
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}
.duration.is-warn { color: var(--tk-amber); background: var(--tk-amber-soft); }
.duration.is-late { color: var(--tk-crimson); background: var(--tk-crimson-soft); }

/* ---- Chips (status / department / priority) ---- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: 1px solid var(--tk-line);
  background: var(--tk-well);
  color: var(--tk-ink-soft);
  white-space: nowrap;
}
.chip::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.chip-open      { color: var(--tk-pine);   background: #e2ece6; border-color: #c6dacf; }
.chip-in_progress { color: var(--tk-indigo); background: var(--tk-indigo-soft); border-color: #c9cfef; }
.chip-resolved  { color: var(--tk-moss);   background: var(--tk-moss-soft); border-color: #c4dcc1; }
.chip-resolved_success { color: var(--tk-moss);   background: var(--tk-moss-soft); border-color: #c4dcc1; }
.chip-resolved_failed  { color: var(--tk-crimson); background: var(--tk-crimson-soft); border-color: #ecc4bf; }
.chip-closed    { color: var(--tk-ink-soft); background: var(--tk-well); border-color: var(--tk-line); }

.chip-supplier  { color: var(--tk-amber);   background: var(--tk-amber-soft); border-color: #ecd4ae; }
.chip-it        { color: var(--tk-indigo);  background: var(--tk-indigo-soft); border-color: #c9cfef; }
.chip-finance   { color: var(--tk-crimson); background: var(--tk-crimson-soft); border-color: #ecc4bf; }

.chip-low    { color: var(--tk-ink-soft); background: var(--tk-well); border-color: var(--tk-line); }
.chip-normal { color: var(--tk-indigo);  background: var(--tk-indigo-soft); border-color: #c9cfef; }
.chip-high   { color: var(--tk-crimson); background: var(--tk-crimson-soft); border-color: #ecc4bf; }

/* ---- Filter toolbar ---- */
.toolbar {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  padding: 0.7rem 0.85rem;
  padding-right: 11rem; /* ruang untuk Export + dropdown di pojok kanan-atas */
  background: var(--tk-card);
  border: 1px solid var(--tk-line);
  border-radius: 0.7rem;
  box-shadow: 0 1px 2px rgba(32, 48, 43, 0.04);
}
.toolbar-views { flex: 0 0 auto; }
/* garis pemisah antara toggle view & filter */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  flex: 1 1 auto;
  padding-left: 0.85rem;
  border-left: 1px solid var(--tk-line);
}

/* Search dengan ikon di dalam */
.filter-search { position: relative; flex: 4 1 200px; min-width: 160px; }
.filter-search .bx {
  position: absolute;
  left: 0.6rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--tk-ink-soft);
  font-size: 1rem;
  pointer-events: none;
}
.filter-search .form-control { padding-left: 2rem; }

/* 3 select + rentang tanggal tidak muat sebaris di layar sedang → biarkan menyusut
   proporsional dan membungkus rapi, bukan memaksa satu baris yang kepotong. */
.filter-field { width: auto; flex: 1 1 120px; min-width: 110px; max-width: 170px; }
.filter-dates { width: auto; flex: 2 1 240px; min-width: 220px; }
.filter-dates .input-group-text { background: var(--tk-paper); color: var(--tk-ink-soft); }
/* flatpickr altInput menyembunyikan #date-range dan menyisipkan input *sibling* baru,
   jadi input yang terlihat bukan lagi elemen tetangga .input-group-text → radius &
   sambungan border Bootstrap pecah (kelihatan ada celah). Target yang terlihat saja,
   lalu jahit ulang seam-nya. ponytail: CSS-only, biar altInput (format "d M Y") tetap. */
.filter-dates .form-control:not([type="hidden"]) { max-width: 140px; }
.filter-dates > input.form-control.input {
  flex: 1 1 auto;
  width: 1%;
  min-width: 0;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-left: 0;
  margin-left: 0;
}

/* tombol Filter & Reset selalu di ujung kanan, di baris mana pun mereka jatuh */
.filter-bar > .btn-primary { flex: 0 0 auto; margin-left: auto; }
.filter-reset { flex: 0 0 auto; }

/* Filter aktif → aksen pine biar kelihatan sedang menyaring */
.filter-field.is-set,
.filter-dates.is-set .form-control,
.filter-dates.is-set .input-group-text {
  border-color: var(--tk-pine);
  color: var(--tk-pine);
  font-weight: 500;
}

.filter-reset {
  color: var(--tk-ink-soft);
  text-decoration: none;
  padding-left: 0.35rem;
  padding-right: 0.35rem;
}
.filter-reset:hover { color: var(--tk-crimson); }
.filter-reset .bx { vertical-align: -2px; font-size: 1rem; }

/* aksi kanan (Export + dropdown): pojok kanan-atas, sejajar baris Board/Tabel,
   lepas dari flow filter supaya tidak ikut wrap ke baris bawah */
.toolbar > .toolbar-actions {
  position: absolute;
  top: 0.7rem;
  right: 0.85rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* ---- Copy button (no. tiket / referensi) ---- */
.copy-btn {
  border: 0;
  background: transparent;
  color: var(--tk-ink-soft);
  padding: 0.05rem 0.2rem;
  margin-left: 0.15rem;
  border-radius: 0.3rem;
  font-size: 0.85rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0.5;
  transition: opacity 0.12s, color 0.12s, background 0.12s;
}
tr:hover .copy-btn { opacity: 0.8; }
.copy-btn:hover { opacity: 1; color: var(--tk-pine); background: #e2ece6; }
.copy-btn.copied { opacity: 1; color: var(--tk-moss); }

/* ---- Bulk selection (tickets table) ---- */
.bulk-col { width: 1%; padding-right: 0; }
.bulk-col .form-check-input { cursor: pointer; }
.bulk-bar {
  position: sticky;
  top: 0.5rem;
  z-index: 5;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0.75rem;
  padding: 0.6rem 1rem;
  border-radius: 0.5rem;
  background: var(--tk-pine-deep);
  color: #fff;
  box-shadow: 0 4px 12px rgba(18, 54, 46, 0.25);
  animation: tk-rise 0.2s ease-out;
}

/* ---- Tables ---- */
.table th {
  font-family: var(--tk-font-display);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--tk-ink-soft);
}
.table-hover > tbody > tr:hover > * {
  background-color: var(--tk-well);
  cursor: pointer;
}

/* Compact density: less padding + smaller text so the ticket table needs
   little/no horizontal scroll, and rows stay one line tall. */
.table-compact > :not(caption) > * > * {
  padding: 0.45rem 0.6rem;
  font-size: 0.82rem;
  vertical-align: middle;
}
.table-compact th { font-size: 0.66rem; padding-top: 0.7rem; padding-bottom: 0.7rem; }
/* Title: single line, ellipsis, hover title for full text. */
.table-compact .col-title {
  max-width: 26ch;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--tk-ink);
}
/* Slimmer chips inside the dense table. */
.table-compact .chip {
  padding: 0.12rem 0.5rem;
  font-size: 0.66rem;
  letter-spacing: 0.02em;
}

/* ---- Dashboard stat cards: staggered reveal ---- */
@keyframes tk-rise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.stat-card { animation: tk-rise 0.45s ease-out backwards; }
.stat-card:nth-child(1) { animation-delay: 0.03s; }
.stat-card:nth-child(2) { animation-delay: 0.09s; }
.stat-card:nth-child(3) { animation-delay: 0.15s; }
.stat-card:nth-child(4) { animation-delay: 0.21s; }

.stat-figure {
  font-family: var(--tk-font-display);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.1;
}
.stat-label {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--tk-ink-soft);
}

/* ---- Kanban board ---- */
.kanban-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(255px, 1fr));
  gap: 1rem;
  overflow-x: auto;
  align-items: start;
  padding-bottom: 0.5rem;
}
.kanban-col {
  background: var(--tk-well);
  border: 1px solid var(--tk-line);
  border-radius: 0.6rem;
  padding: 0.75rem;
  animation: tk-rise 0.4s ease-out backwards;
}
.kanban-col:nth-child(2) { animation-delay: 0.06s; }
.kanban-col:nth-child(3) { animation-delay: 0.12s; }
.kanban-col:nth-child(4) { animation-delay: 0.18s; }
.kanban-col-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.15rem 0.25rem 0.75rem;
}
.kanban-count {
  font-family: var(--tk-font-mono);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--tk-ink-soft);
}
.kanban-card {
  position: relative;
  display: block;
  background: var(--tk-card);
  border: 1px solid var(--tk-line);
  border-radius: 0.5rem;
  padding: 0.85rem;
  margin-bottom: 0.65rem;
  color: var(--tk-ink);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

/* ── Lock: tiket sedang dikerjakan user lain → tampil disabled ── */
.kanban-card.is-locked,
tr.is-locked {
  opacity: 0.55;
  cursor: not-allowed;
  background: repeating-linear-gradient(
    45deg, transparent, transparent 8px,
    rgba(128, 128, 128, 0.06) 8px, rgba(128, 128, 128, 0.06) 16px);
}
.kanban-card.is-locked:hover {
  transform: none;
  box-shadow: none;
}
.lock-badge {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  font-size: 0.95rem;
  color: var(--tk-ink-soft);
}
.lock-icon {
  color: var(--tk-ink-soft);
  margin-right: 0.15rem;
  vertical-align: -1px;
}
.kanban-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(32, 48, 43, 0.1);
  color: var(--tk-ink);
}
.kanban-title {
  font-weight: 600;
  font-size: 0.88rem;
  line-height: 1.35;
}
.kanban-meta {
  font-size: 0.75rem;
  color: var(--tk-ink-soft);
  margin-top: 0.25rem;
}
.kanban-assignee {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  background: var(--tk-pine);
  color: #fff;
  font-family: var(--tk-font-display);
  font-size: 0.72rem;
  font-weight: 600;
}
.kanban-empty {
  border: 1px dashed var(--tk-line);
  border-radius: 0.5rem;
  padding: 1.25rem;
  text-align: center;
  font-size: 0.78rem;
  color: var(--tk-ink-soft);
}
@media (max-width: 1199px) {
  .kanban-row { grid-template-columns: repeat(4, 265px); }
}

/* ---- Ticket detail: header command surface ---- */
/* Pine→amber spine at the left edge marks this as the primary record card,
   echoing .entry-head on the create form. */
.ticket-head {
  position: relative;
  overflow: hidden;
  animation: tk-rise 0.4s ease-out backwards;
}
.ticket-head::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: linear-gradient(var(--tk-pine), var(--tk-amber));
}
.ticket-head .card-body { padding-left: 1.75rem; }

.ticket-title { font-size: 1.5rem; font-weight: 700; line-height: 1.2; }

/* Status action cluster: quiet framed group, floats top-right of the head */
.ticket-actions {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  padding: 0.4rem;
  border: 1px solid var(--tk-line);
  border-radius: 0.55rem;
  background: var(--tk-card);
}

/* Facts: inset panel so the metadata reads as a distinct reference block */
.ticket-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 0.85rem 1.5rem;
  margin: 1.1rem 0 0;
  padding: 0.9rem 1.1rem;
  background: var(--tk-well);
  border: 1px solid var(--tk-line);
  border-radius: 0.55rem;
}
.ticket-facts > div {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding-left: 0.6rem;
  border-left: 2px solid var(--tk-line);
}
.ticket-facts dt {
  font-size: 0.66rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--tk-ink-soft);
}
.ticket-facts dd { margin: 0; font-size: 0.9rem; }

/* Complaint body: quoted block under a hairline, not a bare paragraph */
.ticket-body {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--tk-line);
}
.ticket-body p { white-space: pre-line; margin: 0; line-height: 1.6; }

/* ---- Ticket thread: conversation timeline ---- */
.thread-section { position: relative; }
.thread-rail {
  position: relative;
  margin-left: 1.15rem;
  padding-left: 1.6rem;
  border-left: 2px solid var(--tk-line);
}
.thread-item {
  position: relative;
  border: 1px solid var(--tk-line);
  border-radius: 0.55rem;
  background: var(--tk-card);
  transition: box-shadow 0.15s ease;
}
.thread-item:hover { box-shadow: 0 3px 10px rgba(32, 48, 43, 0.07); }
.thread-item.thread-mine {
  border-left: 3px solid var(--tk-pine);
  background: var(--tk-card);
}
/* node dot + avatar sit on the rail */
.thread-avatar {
  position: absolute;
  left: -2.55rem;
  top: 1rem;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--tk-pine);
  color: #fff;
  font-family: var(--tk-font-display);
  font-size: 0.75rem;
  font-weight: 600;
  border: 3px solid var(--tk-paper);
  box-shadow: 0 0 0 1px var(--tk-line);
}
.thread-item.thread-mine .thread-avatar { background: var(--tk-amber); }
.thread-meta { font-size: 0.78rem; color: var(--tk-ink-soft); }

.thread-attachment img {
  max-height: 140px;
  border-radius: 0.4rem;
  border: 1px solid var(--tk-line);
  transition: transform 0.15s ease;
}
.thread-attachment img:hover { transform: scale(1.03); }

/* section eyebrow shared by Percakapan / rail cards */
.section-eyebrow {
  font-family: var(--tk-font-display);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--tk-ink-soft);
}

/* rail cards (assign / audit) stick while the thread scrolls */
@media (min-width: 992px) {
  .ticket-rail { position: sticky; top: 1rem; }
}
/* rail card headers: eyebrow treatment to match the Percakapan label,
   with a short pine tick so the rail reads as part of the system, not bolted on */
.ticket-rail .card-title {
  position: relative;
  padding-left: 0.7rem;
  font-family: var(--tk-font-display);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--tk-ink);
}
.ticket-rail .card-title::before {
  content: "";
  position: absolute;
  left: 0; top: 0.1em; bottom: 0.1em;
  width: 3px;
  border-radius: 2px;
  background: linear-gradient(var(--tk-pine), var(--tk-amber));
}
.ticket-rail .card-header { padding-bottom: 0.5rem; }

/* audit changes rendered as key/value rows instead of a mono blob */
.audit-kv { display: grid; gap: 0.15rem; margin-top: 0.35rem; }
.audit-kv-row {
  display: flex;
  gap: 0.5rem;
  align-items: baseline;
  font-size: 0.78rem;
  line-height: 1.35;
}
.audit-kv-key {
  flex: 0 0 auto;
  font-size: 0.62rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--tk-ink-soft);
  min-width: 5.5rem;
}
.audit-kv-val { color: var(--tk-ink); word-break: break-word; }
.audit-kv-val.is-mono {
  font-family: var(--tk-font-mono);
  font-size: 0.72rem;
  color: var(--tk-ink-soft);
}

/* ---- WhatsApp reply template (copy-to-clipboard) ---- */
/* Fixed header/footer look locked (paper inset, mono); only the RRN textarea
   and signer input are editable, so it reads as a fill-in-the-blank template. */
.wa-frame {
  border: 1px solid var(--tk-line);
  border-radius: 0.55rem;
  overflow: hidden;
  background: var(--tk-card);
}
.wa-fixed {
  padding: 0.7rem 0.9rem;
  font-family: var(--tk-font-mono);
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--tk-ink-soft);
  white-space: pre-wrap;
  background: var(--tk-well);
}
.wa-frame #wa-body,
.wa-frame #wa-signer {
  border: 0;
  border-radius: 0;
  border-top: 1px dashed var(--tk-line);
  border-bottom: 1px dashed var(--tk-line);
  background: var(--tk-card);
}
.wa-frame #wa-body:focus,
.wa-frame #wa-signer:focus {
  box-shadow: none;
  background: var(--tk-card);
  border-color: var(--tk-pine);
}
.wa-frame #wa-body { font-size: 0.82rem; line-height: 1.5; resize: vertical; }
#wa-copy.copied { color: #fff; background: var(--tk-moss); border-color: var(--tk-moss); }

/* ---- Audit timeline ---- */
.audit-list { border-left: 2px solid var(--tk-line); }
.audit-item { position: relative; padding-left: 1rem; }
.audit-item::before {
  content: '';
  position: absolute;
  left: -5px;
  top: 0.45rem;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--tk-amber);
  box-shadow: 0 0 0 3px var(--tk-card);
}
.audit-item + .audit-item { margin-top: 0.9rem; }
.audit-changes {
  font-family: var(--tk-font-mono);
  font-size: 0.72rem;
  background: var(--tk-well);
  border-radius: 0.35rem;
  padding: 0.35rem 0.5rem;
  color: var(--tk-ink-soft);
  overflow-x: auto;
}

/* ---- Avatar initial ---- */
.avatar-initial {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.35rem;
  height: 2.35rem;
  --bs-avatar-initial-bg: var(--tk-pine); /* override Sneat's pale #eeedf0 */
  background: var(--tk-pine);
  color: #fff;
  font-family: var(--tk-font-display);
  font-weight: 600;
}

/* ---- Slimmer sidebar (Sneat default ~260px) ---- */
@media (min-width: 1200px) {
  #layout-menu.layout-menu { width: 220px; }
  .layout-menu-fixed .layout-wrapper:not(.layout-horizontal) .layout-page {
    padding-inline-start: 220px;
  }
}

/* ---- Fast entry form (tickets/create): dense CS quick-entry ---- */
.entry-form {
  max-width: 820px;
  margin-inline: auto;
  background: var(--tk-card);
  border: 1px solid var(--tk-line);
  border-radius: 0.6rem;
  box-shadow: 0 1px 2px rgba(32, 48, 43, 0.05), 0 10px 28px -22px rgba(18, 54, 46, 0.35);
  /* clip (bukan hidden): tetap nge-clip sudut ke border-radius, tapi tak bikin
     scroll-container → .entry-actions sticky bisa nempel ke viewport. */
  overflow: clip;
}

/* Header: ringkas, satu baris. Spine pine di kiri sebagai penanda brand. */
.entry-head {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--tk-line);
  background: var(--tk-well);
}
.entry-head::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: linear-gradient(var(--tk-pine), var(--tk-amber));
}
.entry-head h4 { margin: 0; font-weight: 700; }
.entry-head-note {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.76rem;
  color: var(--tk-ink-soft);
  white-space: nowrap;
}
.entry-head-note .bx { color: var(--tk-pine); font-size: 0.95rem; }

/* Grup dipisah rule tipis, bukan card bertumpuk. Padat: 2 kolom rapat. */
.entry-group {
  padding: 1rem 1.5rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.7rem 1.25rem;
  align-content: start;
}
.entry-group + .entry-group { border-top: 1px solid var(--tk-line); }
.entry-group-stack { grid-template-columns: 1fr; gap: 0.7rem; }

.field { display: flex; flex-direction: column; min-width: 0; }
.field-full { grid-column: 1 / -1; }
.field-label {
  margin-bottom: 0.25rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--tk-ink);
  line-height: 1.2;
}
.field .req { color: var(--tk-crimson); }
.field-opt {
  font-family: var(--tk-font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--tk-ink-soft);
  font-weight: 500;
}
.field-hint {
  display: flex;
  align-items: flex-start;
  gap: 0.35rem;
  font-size: 0.76rem;
  color: var(--tk-ink-soft);
  margin-top: -0.15rem;
}
.field-hint .bx { color: var(--tk-amber); margin-top: 0.1rem; flex-shrink: 0; }
.input-group { flex-wrap: nowrap; min-width: 0; }
.input-group > .form-control { min-width: 0; }

/* Chrome field seragam + focus ring in-palette (bantu tab-order terlihat) */
.entry-form .form-control,
.entry-form .form-select {
  border-color: var(--tk-line);
}
.entry-form .form-control:focus,
.entry-form .form-select:focus {
  border-color: var(--tk-pine);
  box-shadow: 0 0 0 0.18rem rgba(30, 92, 79, 0.14);
}

/* readonly (Judul auto-generate): quiet, jelas tak bisa diedit */
.form-control-readonly,
.entry-form .form-control[readonly] {
  background-color: var(--tk-well);
  color: var(--tk-ink-soft);
  cursor: default;
}

/* action bar sticky di bawah viewport saat scroll */
.entry-actions {
  position: sticky;
  bottom: 0;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 1.5rem;
  background: color-mix(in srgb, var(--tk-card) 94%, transparent);
  backdrop-filter: blur(6px);
  border-top: 1px solid var(--tk-line);
}
.entry-actions .btn-primary {
  padding: 0.55rem 1.9rem;
  font-size: 0.95rem;
  font-weight: 600;
}

/* transaction preview box (populated after RRN lookup) */
.trx-preview {
  margin-top: 0.6rem;
  padding: 0.65rem 0.85rem;
  border-radius: 0.45rem;
  border: 1px solid var(--tk-line);
  background: var(--tk-well);
  animation: tk-rise 0.25s ease-out;
}
.trx-preview.trx-found   { background: var(--tk-moss-soft); border-color: #c4dcc1; }
.trx-preview.trx-missing { background: var(--tk-crimson-soft); border-color: #ecc4bf; }
.trx-preview-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.25rem 1.25rem;
}
.trx-preview-grid > div { display: flex; justify-content: space-between; gap: 0.5rem; font-size: 0.82rem; }
.trx-k { color: var(--tk-ink-soft); }
.trx-v { font-weight: 600; color: var(--tk-ink); text-align: right; }

/* mobile: grup 2-kolom jadi 1 kolom, header note disembunyikan */
@media (max-width: 575.98px) {
  .entry-group { grid-template-columns: 1fr; }
  .trx-preview-grid { grid-template-columns: 1fr; }
  .entry-head-note { display: none; }
}

/* ---- Priority badge-style select ---- */
.priority-select { font-weight: 600; }
.priority-low    { color: var(--tk-ink-soft); background-color: var(--tk-well); border-color: var(--tk-line); }
.priority-normal { color: var(--tk-indigo);  background-color: var(--tk-indigo-soft); border-color: #c9cfef; }
.priority-high   { color: var(--tk-crimson); background-color: var(--tk-crimson-soft); border-color: #ecc4bf; }

/* ---- Upload dropzone ---- */
.dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  padding: 2rem 1rem;
  border: 2px dashed var(--tk-line);
  border-radius: 0.6rem;
  background: var(--tk-card);
  cursor: pointer;
  text-align: center;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.dropzone:hover { border-color: var(--tk-pine); background: var(--tk-well); }
.dropzone-active { border-color: var(--tk-pine); background: var(--tk-moss-soft); }
.dropzone-icon { font-size: 2rem; color: var(--tk-pine); }
.dropzone-text { color: var(--tk-ink); font-size: 0.9rem; }
.dropzone-hint { color: var(--tk-ink-soft); font-size: 0.78rem; }
.dropzone.is-invalid { border-color: var(--tk-crimson); background: var(--tk-crimson-soft); }

/* Thumbnail preview lampiran: kotak kecil seragam, klik untuk perbesar */
.att-thumb {
  width: 84px;
  height: 84px;
  object-fit: cover;
  border-radius: 0.4rem;
  border: 1px solid var(--tk-line);
  cursor: zoom-in;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.att-thumb:hover { transform: translateY(-1px); box-shadow: 0 4px 10px -4px rgba(18, 54, 46, 0.4); }
.att-thumb-wrap { position: relative; display: inline-block; line-height: 0; }
.att-thumb-del {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 20px;
  height: 20px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--tk-crimson);
  color: #fff;
  font-size: 0.85rem;
  line-height: 20px;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
.att-thumb-del:hover { background: #8f2f27; }

/* Lightbox preview: dialog isi seluruh layar → klik di luar gambar pun menutup */
.img-lightbox {
  max-width: 100vw;
  max-height: 100vh;
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  display: grid;
  place-items: center;
  cursor: zoom-out;
  outline: none;
}
.img-lightbox:focus, .img-lightbox:focus-visible { outline: none; }
.img-lightbox::backdrop { background: rgba(0, 0, 0, 0.7); }
.img-lightbox img { max-width: 92vw; max-height: 92vh; border-radius: 0.4rem; }

/* ---- Bulk upload ---- */
.bulk-hints { display: flex; flex-direction: column; gap: 0.2rem; }

/* Panduan kolom + tombol template: satu panel bernuansa amber (dokumentasi) */
.bulk-recipe {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.8rem 1rem;
  border: 1px solid var(--tk-amber-soft);
  border-left: 3px solid var(--tk-amber);
  border-radius: 0.5rem;
  background: var(--tk-card);
}
.bulk-recipe-cols { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; }
.bulk-recipe-tag {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--tk-amber);
  margin-right: 0.15rem;
}
.bulk-recipe-cols code {
  font-family: var(--tk-font-mono);
  font-size: 0.72rem;
  padding: 0.1rem 0.4rem;
  border-radius: 0.3rem;
  background: var(--tk-card);
  border: 1px solid var(--tk-amber-soft);
  color: var(--tk-ink);
}
.bulk-recipe-cols code.opt { color: var(--tk-ink-soft); border-style: dashed; }
.bulk-recipe-note { margin: 0.5rem 0 0; font-size: 0.76rem; color: var(--tk-ink-soft); }
.bulk-recipe-note code {
  font-family: var(--tk-font-mono);
  font-size: 0.72rem;
  color: var(--tk-amber);
  background: none;
  padding: 0;
}
.bulk-recipe-dl {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.45rem 0.85rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--tk-amber);
  border: 1px solid var(--tk-amber);
  border-radius: 0.45rem;
  background: var(--tk-card);
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}
.bulk-recipe-dl:hover { background: var(--tk-amber); color: #fff; }

/* Batch ditolak: panel error per-baris (crimson), di dalam entry-form */
.bulk-reject {
  margin: 1rem 1.5rem 0;
  padding: 0.85rem 1rem;
  border: 1px solid #ecc4bf;
  border-left: 3px solid var(--tk-crimson);
  border-radius: 0.5rem;
  background: var(--tk-crimson-soft);
}
.bulk-reject-head { display: flex; align-items: flex-start; gap: 0.4rem; font-size: 0.85rem; color: var(--tk-ink); }
.bulk-reject-head .bx { color: var(--tk-crimson); font-size: 1.1rem; flex-shrink: 0; }
.bulk-reject-list {
  margin: 0.55rem 0 0;
  padding-left: 1.2rem;
  font-family: var(--tk-font-mono);
  font-size: 0.76rem;
  color: var(--tk-crimson);
}
.bulk-reject-list li { margin-bottom: 0.2rem; }

@media (max-width: 575.98px) {
  .bulk-recipe { flex-direction: column; align-items: stretch; }
  .bulk-recipe-dl { justify-content: center; }
}

/* ---- Auth page ---- */
.auth-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  background:
    radial-gradient(ellipse 60% 40% at 85% -5%, rgba(185, 116, 22, 0.14), transparent),
    radial-gradient(ellipse 50% 45% at 10% 105%, rgba(30, 92, 79, 0.16), transparent),
    var(--tk-paper);
  padding: 1.5rem;
}
.auth-card {
  width: 100%;
  max-width: 420px;
  animation: tk-rise 0.5s ease-out backwards;
}
.auth-brand {
  font-family: var(--tk-font-display);
  font-weight: 700;
  font-size: 1.4rem;
  letter-spacing: -0.02em;
}

/* Notif baru: lonceng bergoyang + badge berdenyut biar user aware */
@keyframes tk-bell-ring {
  0%, 100% { transform: rotate(0); }
  20% { transform: rotate(15deg); }
  40% { transform: rotate(-12deg); }
  60% { transform: rotate(8deg); }
  80% { transform: rotate(-5deg); }
}
.notif-ring .bx-bell { animation: tk-bell-ring 0.7s ease-in-out; transform-origin: top center; }
@keyframes tk-badge-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.35); }
}
.notif-ring #notif-badge { animation: tk-badge-pulse 0.7s ease-in-out; }

/* Toast popup notif baru */
#notif-toast-wrap {
  position: fixed;
  top: 4.5rem; /* di bawah navbar (bell & profil) */
  right: 1rem;
  z-index: 1090;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-width: min(360px, calc(100vw - 2rem));
}
.notif-toast {
  display: flex;
  gap: 0.65rem;
  align-items: flex-start;
  padding: 0.75rem 0.9rem;
  border-radius: 0.5rem;
  background: var(--bs-body-bg, #fff);
  color: var(--bs-body-color, #566a7f);
  box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.18);
  border-left: 3px solid var(--bs-primary, #696cff);
  text-decoration: none;
  animation: tk-toast-in 0.3s ease-out;
}
.notif-toast.hiding { animation: tk-toast-out 0.25s ease-in forwards; }
.notif-toast > .bx { font-size: 1.25rem; color: var(--bs-primary, #696cff); flex-shrink: 0; }
.notif-toast .notif-toast-msg { font-size: 0.85rem; line-height: 1.3; flex: 1; }
.notif-toast-close {
  flex-shrink: 0;
  border: 0;
  background: none;
  padding: 0;
  line-height: 1;
  color: var(--bs-body-color, #566a7f);
  opacity: 0.55;
  cursor: pointer;
}
.notif-toast-close:hover { opacity: 1; }
@keyframes tk-toast-in {
  from { opacity: 0; transform: translateX(1rem); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes tk-toast-out {
  to { opacity: 0; transform: translateX(1rem); }
}

/* ==== Dark mode ==================================================
   Neutral dark (no green cast). Applies when the user picked dark
   (data-bs-theme="dark") OR the OS is dark and hasn't been overridden.
   ponytail: palette lives in one @import-less block copied to two
   selectors — @media can't join a selector list, so the vars repeat.
   Almost everything reads --tk-*; Bootstrap's own [data-bs-theme=dark]
   handles its body/card/dropdown/table base. */
:root[data-bs-theme="dark"] {
  --tk-ink: #e4e6e5;
  --tk-ink-soft: #9aa3a1;
  --tk-paper: #16181a;
  --tk-card: #1f2224;
  --tk-well: #2a2e30;
  --tk-line: #363b3d;
  --tk-pine: #56b39c;
  --bs-primary: #56b39c;
  --bs-primary-rgb: 86, 179, 156;
  --tk-pine-deep: #1f2224;
  --tk-amber: #e0a34a;
  --tk-amber-soft: #382c18;
  --tk-indigo: #9098e0;
  --tk-indigo-soft: #262a44;
  --tk-crimson: #e08279;
  --tk-crimson-soft: #3a231f;
  --tk-moss: #74b878;
  --tk-moss-soft: #223420;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-bs-theme]) {
    --tk-ink: #e4e6e5;
    --tk-ink-soft: #9aa3a1;
    --tk-paper: #16181a;
    --tk-card: #1f2224;
    --tk-well: #2a2e30;
    --tk-line: #363b3d;
    --tk-pine: #56b39c;
  --bs-primary: #56b39c;
  --bs-primary-rgb: 86, 179, 156;
    --tk-pine-deep: #1f2224;
    --tk-amber: #e0a34a;
    --tk-amber-soft: #382c18;
    --tk-indigo: #9098e0;
    --tk-indigo-soft: #262a44;
    --tk-crimson: #e08279;
    --tk-crimson-soft: #3a231f;
    --tk-moss: #74b878;
    --tk-moss-soft: #223420;
    color-scheme: dark;
  }
}

/* surfaces with accent-tinted hardcoded hex → neutralize in dark */
:root[data-bs-theme="dark"] .chip-open { background: var(--tk-moss-soft); border-color: #2f5142; }
:root[data-bs-theme="dark"] .table-hover > tbody > tr:hover > * { background-color: var(--tk-well); }
:root[data-bs-theme="dark"] .copy-btn:hover { background: var(--tk-well); }
/* notif toast reads --bs-* — pin it to the skin surfaces */
:root[data-bs-theme="dark"] .notif-toast { background: var(--tk-card); color: var(--tk-ink); border-left-color: var(--tk-pine); }
:root[data-bs-theme="dark"] .notif-toast > .bx { color: var(--tk-pine); }
:root[data-bs-theme="dark"] .notif-toast-close { color: var(--tk-ink-soft); }

/* Sneat's core.css dark dropdown vars don't kick in reliably → pin Bootstrap's
   dropdown vars to the skin. Covers notif + profil + every other dropdown. */
:root[data-bs-theme="dark"] .dropdown-menu {
  --bs-dropdown-bg: var(--tk-card);
  --bs-dropdown-color: var(--tk-ink);
  --bs-dropdown-border-color: var(--tk-line);
  --bs-dropdown-link-color: var(--tk-ink);
  --bs-dropdown-link-hover-bg: var(--tk-well);
  --bs-dropdown-link-hover-color: var(--tk-ink);
  --bs-dropdown-divider-bg: var(--tk-line);
}
:root[data-bs-theme="dark"] .dropdown-menu .dropdown-item-text,
:root[data-bs-theme="dark"] .dropdown-menu .text-body-secondary { color: var(--tk-ink-soft) !important; }

/* Sneat pins --bs-paper-bg:#fff and --bs-base-color:#22303e at :root with no dark
   override. Two symptoms, one cause: --bs-modal-bg reads paper-bg (→ light modals),
   and input/select borders are color-mix(base-color 22%, paper-bg) (→ dark-on-dark,
   invisible outlines). Retint both source vars once so every modal and every field
   in the app follows the skin — base-color must be light in dark mode since it's
   the *ink* side of that mix. */
:root[data-bs-theme="dark"] {
  --bs-paper-bg: var(--tk-card);
  --bs-base-color: #e4e6e5;
  --bs-base-color-rgb: 228, 230, 229;
  --bs-border-color: var(--tk-line);
  --bs-modal-color: var(--tk-ink);
  --bs-modal-border-color: var(--tk-line);
  --bs-modal-header-border-color: var(--tk-line);
  --bs-modal-footer-border-color: var(--tk-line);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-bs-theme]) {
    --bs-paper-bg: var(--tk-card);
    --bs-base-color: #e4e6e5;
    --bs-base-color-rgb: 228, 230, 229;
    --bs-border-color: var(--tk-line);
    --bs-modal-color: var(--tk-ink);
    --bs-modal-border-color: var(--tk-line);
    --bs-modal-header-border-color: var(--tk-line);
    --bs-modal-footer-border-color: var(--tk-line);
  }
}

/* flatpickr popup: vendor CSS hardcodes #393939 / rgba(0,0,0,.9) di atas kalender
   transparan → di dark jadi hitam-di-atas-gelap, tak terbaca. Warnanya hex mentah
   (bukan var), jadi harus ditimpa betulan. Kalender absolute di <body> & dipakai
   semua field tanggal, jadi satu blok ini menutup seluruh app. */
:root[data-bs-theme="dark"] .flatpickr-calendar {
  background: var(--tk-card);
  border: 1px solid var(--tk-line);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}
:root[data-bs-theme="dark"] .flatpickr-calendar,
:root[data-bs-theme="dark"] .flatpickr-months .flatpickr-month,
:root[data-bs-theme="dark"] .flatpickr-current-month input.cur-year,
:root[data-bs-theme="dark"] .flatpickr-monthDropdown-months,
:root[data-bs-theme="dark"] .flatpickr-day {
  color: var(--tk-ink);
  fill: var(--tk-ink);
}
:root[data-bs-theme="dark"] .flatpickr-monthDropdown-months { background: var(--tk-card); }
:root[data-bs-theme="dark"] span.flatpickr-weekday { color: var(--tk-ink-soft); }
:root[data-bs-theme="dark"] .flatpickr-months .flatpickr-prev-month svg,
:root[data-bs-theme="dark"] .flatpickr-months .flatpickr-next-month svg { fill: var(--tk-ink-soft); }
:root[data-bs-theme="dark"] .flatpickr-day:hover { background: var(--tk-well); border-color: var(--tk-well); }
:root[data-bs-theme="dark"] .flatpickr-day.flatpickr-disabled,
:root[data-bs-theme="dark"] .flatpickr-day.prevMonthDay,
:root[data-bs-theme="dark"] .flatpickr-day.nextMonthDay { color: var(--tk-ink-soft); opacity: 0.5; }
/* range: selected/inRange pakai --bs-primary biar ikut pine */
:root[data-bs-theme="dark"] .flatpickr-day.inRange { background: var(--tk-well); border-color: var(--tk-well); box-shadow: -5px 0 0 var(--tk-well), 5px 0 0 var(--tk-well); }
:root[data-bs-theme="dark"] .flatpickr-day.selected,
:root[data-bs-theme="dark"] .flatpickr-day.startRange,
:root[data-bs-theme="dark"] .flatpickr-day.endRange {
  background: var(--tk-pine);
  border-color: var(--tk-pine);
  color: #10221c;
}
:root[data-bs-theme="dark"] .flatpickr-calendar.arrowTop::after { border-bottom-color: var(--tk-card); }
:root[data-bs-theme="dark"] .flatpickr-calendar.arrowTop::before { border-bottom-color: var(--tk-line); }
:root[data-bs-theme="dark"] .flatpickr-calendar.arrowBottom::after { border-top-color: var(--tk-card); }
:root[data-bs-theme="dark"] .flatpickr-calendar.arrowBottom::before { border-top-color: var(--tk-line); }

/* Theme toggle: match the bell — muted icon, subtle warm hover */
#theme-toggle { color: var(--tk-ink-soft); transition: color 0.15s ease; }
#theme-toggle:hover { color: var(--tk-amber); }