* { box-sizing: border-box; margin:0; padding:0; }
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background:#ece5dd; color:#222; -webkit-tap-highlight-color: transparent; }
.app { max-width: 480px; margin:0 auto; min-height:100vh; background:#fff; display:flex; flex-direction:column; box-shadow:0 0 20px rgba(0,0,0,.08); }
.topbar { background:#075e54; color:#fff; padding:14px 16px; display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; z-index:10; }
.topbar h1 { font-size:18px; font-weight:600; }
.topbar .actions a, .topbar .actions button { color:#fff; background:transparent; border:0; margin-left:12px; font-size:18px; text-decoration:none; cursor:pointer; }
.menu { background:#128c7e; display:flex; overflow-x:auto; }
.menu a { color:#fff; padding:10px 16px; text-decoration:none; font-size:13px; white-space:nowrap; }
.menu a.active { background:#075e54; font-weight:600; }
.content { flex:1; overflow-y:auto; padding:0; }
.contact-list { list-style:none; }
.contact-item { display:flex; padding:12px 14px; border-bottom:1px solid #eee; align-items:center; text-decoration:none; color:#222; }
.contact-item:active { background:#f5f5f5; }
.avatar { width:48px; height:48px; border-radius:50%; background:#25d366; color:#fff; display:flex; align-items:center; justify-content:center; font-weight:600; font-size:18px; margin-right:12px; flex-shrink:0; overflow:hidden; }
.avatar img { width:100%; height:100%; object-fit:cover; }
.c-body { flex:1; min-width:0; }
.c-top { display:flex; justify-content:space-between; align-items:center; }
.c-name { font-weight:600; font-size:15px; }
.c-time { font-size:11px; color:#888; }
.c-msg { font-size:13px; color:#666; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:2px; }
.badge { background:#25d366; color:#fff; border-radius:12px; padding:2px 8px; font-size:11px; min-width:20px; text-align:center; }
.badge-grey { background:#999; }
.tag { display:inline-block; padding:1px 6px; font-size:10px; border-radius:8px; background:#e0f2f1; color:#075e54; margin-left:6px; }
.tag-locked { background:#ffe0e0; color:#c00; }

/* Chat view */
.chat-wrap { display:flex; flex-direction:column; height:100vh; }
.chat-header { background:#075e54; color:#fff; padding:10px 14px; display:flex; align-items:center; position:sticky; top:0; z-index:10; }
.chat-header a.back { color:#fff; margin-right:10px; font-size:20px; text-decoration:none; }
.chat-header .ch-name { font-weight:600; font-size:15px; }
.chat-header .ch-sub { font-size:11px; opacity:.8; }
.messages { flex:1; overflow-y:auto; padding:12px; background:#ece5dd url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'><circle cx='2' cy='2' r='1' fill='%23d9d2c6'/></svg>"); }
.msg { max-width:80%; padding:8px 10px; border-radius:8px; margin-bottom:8px; font-size:14px; word-wrap:break-word; position:relative; }
.msg.in { background:#fff; align-self:flex-start; }
.msg.out { background:#dcf8c6; margin-left:auto; }
.msg .time { display:block; font-size:10px; color:#777; text-align:right; margin-top:2px; }
.msg .by { font-size:10px; color:#075e54; font-weight:600; }
.msg-row { display:flex; }
.msg-row.out { justify-content:flex-end; }
.composer { display:flex; padding:8px; background:#f0f0f0; border-top:1px solid #ddd; gap:6px; }
.composer textarea { flex:1; border:1px solid #ccc; border-radius:20px; padding:10px 14px; resize:none; font-family:inherit; font-size:14px; max-height:100px; }
.composer button { background:#25d366; color:#fff; border:0; border-radius:50%; width:42px; height:42px; cursor:pointer; font-size:18px; }
.composer button:disabled { background:#aaa; }

/* Forms */
.login-wrap { display:flex; align-items:center; justify-content:center; min-height:100vh; padding:20px; background:linear-gradient(135deg,#075e54,#128c7e); }
.login-box { background:#fff; padding:28px; border-radius:12px; width:100%; max-width:360px; box-shadow:0 10px 30px rgba(0,0,0,.2); }
.login-box h2 { text-align:center; margin-bottom:6px; color:#075e54; }
.login-box p { text-align:center; color:#888; margin-bottom:20px; font-size:13px; }
.form-group { margin-bottom:14px; }
.form-group label { display:block; font-size:12px; color:#555; margin-bottom:4px; font-weight:600; }
.form-group input, .form-group select, .form-group textarea {
  width:100%; padding:10px 12px; border:1px solid #ccc; border-radius:6px; font-size:14px; font-family:inherit;
}
.btn { display:inline-block; padding:10px 16px; border-radius:6px; border:0; cursor:pointer; font-size:14px; font-weight:600; text-decoration:none; }
.btn-primary { background:#075e54; color:#fff; width:100%; }
.btn-primary:hover { background:#054c44; }
.btn-sm { padding:6px 10px; font-size:12px; }
.btn-danger { background:#dc3545; color:#fff; }
.btn-success { background:#25d366; color:#fff; }
.btn-secondary { background:#6c757d; color:#fff; }

.card { background:#fff; margin:10px; padding:14px; border-radius:8px; box-shadow:0 1px 3px rgba(0,0,0,.08); }
.card h3 { color:#075e54; margin-bottom:10px; font-size:15px; }
table { width:100%; border-collapse:collapse; font-size:13px; }
table th, table td { padding:8px; border-bottom:1px solid #eee; text-align:left; }
table th { background:#f7f7f7; font-size:11px; color:#555; text-transform:uppercase; }
.empty { padding:40px 20px; text-align:center; color:#999; }
.notif-dot { position:absolute; top:8px; right:36px; background:#dc3545; color:#fff; font-size:10px; border-radius:50%; width:18px; height:18px; display:flex; align-items:center; justify-content:center; }
.role-badge { font-size:10px; padding:2px 6px; border-radius:8px; }
.role-super_admin { background:#d4edda; color:#155724; }
.role-supervisor { background:#fff3cd; color:#856404; }
.role-agent { background:#cce5ff; color:#004085; }

/* === SweetAlert modal — rapikan input/form di popup === */
.swal2-popup {
  border-radius: 16px !important;
  padding: 22px 18px !important;
  font-family: inherit !important;
  max-width: 92vw !important;
}
.swal2-title {
  font-size: 17px !important;
  color: #111827 !important;
  font-weight: 600 !important;
  padding: 0 0 12px !important;
  margin: 0 0 4px !important;
  border-bottom: 1px solid #f3f4f6 !important;
}
.swal2-html-container {
  padding: 8px 4px 0 !important;
  font-size: 13px !important;
  color: #374151 !important;
  text-align: left !important;
  line-height: 1.5 !important;
}
.swal2-input,
.swal2-textarea,
.swal2-select {
  width: 100% !important;
  padding: 10px 12px !important;
  border: 1px solid #d1d5db !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  font-family: inherit !important;
  background: #fff !important;
  color: #111827 !important;
  box-shadow: none !important;
  height: auto !important;
  margin: 4px 0 8px !important;
  transition: border-color .15s, box-shadow .15s !important;
}
.swal2-input:focus,
.swal2-textarea:focus,
.swal2-select:focus {
  outline: none !important;
  border-color: #075e54 !important;
  box-shadow: 0 0 0 3px rgba(7,94,84,.12) !important;
}
.swal2-textarea { min-height: 80px !important; resize: vertical !important; }
.swal2-input::placeholder, .swal2-textarea::placeholder { color: #9ca3af !important; }

.swal2-actions { gap: 8px !important; margin-top: 16px !important; flex-wrap: wrap !important; padding: 0 !important; }
.swal2-confirm {
  background: #075e54 !important;
  border-radius: 10px !important;
  padding: 10px 22px !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  box-shadow: 0 1px 3px rgba(7,94,84,.3) !important;
  transition: background .15s !important;
}
.swal2-confirm:hover { background: #054c44 !important; }
.swal2-cancel {
  background: #f3f4f6 !important;
  color: #374151 !important;
  border-radius: 10px !important;
  padding: 10px 22px !important;
  font-weight: 600 !important;
  font-size: 13px !important;
}
.swal2-cancel:hover { background: #e5e7eb !important; }
.swal2-deny {
  background: #25d366 !important;
  border-radius: 10px !important;
  padding: 10px 22px !important;
  font-weight: 600 !important;
  font-size: 13px !important;
}
.swal2-deny:hover { background: #1fb556 !important; }

.swal2-validation-message {
  background: #fee2e2 !important;
  color: #991b1b !important;
  border-radius: 8px !important;
  margin: 10px 0 0 !important;
  padding: 8px 12px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
}

/* Label di dalam swal modal */
.swal2-html-container label,
.swal2-html-container .lbl,
.swal2-html-container .lbl-form {
  display: block !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: #6b7280 !important;
  margin: 10px 0 4px !important;
  text-transform: uppercase !important;
  letter-spacing: .4px !important;
}
.swal2-html-container code {
  background: #f3f4f6 !important;
  padding: 1px 6px !important;
  border-radius: 4px !important;
  font-size: 11px !important;
}
/* File input rapi */
.swal2-html-container input[type="file"] {
  width: 100% !important;
  padding: 10px !important;
  border: 1px dashed #d1d5db !important;
  border-radius: 8px !important;
  background: #f9fafb !important;
  font-size: 12px !important;
  margin: 4px 0 8px !important;
}
.swal2-html-container input[type="color"] {
  width: 100% !important;
  height: 38px !important;
  border: 1px solid #d1d5db !important;
  border-radius: 8px !important;
  padding: 2px !important;
  cursor: pointer !important;
}
/* Checkbox lebih baik */
.swal2-html-container input[type="checkbox"] {
  width: 16px !important;
  height: 16px !important;
  margin-right: 6px !important;
  vertical-align: middle !important;
  accent-color: #075e54 !important;
}
/* Tombol biasa di dalam swal (mis. "Tambah Catatan") */
.swal2-html-container button:not(.swal2-confirm):not(.swal2-cancel):not(.swal2-deny) {
  background: #075e54;
  color: #fff;
  border: 0;
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s;
}
.swal2-html-container button:not(.swal2-confirm):not(.swal2-cancel):not(.swal2-deny):hover {
  background: #054c44;
}