/* =========================================================
   css/layar/kerja.css
   Gaya khusus AWAH AI Daily Work. Dasar (tombol, kartu, lencana status, tabel) ada di dasar.css & komponen/.
   ========================================================= */

/* ---------- Bilah atas: jam demo (App.perbaruiTombolWaktu) ---------- */
.tombol-waktu {
  display: inline-flex; align-items: center; gap: 6px; flex: none; white-space: nowrap; cursor: pointer;
  padding: 4px 10px; border-radius: 999px; font: inherit; font-size: 12px;
  color: var(--accent-ink); background: var(--accent-bg); border: 1px solid var(--accent);
}
.tombol-waktu svg { width: 14px; height: 14px; }
.tombol-waktu span { font-weight: 700; }
.tombol-waktu:disabled { cursor: default; border-color: transparent; color: var(--text-2); background: var(--surface-2); }
@media (max-width: 600px) { .tombol-waktu b { display: none; } }

/* ---------- Kartu saran AWAH (rangkuman, draf) ---------- */
.saran-awah { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin-top: 12px; padding: 12px 16px; background: var(--accent-bg); border-color: transparent; }
.saran-awah .brand-logo { width: 32px; height: 32px; flex: none; }
.saran-isi { flex: 1 1 280px; min-width: 0; font-size: 13.5px; display: grid; gap: 6px; justify-items: start; }
.saran-isi .muted { font-size: 12px; margin: 0; }
.sdm-poin { margin: 2px 0; padding-left: 18px; display: grid; gap: 4px; }
.deteksi-aksi { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }

/* ---------- Karyawan: pesan WhatsApp tiruan ---------- */
.wa-tiruan h2 { display: inline-flex; align-items: center; gap: 6px; }
.wa-tiruan h2 svg { width: 16px; height: 16px; color: var(--good-ink); }
.wa-tiruan ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.wa-tiruan li { display: flex; justify-content: space-between; align-items: flex-end; gap: 10px; padding: 8px 12px; border-radius: 4px 12px 12px 12px;
  background: var(--good-bg); font-size: 13px; max-width: 640px; }
.wa-tiruan li small { color: var(--muted); font-size: 11px; flex: none; }

/* ---------- Karyawan: kartu tugas ---------- */
.daftar-tugas { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 10px; }
.kartu-tugas { display: grid; gap: 6px; align-content: start; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); }
.kartu-tugas.terlambat { border-color: var(--crit); }
.kartu-tugas.selesai { opacity: .75; }
.kartu-tugas > b { font-size: 14px; }
.kartu-tugas > p { margin: 0; font-size: 13px; color: var(--text-2); }
.kartu-tugas > small { font-size: 12px; }
.kartu-tugas .kendala { display: flex; gap: 6px; padding: 6px 8px; border-radius: 8px; background: var(--warn-bg); color: var(--warn-ink); }
.kartu-tugas .kendala svg { width: 14px; height: 14px; flex: none; margin-top: 2px; }
.tugas-atas { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.tugas-aksi { display: flex; flex-wrap: wrap; gap: 6px; align-items: flex-start; margin-top: 2px; }
.lencana-prioritas { font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 999px; }
.prioritas-tinggi { color: var(--crit-ink); background: var(--crit-bg); }
.prioritas-sedang { color: var(--warn-ink); background: var(--warn-bg); }
.prioritas-rendah { color: var(--text-2); background: var(--surface-2); }
.form-kendala { flex: 1 1 100%; }
.form-kendala summary { list-style: none; display: inline-flex; }
.form-kendala summary::-webkit-details-marker { display: none; }
.form-kendala form { display: grid; gap: 6px; margin-top: 8px; justify-items: start; }
.form-kendala textarea { width: 100%; }

/* ---------- Formulir (laporan, tugas baru) ---------- */
.form-laporan, .form-tugas { display: grid; gap: 6px; margin-top: 12px; }
.form-laporan textarea, .form-tugas textarea, .form-tugas input, .form-tugas select, .form-kendala textarea {
  font: inherit; font-size: 14px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); color: var(--text); min-width: 0; width: 100%;
}
.form-laporan .btn-primer, .form-tugas .btn-primer { justify-self: start; margin-top: 4px; }
.form-tugas .dua-kolom { margin-top: 0; }
.label-baris { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.label-baris .link-btn { display: inline-flex; align-items: center; gap: 4px; }
.label-baris .link-btn svg { width: 14px; height: 14px; }
.pilihan-beban { border: 0; padding: 0; margin: 4px 0 0; display: flex; flex-wrap: wrap; gap: 6px 16px; }
.pilihan-beban legend { width: 100%; margin-bottom: 4px; }
.pilihan-beban label { display: inline-flex; gap: 6px; align-items: center; font-size: 14px; min-height: 32px; }
.laporan-otomatis { margin-top: 0; }
.daftar-ringkas { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 6px; }
.daftar-ringkas li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding: 8px 10px; border-radius: 10px; background: var(--surface-2); font-size: 13px; }
.daftar-ringkas li b { flex: 1 1 100%; }
.daftar-ringkas li small { color: var(--text-2); font-size: 12px; flex: 1 1 auto; }
.isi-laporan { margin: 12px 0 0; display: grid; gap: 8px; font-size: 13.5px; }
.isi-laporan div { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 8px; }
.isi-laporan dt { color: var(--muted); }
.isi-laporan dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 600px) { .isi-laporan div { grid-template-columns: minmax(0, 1fr); gap: 0; } }

/* ---------- Pimpinan: status staf & KPI ---------- */
.daftar-staf, .daftar-kpi { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.daftar-staf li { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 2fr) auto; gap: 8px 14px; align-items: center; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--border); }
.staf-nama { display: grid; gap: 2px; min-width: 0; }
.staf-nama small { font-size: 12px; color: var(--text-2); }
.staf-kemajuan { display: grid; gap: 4px; }
.staf-kemajuan small { font-size: 12px; color: var(--text-2); }
.staf-lapor { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: flex-end; }
.batang-kemajuan { display: block; height: 8px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.batang-kemajuan i { display: block; height: 100%; border-radius: 999px; background: var(--accent); }
@media (max-width: 760px) {
  .daftar-staf li { grid-template-columns: minmax(0, 1fr); }
  .staf-lapor { justify-content: flex-start; }
}
.daftar-kpi li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 8px 16px; align-items: center; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--border); }
.kpi-tiga { display: grid; gap: 6px; }
.kpi-batang { display: grid; grid-template-columns: 82px minmax(0, 1fr) 64px; gap: 8px; align-items: center; font-size: 12.5px; }
.kpi-batang b { text-align: right; }
.kpi-batang.rendah .batang-kemajuan i { background: var(--warn); }
.catatan-staf { grid-column: 1 / -1; margin: 0; display: flex; gap: 6px; font-size: 12.5px; color: var(--warn-ink); }
.catatan-staf svg { width: 14px; height: 14px; flex: none; margin-top: 2px; }
.catatan-kpi { margin-top: 12px; }
@media (max-width: 760px) { .daftar-kpi li { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Perintah kerja: tugas per staf ---------- */
.grid-kelompok { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 14px; }
.kelompok-tugas .daftar-ringkas li { background: var(--surface); border: 1px solid var(--border); }

/* ---------- Draf besok ---------- */
.aksi-draf { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 8px; }
.aksi-draf:empty { display: none; }
.grid-draf { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: 12px; margin-top: 12px; }
.kartu-draf { display: grid; gap: 8px; align-content: start; padding: 14px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface); }
.draf-atas { display: flex; justify-content: space-between; gap: 8px; align-items: flex-start; }
.draf-atas > div { display: grid; gap: 2px; min-width: 0; }
.draf-atas small { font-size: 12px; color: var(--text-2); }
.daftar-usulan { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.daftar-usulan li { display: flex; gap: 8px; align-items: flex-start; justify-content: space-between; padding: 8px 10px; border-radius: 10px; background: var(--surface-2); }
.daftar-usulan li > div { display: grid; gap: 4px; min-width: 0; font-size: 13px; }
.daftar-usulan small { font-size: 12px; color: var(--text-2); }
.daftar-usulan .ikon-btn { width: 32px; height: 32px; flex: none; }
.saran-draf { margin: 0; display: flex; gap: 6px; font-size: 12.5px; padding: 8px 10px; border-radius: 10px; background: var(--accent-bg); }
.saran-draf svg { width: 14px; height: 14px; flex: none; margin-top: 2px; color: var(--accent-ink); }

/* ---------- Audit log ---------- */
.daftar-audit { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.daftar-audit li { display: flex; gap: 12px; align-items: flex-start; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--border); }
.daftar-audit li > div { display: grid; gap: 2px; min-width: 0; font-size: 13px; }
.daftar-audit small { font-size: 12px; overflow-wrap: anywhere; }

/* HP: bilah atas berisi menu, nama kantor, label simulasi, jam demo, status AI, tema → nama kantor satu baris */
@media (max-width: 600px) {
  .topbar .klinik { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .topbar { gap: 6px; }
  .tombol-waktu { padding: 4px 8px; }
}