/* Timesheet (Day/Week/Calendar) — tata letak dari rekaman Harvest a-waktu 006, 015, 048, 058, 073 */
.ts-atas { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-bottom: 14px; border-bottom: 1px solid var(--garis); margin-bottom: 16px; }
.ts-atas h1 { font-size: 17px; line-height: 24px; font-weight: 600; }
.ts-atas-kanan { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ts-tersimpan { font-size: var(--teks-kecil); color: var(--tinta-70); }
.ts-orang-lain { margin-bottom: 14px; }
.ts-kendali { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.ts-kendali .dorong { margin-left: auto; }
.nav-tgl { display: inline-flex; align-items: center; width: 280px; border: 1px solid var(--garis-kuat); border-radius: var(--radius); min-height: var(--tinggi-tombol); } /* Harvest 280x34 */
.nav-tgl button { border: 0; background: none; height: 32px; width: 34px; cursor: pointer; display: grid; place-items: center; border-radius: var(--radius); color: var(--tinta); }
.nav-tgl button:hover { background: var(--aksen-latar); }
.nav-tgl svg { width: 16px; height: 16px; }
.nav-tgl .nav-tgl-label { flex: 1; min-width: 0; padding: 0 6px; gap: 6px; display: inline-flex; align-items: center; justify-content: center; font-size: var(--teks-kecil); white-space: nowrap; }
.lencana-angka { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: #ecedeb; font-size: 12px; font-weight: 600; }

.deret-hari { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)) 126px; /* Harvest: total minggu 126px */ border-bottom: 1px solid var(--garis); margin: 18px 0 0; }
.deret-hari a, .deret-hari .total-minggu { height: 57px; padding: 7px 4px 0; line-height: 21px; /* Harvest 57px */ text-decoration: none; color: var(--tinta); border-bottom: 3px solid transparent; }
.deret-hari a:hover { background: var(--aksen-latar); }
.deret-hari a[aria-current="date"] { border-bottom-color: var(--aksen); }
.deret-hari b { display: block; font-weight: 500; }
.deret-hari a[aria-current="date"] b { font-weight: 600; }
.deret-hari small { display: inline-flex; align-items: center; gap: 3px; font-size: var(--teks-kecil); line-height: 21px; color: var(--tinta-70); }
.deret-hari small svg { width: 12px; height: 12px; }
.total-minggu { text-align: right; padding-left: 12px; }

.entri { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 16px; align-items: center; padding: 14px 0 14px 12px; border-bottom: 1px solid var(--garis); }
.entri-proyek { font-weight: 600; }
.entri-proyek span { font-weight: 400; }
.entri-catatan { color: var(--tinta-70); font-size: var(--teks-kecil); margin-top: 2px; white-space: pre-wrap; }
.entri-jam { font-size: 18px; font-weight: 500; min-width: 64px; text-align: right; display: inline-flex; align-items: center; gap: 6px; justify-content: flex-end; }
.entri-jam svg { width: 14px; height: 14px; color: var(--tinta-70); }
.entri-aksi { display: flex; gap: 6px; align-items: center; }
.tombol-start { min-height: 38px; padding: 0 14px; font-size: 16px; }
.tombol-start svg { width: 18px; height: 18px; }
.tombol-start[data-jalan="true"] { background: var(--aksen); border-color: var(--aksen); color: #fff; }
.tombol-kecil { min-height: 28px; padding: 0 10px; font-size: var(--teks-kecil); }
.entri-total { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 16px; align-items: center; padding: 12px 0 12px 4px; }
.entri-total b { font-size: 18px; font-weight: 500; text-align: right; min-width: 64px; }
.entri-total .spasi { min-width: 160px; }

.ts-kosong { margin-top: 24px; text-align: center; padding: 40px 24px; border-radius: var(--radius); background: var(--aksen-latar); }
.ts-kosong h2 { font-size: 22px; line-height: 30px; font-weight: 500; margin-bottom: 6px; }
.ts-kosong p { color: var(--tinta-70); max-width: 460px; margin: 0 auto; }
.ts-kaki { display: flex; gap: 10px; flex-wrap: wrap; justify-content: space-between; padding-top: 16px; margin-top: 8px; border-top: 1px solid var(--garis); }
.ts-kaki-kiri { display: flex; gap: 10px; flex-wrap: wrap; }

/* Week */
.minggu-wadah { overflow-x: auto; margin-top: 16px; }
.minggu { width: 100%; border-collapse: collapse; min-width: 760px; }
.minggu th { font-weight: 400; font-size: var(--teks-kecil); color: var(--tinta-70); padding: 6px 4px; text-align: right; }
.minggu th b { display: block; font-weight: 500; color: var(--tinta); font-size: var(--teks); }
.minggu th.hari-ini b, .minggu th.hari-ini { color: var(--aksen); }
.minggu th:first-child { text-align: left; }
.minggu td { padding: 10px 4px; border-top: 1px solid var(--garis); text-align: right; vertical-align: middle; }
.minggu td:first-child { text-align: left; }
.minggu input { width: 64px; min-height: 36px; text-align: right; padding: 4px 8px; border: 1px solid var(--garis-kuat); border-radius: var(--radius); }
.minggu input:focus { outline: none; border-color: var(--aksen); box-shadow: var(--fokus); }
.minggu .baris-total td { font-weight: 600; border-top: 1px solid var(--garis-kuat); }
.minggu .terkunci { color: var(--tinta-70); display: inline-flex; gap: 3px; align-items: center; }
.minggu .terkunci svg { width: 12px; height: 12px; }

/* Calendar */
.kal-wadah { overflow-x: auto; margin-top: 16px; border: 1px solid var(--garis); border-radius: var(--radius); }
.kal { display: grid; grid-template-columns: 52px repeat(7, minmax(96px, 1fr)); min-width: 760px; }
.kal-kepala { padding: 8px; border-bottom: 1px solid var(--garis); font-size: var(--teks-kecil); }
.kal-kepala b { display: block; font-size: var(--teks); font-weight: 500; }
.kal-kepala.hari-ini b { color: var(--aksen); }
.kal-jam { font-size: 11px; color: var(--tinta-70); text-align: right; padding-right: 6px; height: 44px; border-top: 1px solid var(--garis); }
.kal-kolom { position: relative; border-left: 1px solid var(--garis); }
.kal-sel { height: 44px; border-top: 1px solid var(--garis); }
.kal-blok { position: absolute; left: 3px; right: 3px; background: var(--aksen-muda); border: 0; border-left: 3px solid var(--aksen); border-radius: 6px; padding: 3px 6px; font-size: 12px; line-height: 15px; overflow: hidden; cursor: pointer; text-align: left; }
.kal-blok b { display: block; font-weight: 600; }

/* Laci catatan berulang */
.laci-lapis { position: fixed; inset: 0; background: rgba(29, 30, 28, .3); z-index: 290; }
.laci { position: fixed; top: 0; right: 0; bottom: 0; width: min(440px, 100%); background: var(--putih); z-index: 295; box-shadow: var(--bayang); display: flex; flex-direction: column; }
.laci-kepala { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--garis); }
.laci-kepala h2 { font-size: 17px; font-weight: 600; }
.laci-isi { padding: 16px 20px; overflow-y: auto; display: grid; gap: 12px; align-content: start; }
.berulang { border: 1px solid var(--garis); border-radius: var(--radius); padding: 12px; display: grid; gap: 4px; }
.berulang-atas { display: flex; justify-content: space-between; gap: 8px; align-items: center; }

/* Modal entri */
.pil-ulang { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.pil-ulang svg { width: 18px; height: 18px; color: var(--tinta-70); }
.pil-ulang button { min-height: 28px; padding: 0 12px; border-radius: var(--radius-pil); border: 1px solid var(--garis-kuat); background: var(--putih); cursor: pointer; font-size: var(--teks-kecil); }
.pil-ulang button[aria-pressed="true"] { background: var(--aksen-muda); border-color: var(--aksen); }
.entri-form-baris { display: grid; grid-template-columns: minmax(0, 1fr) 132px; gap: 10px; }
.input-durasi { font-size: 26px !important; text-align: right; min-height: 50px !important; font-weight: 500; }
.pemisah { border: 0; border-top: 1px solid var(--garis); margin: 16px 0; }

@media (max-width: 640px) {
  .deret-hari { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .deret-hari .total-minggu { grid-column: 1 / -1; text-align: left; padding-left: 4px; }
  .entri { grid-template-columns: minmax(0, 1fr) auto; }
  .entri-aksi { grid-column: 1 / -1; }
  .nav-tgl .nav-tgl-label { min-width: 0; }
  .entri-form-baris { grid-template-columns: 1fr; }
}

/* Keadaan kosong & kartu integrasi (Harvest: teks Day view + kartu "Track time where you work" + Dismiss) */
.ts-kosong-teks { color: var(--tinta-70); padding: 20px 0 4px; }
.ts-kartu-integrasi { margin-top: 20px; }
.ts-kartu-daftar { font-size: var(--teks-kecil); margin: 10px auto 14px !important; color: var(--tinta) !important; }
.ts-ajukan { position: relative; display: flex; flex-direction: column; align-items: flex-end; }
.ts-ajukan #tsKonfirmasi { position: absolute; right: 0; top: 100%; z-index: 20; min-width: 420px; }
.baris-nama { display: flex; align-items: flex-start; gap: 6px; }
.baris-nama .ikon-tombol { flex: none; margin-top: -4px; }
.kal-jam-blok { font-weight: 500; float: right; }
.kal-klien { color: var(--tinta-70); }

/* Bilah catat dengan kalimat (ukuran bilah Harvest AI desktop: label 13/500 #737472, kotak 720x44 radius 24, tombol 28px) */
.bilah-catat { max-width: 720px; margin: 4px 0 8px; }
.bilah-catat label { display: block; font-size: var(--teks-kecil); font-weight: 500; line-height: 18px; color: #737472; margin-bottom: 4px; }
.bilah-kotak { display: flex; align-items: center; gap: 8px; height: 44px; padding: 4px 4px 4px 16px; border: 1px solid #bbbbbb; border-radius: 24px; background: var(--putih); }
.bilah-kotak:focus-within { border-color: var(--aksen); box-shadow: var(--fokus); }
.bilah-kotak > svg { width: 18px; height: 18px; color: var(--aksen); flex: none; }
.bilah-kotak input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; font-size: var(--teks); }
.bilah-kirim, .bilah-ciut-tombol { width: 28px; height: 28px; border-radius: 9999px; border: 0; cursor: pointer; flex: none; display: grid; place-items: center; font-size: 15px; }
.bilah-kirim { background: var(--aksen); color: #fff; }
.bilah-kirim:hover { background: var(--aksen-tua); }
.bilah-ciut-tombol { background: transparent; color: #a5a5a4; }
.bilah-ciut-tombol:hover { color: var(--tinta); }
.bilah-status { font-size: var(--teks-kecil); color: var(--tinta-70); min-height: 18px; margin-top: 4px; }
.bilah-ciut { margin: 0 0 8px; }