/* WA Status Scheduler — design tokens 1:1 dari mockup (PRD Section 7) */
* { margin:0; padding:0; box-sizing:border-box; font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif; }
body { background:#f5f5f5; display:flex; justify-content:center; min-height:100vh; }

/* ===== LOGIN ===== */
.login-screen {
  width:100%; max-width:430px; min-height:100vh;
  background:linear-gradient(135deg,#075E54,#128C7E);
  display:flex; align-items:center; justify-content:center; padding:32px 24px;
}
.login-card {
  background:white; border-radius:20px; padding:32px 24px; width:100%; max-width:340px;
  text-align:center; box-shadow:0 20px 60px rgba(0,0,0,0.3);
}
.login-logo {
  width:64px; height:64px; border-radius:50%; background:#25D366; margin:0 auto 16px;
  display:flex; align-items:center; justify-content:center; font-size:32px; color:white;
}
.login-card h2 { font-size:18px; color:#212121; margin-bottom:4px; }
.login-card p { font-size:12px; color:#999; margin-bottom:24px; }
.login-field { text-align:left; margin-bottom:14px; }
.login-field label { display:block; font-size:11px; font-weight:600; color:#555; margin-bottom:6px; }
.login-field input {
  width:100%; padding:12px; border:1px solid #e0e0e0; border-radius:10px;
  font-size:13px; outline:none; background:white;
}
.login-field input:focus { border-color:#25D366; }
.login-btn {
  width:100%; padding:14px; background:#25D366; color:white; border:none; border-radius:10px;
  font-size:14px; font-weight:600; cursor:pointer; margin-top:8px;
}
.login-btn:disabled { opacity:.6; cursor:default; }
.login-error { background:#FFEBEE; color:#C62828; border-radius:8px; padding:8px 10px; font-size:11px; margin-top:10px; }
.login-footer { font-size:10px; color:#999; margin-top:20px; }

/* ===== APP SHELL ===== */
.app { width:100%; max-width:430px; background:#f5f5f5; min-height:100vh; display:none; flex-direction:column; }
.app.show { display:flex; }
.header {
  background:linear-gradient(135deg,#075E54,#128C7E); color:white; padding:16px 20px;
  display:flex; justify-content:space-between; align-items:center; flex-shrink:0;
}
.header h1 { font-size:16px; font-weight:600; }
.header .subtitle { font-size:11px; opacity:0.8; margin-top:2px; }
.header .avatar {
  width:32px; height:32px; border-radius:50%; background:#25D366; cursor:pointer;
  display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:bold;
}
.header .back { font-size:20px; cursor:pointer; margin-right:12px; }

/* ===== TAB BAR ===== */
.tab-bar { display:flex; background:white; border-bottom:1px solid #eee; box-shadow:0 2px 8px rgba(0,0,0,0.04); flex-shrink:0; }
.tab {
  flex:1; padding:12px 8px; text-align:center; font-size:12px; font-weight:500; color:#999;
  cursor:pointer; border-bottom:3px solid transparent; background:none; border-top:none; border-left:none; border-right:none;
}
.tab.active { color:#25D366; border-bottom-color:#25D366; }
.tab .tab-icon { display:block; font-size:16px; margin-bottom:2px; }

/* ===== CONTENT ===== */
.content { flex:1; overflow-y:auto; }
.content::-webkit-scrollbar { width:0; }
.pad { padding:16px; }
.view { display:none; }
.view.active { display:block; }

/* ===== STATS ===== */
.stats {
  background:white; border-radius:16px; padding:14px; display:grid; grid-template-columns:repeat(3,1fr);
  gap:8px; margin-bottom:14px; box-shadow:0 2px 8px rgba(0,0,0,0.06);
}
.stat-item { text-align:center; }
.stat-item .num { font-size:20px; font-weight:700; }
.stat-item .lbl { font-size:10px; color:#757575; margin-top:2px; }
.stat-item.sent .num { color:#4CAF50; }
.stat-item.pending .num { color:#FF9800; }
.stat-item.failed .num { color:#F44336; }

/* ===== SECTION TITLE ===== */
.section-title { font-size:13px; font-weight:600; color:#212121; margin-bottom:10px; display:flex; justify-content:space-between; align-items:center; }
.section-title .link { font-size:11px; color:#25D366; font-weight:500; cursor:pointer; }

/* ===== CHIPS ===== */
.chips { display:flex; gap:6px; margin-bottom:14px; overflow-x:auto; }
.chips::-webkit-scrollbar { display:none; }
.chip {
  padding:5px 12px; border-radius:16px; font-size:11px; background:white; color:#555;
  white-space:nowrap; border:1px solid #e0e0e0; cursor:pointer;
}
.chip.active { background:#25D366; color:white; border-color:#25D366; }
.chip.review { background:#FFF3E0; color:#E65100; border-color:#FFE0B2; }
.chip.review.active { background:#FF9800; color:white; border-color:#FF9800; }

/* ===== SCHEDULE CARD ===== */
.sched-card {
  background:white; border-radius:14px; padding:12px; margin-bottom:10px;
  box-shadow:0 2px 8px rgba(0,0,0,0.06); display:flex; gap:12px;
  border-left:4px solid transparent; cursor:pointer;
}
.sched-card.sent { border-left-color:#4CAF50; }
.sched-card.pending { border-left-color:#FF9800; }
.sched-card.failed { border-left-color:#F44336; }
.sched-thumb {
  width:56px; height:56px; border-radius:10px; background:linear-gradient(135deg,#667eea,#764ba2);
  display:flex; align-items:center; justify-content:center; font-size:24px; color:white;
  flex-shrink:0; position:relative;
}
.sched-thumb.img { background:linear-gradient(135deg,#f093fb,#f5576c); }
.sched-thumb .type-badge {
  position:absolute; bottom:-4px; right:-4px; background:white; border-radius:50%; width:20px; height:20px;
  display:flex; align-items:center; justify-content:center; font-size:10px; box-shadow:0 2px 4px rgba(0,0,0,0.15);
}
.sched-body { flex:1; min-width:0; }
.sched-title { font-size:13px; font-weight:600; color:#212121; margin-bottom:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sched-meta { font-size:11px; color:#757575; margin-bottom:6px; }
.sched-bottom { display:flex; justify-content:space-between; align-items:center; }

/* ===== BADGE ===== */
.badge { padding:3px 10px; border-radius:12px; font-size:10px; font-weight:600; }
.badge.sent { background:#E8F5E9; color:#2E7D32; }
.badge.pending { background:#FFF3E0; color:#E65100; }
.badge.processing { background:#E3F2FD; color:#1565C0; }
.badge.failed { background:#FFEBEE; color:#C62828; }

/* ===== MEDIA ITEM ===== */
.media-item {
  background:white; border-radius:12px; padding:10px; margin-bottom:10px;
  box-shadow:0 2px 6px rgba(0,0,0,0.05); display:flex; gap:12px; cursor:pointer;
  border-left:3px solid transparent;
}
.media-item.unreviewed { border-left-color:#FF9800; }
.media-item.tagged { border-left-color:#25D366; }
.media-thumb {
  width:60px; height:80px; border-radius:8px; background:linear-gradient(135deg,#667eea,#764ba2);
  display:flex; align-items:center; justify-content:center; font-size:24px; color:white;
  flex-shrink:0; position:relative;
}
.media-thumb.img { background:linear-gradient(135deg,#43e97b,#38f9d7); }
.media-thumb .duration { position:absolute; bottom:4px; right:4px; background:rgba(0,0,0,0.65); color:white; padding:1px 5px; border-radius:4px; font-size:9px; }
.media-thumb .unreviewed-dot { position:absolute; top:-4px; right:-4px; width:12px; height:12px; background:#FF9800; border-radius:50%; border:2px solid white; }
.media-body { flex:1; min-width:0; display:flex; flex-direction:column; justify-content:space-between; }
.media-title { font-size:13px; font-weight:600; color:#212121; margin-bottom:2px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.media-title.placeholder { color:#999; font-style:italic; font-weight:400; }
.media-filename { font-size:10px; color:#999; font-family:'Courier New',monospace; margin-bottom:6px; display:flex; align-items:center; gap:4px; }
.media-filename .ext { background:#f0f0f0; padding:1px 5px; border-radius:3px; font-size:9px; color:#757575; }
.media-tags { display:flex; gap:4px; flex-wrap:wrap; }
.tag { background:#E8F5E9; color:#2E7D32; padding:2px 8px; border-radius:10px; font-size:9px; font-weight:500; }
.tag.custom { background:#E3F2FD; color:#1565C0; }
.tag.empty { background:#FFF3E0; color:#E65100; border:1px dashed #FFB74D; font-style:italic; }
.media-actions { display:flex; gap:4px; align-items:flex-end; flex-direction:column; }
.btn-icon {
  width:28px; height:28px; border-radius:6px; background:#f5f5f5; border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center; font-size:13px; color:#757575;
}
.btn-icon.tag-btn { background:#E8F5E9; color:#25D366; }
.btn-icon.tag-btn.urgent { background:#FFF3E0; color:#E65100; }

/* ===== SEARCH / SOURCE / LIST HEADER ===== */
.search { background:#f5f5f5; border-radius:10px; padding:8px 12px; display:flex; align-items:center; gap:8px; margin-bottom:10px; }
.search input { border:none; outline:none; flex:1; font-size:12px; background:transparent; }
.source-info {
  background:#E3F2FD; border-radius:8px; padding:6px 10px; margin-bottom:10px;
  font-size:10px; color:#1565C0; display:flex; justify-content:space-between; align-items:center;
}
.list-header { display:flex; justify-content:space-between; align-items:center; padding:8px 0 8px; font-size:11px; color:#757575; }
.sort-btn { background:none; border:none; font-size:11px; color:#25D366; cursor:pointer; font-weight:600; }

/* ===== DETAIL ===== */
.detail-status { background:white; padding:24px 20px; text-align:center; border-bottom:1px solid #eee; }
.detail-status .icon-big { font-size:48px; margin-bottom:8px; }
.detail-status h3 { font-size:16px; margin-bottom:4px; }
.detail-status p { font-size:12px; color:#757575; }
.info-card { background:white; padding:16px; margin-top:10px; }
.info-card h4 { font-size:12px; color:#757575; margin-bottom:10px; }
.info-row { display:flex; justify-content:space-between; padding:8px 0; font-size:12px; border-bottom:1px solid #f5f5f5; }
.info-row:last-child { border-bottom:none; }
.info-row .lbl { color:#757575; }
.info-row .val { font-weight:500; color:#212121; text-align:right; max-width:60%; word-break:break-word; }
.timeline { background:white; padding:16px; margin-top:10px; }
.timeline h4 { font-size:13px; margin-bottom:12px; }
.tl-item { display:flex; gap:12px; padding:8px 0; position:relative; }
.tl-item:not(:last-child)::before { content:''; position:absolute; left:8px; top:24px; bottom:-8px; width:2px; background:#e0e0e0; }
.tl-dot { width:18px; height:18px; border-radius:50%; background:#4CAF50; display:flex; align-items:center; justify-content:center; font-size:10px; color:white; flex-shrink:0; z-index:1; }
.tl-dot.gray { background:#e0e0e0; }
.tl-dot.wait { background:#FF9800; }
.tl-body { flex:1; }
.tl-title { font-size:12px; font-weight:500; }
.tl-time { font-size:11px; color:#999; }
.detail-actions { padding:16px; display:flex; gap:10px; }
.btn-outline { flex:1; padding:12px; background:white; color:#25D366; border:1px solid #25D366; border-radius:10px; font-size:13px; font-weight:600; cursor:pointer; }
.btn-danger { flex:1; padding:12px; background:white; color:#F44336; border:1px solid #F44336; border-radius:10px; font-size:13px; font-weight:600; cursor:pointer; }
.btn-outline:disabled, .btn-danger:disabled { opacity:.5; cursor:default; }

/* ===== REPORT ===== */
.date-nav { background:white; border-radius:12px; padding:10px; display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; box-shadow:0 2px 8px rgba(0,0,0,0.06); }
.date-nav button { background:none; border:none; font-size:18px; cursor:pointer; color:#25D366; padding:4px 12px; }
.date-nav .date-label { font-size:13px; font-weight:600; color:#212121; }
.report-item { background:white; border-radius:12px; padding:12px; margin-bottom:10px; box-shadow:0 2px 8px rgba(0,0,0,0.06); display:flex; gap:10px; align-items:center; }
.report-item.fail { align-items:flex-start; }
.report-thumb { width:44px; height:44px; border-radius:8px; background:linear-gradient(135deg,#667eea,#764ba2); display:flex; align-items:center; justify-content:center; color:white; font-size:18px; flex-shrink:0; }
.report-thumb.img { background:linear-gradient(135deg,#43e97b,#38f9d7); }
.report-body { flex:1; min-width:0; }
.report-title { font-size:12px; font-weight:600; color:#212121; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.report-meta { font-size:10px; color:#999; margin-top:2px; }
.report-error { background:#FFEBEE; border-radius:8px; padding:6px 8px; font-size:10px; color:#C62828; margin-top:6px; }

/* ===== FAB ===== */
.fab {
  position:fixed; bottom:24px; right:calc(50% - 195px); width:56px; height:56px; border-radius:50%;
  background:#25D366; color:white; border:none; font-size:28px; cursor:pointer;
  box-shadow:0 4px 16px rgba(37,211,102,0.4); display:none; align-items:center; justify-content:center; z-index:20;
}
@media (min-width:430px) { .fab { right:24px; } }
.fab.show { display:flex; }
.fab.hide { display:none !important; }

/* ===== MODAL ===== */
.modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.4); display:none; align-items:flex-end; z-index:100; }
.modal-overlay.show { display:flex; }
.modal { background:white; width:100%; max-width:430px; margin:0 auto; border-radius:24px 24px 0 0; padding:20px; max-height:88%; overflow-y:auto; }
.modal-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; }
.modal-header h2 { font-size:15px; }
.modal-header .close { font-size:20px; cursor:pointer; color:#999; background:none; border:none; }
.form-group { margin-bottom:14px; }
.form-group label { font-size:12px; font-weight:600; color:#555; margin-bottom:6px; display:block; }
.form-group input[type="text"], .form-group input[type="date"], .form-group input[type="time"],
.form-group textarea, .form-group select {
  width:100%; padding:10px 12px; border:1px solid #e0e0e0; border-radius:10px;
  font-size:12px; outline:none; font-family:inherit; background:white;
}
.form-group input:focus, .form-group textarea:focus { border-color:#25D366; }
.form-group textarea { resize:none; height:60px; }
.form-group .hint { font-size:10px; color:#999; margin-top:4px; }
.form-row { display:flex; gap:10px; }
.form-row .form-group { flex:1; }
.modal-preview { display:flex; gap:12px; margin-bottom:16px; padding:10px; background:#f5f5f5; border-radius:10px; }
.mp-thumb { width:56px; height:72px; border-radius:6px; background:linear-gradient(135deg,#667eea,#764ba2); display:flex; align-items:center; justify-content:center; color:white; font-size:22px; position:relative; }
.mp-thumb.img { background:linear-gradient(135deg,#43e97b,#38f9d7); }
.mp-info { flex:1; }
.mp-filename { font-size:10px; color:#999; font-family:'Courier New',monospace; margin-bottom:2px; }
.mp-title { font-size:12px; font-weight:600; }
.tag-input-wrap { display:flex; gap:6px; margin-bottom:8px; }
.tag-input-wrap input { flex:1; padding:10px 12px; border:1px solid #e0e0e0; border-radius:10px; font-size:12px; outline:none; }
.tag-input-wrap button { padding:0 16px; background:#25D366; color:white; border:none; border-radius:10px; font-size:16px; cursor:pointer; }
.current-tags { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.current-tag { padding:4px 10px; border-radius:12px; font-size:11px; background:#E8F5E9; color:#2E7D32; font-weight:500; display:flex; align-items:center; gap:6px; }
.current-tag .remove { cursor:pointer; font-weight:bold; opacity:0.7; }
.tag-suggestions { display:flex; flex-wrap:wrap; gap:6px; }
.tag-suggest { padding:6px 12px; border-radius:14px; font-size:11px; background:#f5f5f5; border:1px solid #e0e0e0; cursor:pointer; color:#555; }
.tag-suggest.selected { background:#E8F5E9; border-color:#25D366; color:#25D366; }
.modal-actions { display:flex; gap:8px; margin-top:8px; }
.btn-primary { flex:1; padding:12px; background:#25D366; color:white; border:none; border-radius:10px; font-size:13px; font-weight:600; cursor:pointer; }
.btn-primary:disabled { opacity:.6; cursor:default; }
.btn-secondary { padding:12px 16px; background:#f5f5f5; color:#555; border:none; border-radius:10px; font-size:13px; font-weight:600; cursor:pointer; }

/* ===== MEDIA PICKER ===== */
.picker-search { background:#f5f5f5; border-radius:10px; padding:8px 12px; display:flex; gap:8px; align-items:center; margin-bottom:10px; }
.picker-search input { border:none; outline:none; flex:1; font-size:12px; background:transparent; }
.picker-item { display:flex; gap:10px; padding:10px; border-radius:10px; cursor:pointer; align-items:center; }
.picker-item:hover { background:#f5f5f5; }
.picker-item.selected { background:#E8F5E9; }
.picker-thumb { width:40px; height:52px; border-radius:6px; background:linear-gradient(135deg,#667eea,#764ba2); display:flex; align-items:center; justify-content:center; color:white; font-size:18px; flex-shrink:0; }
.picker-item .p-info { flex:1; min-width:0; }
.picker-item .p-title { font-size:12px; font-weight:600; color:#212121; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.picker-item .p-file { font-size:10px; color:#999; font-family:'Courier New',monospace; }
.picker-empty { text-align:center; color:#999; font-size:12px; padding:24px 0; }

/* ===== EMPTY STATE ===== */
.empty { text-align:center; color:#999; font-size:12px; padding:32px 16px; }
.empty .empty-icon { font-size:36px; margin-bottom:8px; }

/* ===== TOAST ===== */
.toast {
  position:fixed; bottom:90px; left:50%; transform:translateX(-50%); background:#323232; color:white;
  padding:10px 18px; border-radius:10px; font-size:12px; z-index:200; display:none; max-width:90%;
  box-shadow:0 4px 12px rgba(0,0,0,0.3);
}
.toast.show { display:block; animation:fadein .2s; }
.toast.error { background:#C62828; }
@keyframes fadein { from { opacity:0; transform:translateX(-50%) translateY(6px); } to { opacity:1; } }

/* ===== LOADING ===== */
.loading { text-align:center; color:#999; font-size:12px; padding:20px 0; }
.spinner {
  width:22px; height:22px; border:3px solid #e0e0e0; border-top-color:#25D366;
  border-radius:50%; margin:0 auto 8px; animation:spin .8s linear infinite;
}
@keyframes spin { to { transform:rotate(360deg); } }

/* ===== BOTTOM NAV ===== */
.bottom-nav { background:white; border-top:1px solid #eee; display:flex; justify-content:space-around; padding:10px 0 16px; flex-shrink:0; }
.nav-item { display:flex; flex-direction:column; align-items:center; gap:2px; font-size:10px; color:#999; cursor:pointer; background:none; border:none; }
.nav-item.active { color:#25D366; }
.nav-item .icon { font-size:20px; }