/* ============================================================
   DigiChat — CSS Principal
   ============================================================ */

:root {
    --primary:   #7C3AED;
    --primary-d: #5B21B6;
    --primary-l: #EDE9FE;
    --accent:    #EC4899;
    --surface:   #F9FAFB;
    --card-bg:   #FFFFFF;
    --text:      #111827;
    --text-muted:#6B7280;
    --border:    #E5E7EB;
    --radius:    12px;
    --shadow:    0 2px 8px rgba(0,0,0,.08);
    --shadow-lg: 0 8px 32px rgba(124,58,237,.15);
}

/* Sobrescreve cor primária do Bootstrap */
.bg-primary   { background-color: var(--primary) !important; }
.btn-primary  { background-color: var(--primary); border-color: var(--primary); }
.btn-primary:hover { background-color: var(--primary-d); border-color: var(--primary-d); }
.text-primary { color: var(--primary) !important; }
.border-primary { border-color: var(--primary) !important; }
a { color: var(--primary); }

/* ---- Body ---- */
body { font-family: 'Segoe UI', system-ui, sans-serif; color: var(--text); background: var(--surface); }

/* ---- Cards de mensagem ---- */
.msg-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem 1.25rem;
    transition: box-shadow .2s, transform .15s;
    cursor: default;
}
.msg-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.msg-card .msg-text { font-size: 1rem; line-height: 1.55; color: var(--text); }
.msg-card .msg-meta { font-size: .78rem; color: var(--text-muted); margin-top: .5rem; }

.msg-card .badge-tone {
    font-size: .7rem; font-weight: 600; padding: .25em .6em; border-radius: 99px;
    background: var(--primary-l); color: var(--primary);
}
.msg-card .badge-stage {
    font-size: .7rem; font-weight: 600; padding: .25em .6em; border-radius: 99px;
    background: #FEF3C7; color: #92400E;
}
.msg-card .badge-premium {
    font-size: .7rem; font-weight: 700; padding: .25em .6em; border-radius: 99px;
    background: linear-gradient(135deg, #FBBF24, #F59E0B); color: #1C1917;
}

/* ---- Botão copiar ---- */
.btn-copy {
    font-size: .8rem; padding: .3rem .8rem;
    border-radius: 8px; transition: all .2s;
}
.btn-copy.copied { background: #10B981; border-color: #10B981; color: #fff; }

/* ---- Botão favoritar ---- */
.btn-fav { font-size: .9rem; color: var(--text-muted); background: transparent; border: none; padding: .25rem .5rem; }
.btn-fav.active, .btn-fav:hover { color: var(--accent); }

/* ---- Filtros ---- */
.filter-bar { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem; margin-bottom: 1.5rem; }

/* ---- Status badges ---- */
.badge-active   { background:#D1FAE5; color:#065F46; }
.badge-inactive { background:#FEE2E2; color:#991B1B; }
.badge-expired  { background:#FEF3C7; color:#92400E; }
.badge-pending  { background:#DBEAFE; color:#1E40AF; }
.badge-cancelled{ background:#F3F4F6; color:#374151; }
.badge-refunded { background:#FCE7F3; color:#9D174D; }

/* ---- Sidebar Admin ---- */
.sidebar {
    width: 240px; min-height: 100vh; transition: width .25s;
    position: sticky; top: 0; height: 100vh; overflow-y: auto; flex-shrink: 0;
}
.sidebar.collapsed { width: 60px; }
.sidebar.collapsed .sidebar-link span,
.sidebar.collapsed .sidebar-label { display: none; }
.sidebar-link {
    display: flex; align-items: center; gap: .6rem;
    color: #CBD5E1; text-decoration: none;
    padding: .5rem .75rem; border-radius: 8px; font-size: .9rem;
    transition: background .15s, color .15s;
}
.sidebar-link:hover, .sidebar-link.active { background: rgba(255,255,255,.1); color: #fff; }
.sidebar-label {
    font-size: .65rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .08em; color: #64748B;
    padding: .75rem .75rem .25rem;
}
.admin-topbar { position: sticky; top: 0; z-index: 10; }
.admin-content { min-height: 100vh; background: var(--surface); }

/* ---- Stat cards (admin) ---- */
.stat-card {
    background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius);
    padding: 1.25rem; display: flex; align-items: center; gap: 1rem;
}
.stat-card .stat-icon {
    width: 48px; height: 48px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.4rem;
}
.stat-card .stat-value { font-size: 1.6rem; font-weight: 700; line-height: 1; }
.stat-card .stat-label { font-size: .8rem; color: var(--text-muted); }

/* ---- Dashboard usuário ---- */
.access-card {
    background: linear-gradient(135deg, var(--primary), var(--accent));
    color: #fff; border-radius: var(--radius); padding: 1.5rem;
}
.access-card .access-label { font-size: .8rem; opacity: .8; }
.access-card .access-status { font-size: 1.2rem; font-weight: 700; }

/* ---- Paginação ---- */
.page-link { color: var(--primary); }
.page-item.active .page-link { background-color: var(--primary); border-color: var(--primary); }

/* ---- Alerts ---- */
.alert { border-radius: var(--radius); border: none; }

/* ---- Forms ---- */
.form-control:focus, .form-select:focus {
    border-color: var(--primary); box-shadow: 0 0 0 .2rem rgba(124,58,237,.15);
}

/* ---- Responsivo ---- */
@media (max-width: 768px) {
    .sidebar { display: none; }
    .sidebar.mobile-open { display: flex; position: fixed; z-index: 1050; }
    #admin-wrapper { flex-direction: column; }
}