/* ================================================================
   components.css — Card, Table, Badge, Button, Form, Modal, Toast
   nikahin.id Client Panel
   ================================================================ */

/* ── CARD ── */
.card{background:white;border:1px solid var(--border);margin-bottom:16px}
.card-header{padding:14px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.card-title{font-family:'Cormorant Garamond',serif;font-size:18px;font-weight:600}
.card-body{padding:20px}

/* ── BUTTONS ── */
.btn{padding:8px 16px;border:none;font-family:'Jost',sans-serif;font-size:10px;letter-spacing:2px;text-transform:uppercase;cursor:pointer;transition:all .2s;white-space:nowrap}
.btn-dark{background:var(--dark);color:white}.btn-dark:hover{background:var(--dark-2)}
.btn-gold{background:var(--gold);color:white}.btn-gold:hover{background:var(--gold-d)}
.btn-outline{background:transparent;border:1px solid var(--border);color:var(--muted)}.btn-outline:hover{border-color:var(--gold);color:var(--gold)}
.btn-danger{background:var(--red-bg);color:var(--red);border:1px solid var(--red-b)}.btn-danger:hover{background:var(--red);color:white}
.btn-green{background:var(--green-bg);color:var(--green);border:1px solid var(--green-b)}.btn-green:hover{background:var(--green);color:white}
.btn-wa{background:#25D366;color:white}.btn-wa:hover{background:#1da851}
.btn-sm{padding:5px 10px;font-size:9px;letter-spacing:1.5px}
.btn-xs{padding:3px 8px;font-size:9px;letter-spacing:1px}

/* ── FORM ── */
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
.fg label{display:block;font-size:9px;letter-spacing:2px;text-transform:uppercase;color:var(--muted);margin-bottom:6px;font-weight:500}
.fg input,.fg select,.fg textarea{width:100%;padding:10px 12px;border:1px solid var(--border);background:var(--cream);font-family:'Jost',sans-serif;font-size:13px;color:var(--dark);outline:none;transition:border-color .2s}
.fg input:focus,.fg select:focus,.fg textarea:focus{border-color:var(--gold);background:white}
.fg textarea{resize:vertical;min-height:80px;line-height:1.5}
.fg-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:4px}
.msg{padding:10px 14px;font-size:12px;margin-top:12px;display:none;line-height:1.5}
.msg.success{background:var(--green-bg);color:var(--green);border:1px solid var(--green-b)}
.msg.error{background:var(--red-bg);color:var(--red);border:1px solid var(--red-b)}

/* ── TABLE ── */
.table-scroll{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:12px;min-width:600px}
thead th{padding:10px 14px;text-align:left;font-size:8px;letter-spacing:2.5px;text-transform:uppercase;color:var(--muted-l);border-bottom:1px solid var(--border);background:var(--cream);font-weight:500;white-space:nowrap}
tbody tr{border-bottom:1px solid var(--border-s);transition:background .15s}
tbody tr:hover{background:rgba(201,169,110,0.03)}
tbody td{padding:11px 14px;vertical-align:middle}

/* ── BADGES ── */
.badge{display:inline-block;padding:2px 8px;font-size:9px;letter-spacing:1px;text-transform:uppercase;font-weight:500;border-radius:2px;white-space:nowrap}
.b-green{background:var(--green-bg);color:var(--green);border:1px solid var(--green-b)}
.b-red{background:var(--red-bg);color:var(--red);border:1px solid var(--red-b)}
.b-gold{background:rgba(201,169,110,0.12);color:var(--gold-d);border:1px solid var(--border)}
.b-grey{background:#F3F4F6;color:#6B7280;border:1px solid #E5E7EB}
.b-yellow{background:var(--yellow-bg);color:var(--yellow);border:1px solid var(--yellow-b)}

/* ── STATE ── */
.state-box{padding:48px;text-align:center;color:var(--muted-l);font-size:13px;font-weight:300}
.spinner{width:20px;height:20px;border:2px solid var(--border);border-top-color:var(--gold);border-radius:50%;animation:spin .8s linear infinite;margin:0 auto 10px}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── MODAL ── */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.5);display:none;align-items:center;justify-content:center;z-index:500;padding:20px;backdrop-filter:blur(3px)}
.modal-overlay.show{display:flex}
.modal-box{background:white;width:100%;max-width:480px;border:1px solid var(--border);animation:fadeUp .2s ease both;max-height:90vh;overflow-y:auto}
.modal-header{padding:18px 22px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
.modal-title{font-family:'Cormorant Garamond',serif;font-size:20px;font-weight:600}
.modal-body{padding:20px 22px}
.modal-footer{padding:0 22px 20px;display:flex;gap:10px}
.modal-footer .btn{flex:1;padding:11px}

/* ── LINK COPY ── */
.link-cell{display:flex;align-items:center;gap:6px;max-width:220px}
.link-text{font-family:monospace;font-size:10px;color:var(--muted-l);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.copy-btn{background:none;border:none;cursor:pointer;color:var(--gold);font-size:12px;padding:0;flex-shrink:0;transition:color .2s}
.copy-btn:hover{color:var(--gold-d)}

/* ── QR ── */
.qr-wrap{text-align:center;padding:20px 0}
.qr-wrap #qr-code{display:inline-block;padding:12px;background:white;border:1px solid var(--border)}
.qr-info{margin-top:12px;font-size:11px;color:var(--muted);letter-spacing:1px}

/* ── TOAST ── */
.toast{position:fixed;bottom:20px;right:20px;background:var(--dark);color:white;padding:10px 16px;font-size:12px;letter-spacing:1px;opacity:0;transform:translateY(8px);transition:all .25s;pointer-events:none;z-index:999;border-left:2px solid var(--gold)}
.toast.show{opacity:1;transform:none}

/* ── RESPONSIVE ── */
@media(max-width:768px){
  .form-row{grid-template-columns:1fr}
  .card-header{flex-direction:column;align-items:flex-start}
}