/* WebSerbaguna - Global Styles (Responsif) */
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif; background:#f0f2f5; color:#333; font-size:14px; }
a { text-decoration:none; color:#4a6cf7; }
h1,h2,h3 { color:#1f2937; }

/* Auth */
.auth-wrap { min-height:100vh; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,#4a6cf7 0%,#6d28d9 100%); padding:20px; }
.auth-card { background:#fff; border-radius:14px; padding:30px; width:100%; max-width:400px; box-shadow:0 15px 50px rgba(0,0,0,.2); }
.auth-card h1 { text-align:center; margin-bottom:5px; font-size:24px; }
.auth-card .sub { text-align:center; color:#6b7280; margin-bottom:22px; }
.form-group { margin-bottom:15px; }
.form-group label { display:block; font-weight:600; margin-bottom:6px; color:#374151; font-size:13px; }
.form-group input,.form-group select,.form-group textarea { width:100%; padding:11px 13px; border:1px solid #d1d5db; border-radius:8px; font-size:14px; transition:border .2s; }
.form-group input:focus,.form-group select:focus,.form-group textarea:focus { outline:none; border-color:#4a6cf7; box-shadow:0 0 0 3px rgba(74,108,247,.15); }
.btn { display:inline-block; padding:10px 16px; border:none; border-radius:8px; font-weight:600; font-size:14px; cursor:pointer; transition:all .2s; text-align:center; }
.btn-primary { background:#4a6cf7; color:#fff; }
.btn-primary:hover { background:#3b5bd9; }
.btn-success { background:#22c55e; color:#fff; }
.btn-danger { background:#ef4444; color:#fff; }
.btn-warning { background:#f59e0b; color:#fff; }
.btn-secondary { background:#6b7280; color:#fff; }
.btn-block { width:100%; }
.btn-sm { padding:6px 11px; font-size:12px; }
.alert { padding:11px 14px; border-radius:8px; margin-bottom:14px; font-size:13px; }
.alert-error { background:#fee2e2; color:#991b1b; border:1px solid #fca5a5; }
.alert-success { background:#dcfce7; color:#166534; border:1px solid #86efac; }
.alert-info { background:#dbeafe; color:#1e40af; border:1px solid #93c5fd; }
.alert-warning { background:#fef3c7; color:#92400e; border:1px solid #fcd34d; }
.auth-foot { text-align:center; margin-top:16px; color:#6b7280; font-size:13px; }

/* Layout */
.topbar { background:#1f2937; color:#fff; padding:0 16px; height:56px; display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; z-index:100; }
.topbar .brand { font-weight:700; font-size:17px; color:#fff; }
.topbar .user-area { display:flex; align-items:center; gap:10px; font-size:13px; flex-wrap:wrap; }
.topbar a { color:#cbd5e1; }
.hamburger { display:none; background:none; border:none; color:#fff; font-size:24px; cursor:pointer; }
.layout { display:flex; min-height:calc(100vh - 56px); }
.sidebar { width:240px; background:#111827; color:#cbd5e1; padding:12px 0; flex-shrink:0; }
.sidebar a { display:block; padding:10px 18px; color:#cbd5e1; font-size:13px; border-left:3px solid transparent; }
.sidebar a:hover,.sidebar a.active { background:#1f2937; color:#fff; border-left-color:#4a6cf7; }
.sidebar .section { padding:12px 18px 4px; font-size:11px; text-transform:uppercase; color:#6b7280; letter-spacing:1px; }
.main { flex:1; padding:18px; min-width:0; }
.card { background:#fff; border-radius:12px; padding:18px; box-shadow:0 1px 3px rgba(0,0,0,.08); margin-bottom:18px; }
.card h2 { margin-bottom:12px; font-size:17px; }
.grid { display:grid; gap:14px; }
.grid-3 { grid-template-columns:repeat(3,1fr); }
.grid-4 { grid-template-columns:repeat(4,1fr); }
.grid-2 { grid-template-columns:repeat(2,1fr); }
.stat-card { background:#fff; border-radius:12px; padding:16px; box-shadow:0 1px 3px rgba(0,0,0,.08); }
.stat-card .num { font-size:24px; font-weight:700; color:#4a6cf7; word-break:break-word; }
.stat-card .lbl { color:#6b7280; font-size:12px; }

/* Table */
.table-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }
table { width:100%; border-collapse:collapse; min-width:600px; }
table th,table td { padding:9px 10px; text-align:left; border-bottom:1px solid #e5e7eb; font-size:13px; }
table th { background:#f9fafb; color:#374151; font-weight:600; white-space:nowrap; }
table tr:hover td { background:#f9fafb; }

.badge { display:inline-block; padding:3px 10px; border-radius:20px; font-size:12px; font-weight:600; white-space:nowrap; }
.badge-success { background:#dcfce7; color:#166534; }
.badge-danger { background:#fee2e2; color:#991b1b; }
.badge-warning { background:#fef3c7; color:#92400e; }
.badge-info { background:#dbeafe; color:#1e40af; }
.mt { margin-top:14px; }
.mb { margin-bottom:14px; }
.muted { color:#6b7280; }
pre.resp { background:#0f172a; color:#e2e8f0; padding:12px; border-radius:8px; font-size:12px; overflow-x:auto; max-height:300px; }

/* Responsive: mobile */
.sidebar-overlay { display:none; position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,.5); z-index:98; }
.sidebar-overlay.show { display:block; }

@media (max-width:768px){
  .hamburger { display:block; }
  .layout { position:relative; }
  .sidebar { position:fixed; left:-260px; top:56px; bottom:0; width:240px; z-index:99; transition:left .25s ease; }
  .sidebar.open { left:0; }
  .main { padding:14px; width:100%; }
  .grid-3,.grid-4,.grid-2 { grid-template-columns:1fr; }
  .topbar .user-area span:first-of-type { display:none; }
  .auth-card { padding:24px; }
}

/* ===== Tabel member/admin: gaya + responsif (kartu di layar kecil) ===== */
.table-wrap .table-member{border-radius:12px;overflow:hidden;box-shadow:0 1px 3px rgba(0,0,0,.08);min-width:760px}
.table-member thead th{background:linear-gradient(135deg,#4a6cf7,#6d28d9);color:#fff;border:none;padding:11px 12px;font-weight:600}
.table-member tbody tr:nth-child(even){background:#f8fafc}
.table-member tbody tr:hover{background:#eef2ff}
.table-member td{vertical-align:middle;padding:10px 12px}
.table-member td img{width:32px;height:32px;border-radius:50%;object-fit:cover;vertical-align:middle;margin-right:8px}
@media(max-width:768px){
.table-wrap .table-member{min-width:0;border-radius:0;box-shadow:none;overflow:visible}
.table-member thead{display:none}
.table-member,.table-member tbody,.table-member tr,.table-member td{display:block;width:100%}
.table-member tr{border:1px solid #e5e7eb;border-radius:12px;margin-bottom:12px;padding:8px 14px;box-shadow:0 1px 3px rgba(0,0,0,.06);background:#fff}
.table-member tbody tr:nth-child(even){background:#fff}
.table-member tbody tr:hover{background:#fff}
.table-member td{display:flex;justify-content:space-between;align-items:center;gap:10px;border-bottom:1px dashed #eef0f3;padding:8px 0;flex-wrap:wrap}
.table-member td::before{content:attr(data-label);font-weight:700;color:#6b7280;font-size:11px;text-transform:uppercase;letter-spacing:.4px;flex-shrink:0}
.table-member td[data-label="Aksi"]{flex-direction:column;align-items:stretch}
.table-member td[data-label="Aksi"]::before{display:block;margin-bottom:4px}
.table-member td[data-label="Aksi"] .btn{width:100%;text-align:center}
.table-member td[data-label="Aksi"] form,.table-member td[data-label="Aksi"] div[id]{width:100%}
.table-member td:last-child{border-bottom:none}
}

/* ===== AI Agent: chat & progress ===== */
.agent-msg{margin-bottom:12px;padding:10px 14px;border-radius:12px;max-width:85%;font-size:13.5px;line-height:1.55;white-space:pre-wrap;word-break:break-word}
.agent-msg.user{background:#eef2ff;margin-left:auto}
.agent-msg.assistant{background:#f1f5f9}
.agent-step{padding:8px 12px;border-radius:10px;margin:6px 0;font-size:13px;background:#f8fafc;border-left:4px solid #4a6cf7;white-space:pre-wrap;word-break:break-word}
.agent-step.tool{background:#fff7ed;border-left-color:#f59e0b}
.agent-step.persetujuan{background:#fef3c7;border-left-color:#f59e0b}
.agent-step.selesai{background:#dcfce7;border-left-color:#22c55e}
.agent-step.info{background:#eff6ff;border-left-color:#4a6cf7}
.agent-step pre{background:#0f172a;color:#e2e8f0;padding:8px;border-radius:6px;font-size:11.5px;overflow-x:auto;max-height:220px;margin-top:6px;white-space:pre-wrap}
.agent-step button{margin-right:6px}
.chatbox{max-height:460px;overflow-y:auto;padding:4px 2px}
.conv-link{display:inline-block;margin:3px;padding:6px 10px;border-radius:20px;background:#eef2ff;font-size:12px;color:#4a6cf7}
.conv-link.active{background:#4a6cf7;color:#fff}
.spin{display:inline-block;width:12px;height:12px;border:2px solid #4a6cf7;border-top-color:transparent;border-radius:50%;animation:agspin 1s linear infinite;vertical-align:-2px}
@keyframes agspin{to{transform:rotate(360deg)}}