/* One Way Blasting — custom styles on top of Tailwind CDN */

html, body { font-family: 'Inter', ui-sans-serif, system-ui, sans-serif; }

.btn {
    display: inline-flex; align-items: center; justify-content: center;
    gap: .5rem; padding: .5rem 1rem; border-radius: .5rem;
    font-weight: 500; font-size: .875rem; transition: all .15s;
    border: 1px solid transparent; cursor: pointer;
}
.btn-primary  { background:#4f46e5; color:#fff; }
.btn-primary:hover  { background:#4338ca; }
.btn-secondary { background:#fff; color:#334155; border-color:#e2e8f0; }
.btn-secondary:hover { background:#f8fafc; }
.btn-danger   { background:#dc2626; color:#fff; }
.btn-danger:hover   { background:#b91c1c; }
.btn-success  { background:#059669; color:#fff; }
.btn-success:hover  { background:#047857; }
.btn:disabled { opacity:.5; cursor:not-allowed; }
.btn-sm { padding:.35rem .75rem; font-size:.8125rem; }

.card { background:#fff; border:1px solid #e2e8f0; border-radius:.75rem; }
.card-head { padding:1rem 1.25rem; border-bottom:1px solid #e2e8f0; font-weight:600; color:#0f172a; }
.card-body { padding:1.25rem; }

.form-label { display:block; font-size:.875rem; font-weight:500; color:#334155; margin-bottom:.375rem; }
.form-input, .form-select, .form-textarea {
    width:100%; padding:.5rem .75rem; font-size:.875rem;
    border:1px solid #cbd5e1; border-radius:.5rem; background:#fff; color:#0f172a;
    transition: border-color .15s, box-shadow .15s;
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
    outline:none; border-color:#6366f1; box-shadow: 0 0 0 3px rgba(99,102,241,.15);
}
.form-help  { font-size:.75rem; color:#64748b; margin-top:.25rem; }
.form-error { font-size:.75rem; color:#dc2626; margin-top:.25rem; }

.table { width:100%; border-collapse:collapse; font-size:.875rem; }
.table th { text-align:left; font-weight:600; color:#475569; padding:.75rem 1rem; background:#f8fafc; border-bottom:1px solid #e2e8f0; }
.table td { padding:.875rem 1rem; border-bottom:1px solid #f1f5f9; color:#334155; }
.table tr:hover td { background:#fafbfc; }

.stat {
    background:#fff; border:1px solid #e2e8f0; border-radius:.75rem;
    padding:1.25rem; display:flex; align-items:center; gap:1rem;
}
.stat-icon { width:3rem; height:3rem; border-radius:.75rem; display:flex; align-items:center; justify-content:center; }
.stat-value { font-size:1.75rem; font-weight:700; color:#0f172a; line-height:1; }
.stat-label { font-size:.8125rem; color:#64748b; margin-top:.25rem; }

/* WhatsApp editor */
.wa-editor { border:1px solid #cbd5e1; border-radius:.5rem; overflow:hidden; }
.wa-toolbar { display:flex; gap:.25rem; padding:.5rem; background:#f8fafc; border-bottom:1px solid #e2e8f0; }
.wa-toolbar button {
    padding:.375rem .625rem; font-size:.8125rem; background:#fff;
    border:1px solid #e2e8f0; border-radius:.375rem; cursor:pointer;
    font-weight:500; color:#475569;
}
.wa-toolbar button:hover { background:#eef2ff; color:#4f46e5; border-color:#c7d2fe; }
.wa-textarea { width:100%; padding:.75rem; font-family: 'Inter', monospace; font-size:.875rem; min-height:160px; border:0; outline:0; resize: vertical; }
.wa-preview {
    padding:.75rem 1rem; border-top:1px solid #e2e8f0; background:#e5ddd5;
    font-size:.875rem; min-height:80px; position:relative;
}
.wa-preview::before { content:'Preview'; position:absolute; top:.25rem; right:.5rem; font-size:.625rem; color:#64748b; letter-spacing:.1em; }
.wa-preview-bubble {
    background:#dcf8c6; padding:.625rem .875rem; border-radius:.75rem;
    display:inline-block; max-width:90%; white-space:pre-wrap; word-break:break-word;
    box-shadow: 0 1px 2px rgba(0,0,0,.08); color:#111;
}
.wa-preview-bubble strong { font-weight:700; }
.wa-preview-bubble em { font-style: italic; }
.wa-preview-bubble del { text-decoration: line-through; opacity:.7; }
.wa-preview-bubble code { background:rgba(0,0,0,.08); padding:.1rem .3rem; border-radius:.25rem; font-family: ui-monospace, monospace; font-size:.8125rem; }

.counter-valid   { color:#059669; }
.counter-invalid { color:#dc2626; }

.drop-zone {
    border:2px dashed #cbd5e1; border-radius:.75rem; padding:1.5rem;
    text-align:center; cursor:pointer; background:#f8fafc; transition: all .15s;
}
.drop-zone:hover, .drop-zone.dragover { border-color:#6366f1; background:#eef2ff; }

details > summary::-webkit-details-marker { display:none; }
details > summary { list-style:none; }