/* Hub Estrela do Lar - estilos complementares ao Tailwind */

:root {
    --brand-500: #ff5b00;
    --brand-600: #e64f00;
}

html { scroll-behavior: smooth; }

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

/* Scrollbar customizada */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
.dark-scroll::-webkit-scrollbar-thumb { background: #334155; }
.dark-scroll::-webkit-scrollbar-thumb:hover { background: #475569; }

/* Cards */
.card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
    padding: 1.25rem;
    box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}
.card-title { font-weight: 600; color: #0f172a; font-size: 0.95rem; }
.card-subtitle { color: #64748b; font-size: 0.8rem; margin-top: 0.125rem; }

/* Badges */
.badge { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.15rem 0.55rem; font-size: 0.72rem; font-weight: 600; border-radius: 9999px; }
.badge-success { background: #dcfce7; color: #15803d; }
.badge-warning { background: #fef3c7; color: #b45309; }
.badge-danger  { background: #fee2e2; color: #b91c1c; }
.badge-info    { background: #e0f2fe; color: #075985; }
.badge-brand   { background: #ffe5d3; color: #b73e00; }
.badge-muted   { background: #f1f5f9; color: #475569; }

/* Tables */
.table-hub { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.table-hub thead th {
    text-align: left; padding: 0.6rem 0.75rem; font-weight: 600; color: #475569;
    background: #f8fafc; border-bottom: 1px solid #e2e8f0; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em;
}
.table-hub tbody td { padding: 0.65rem 0.75rem; border-bottom: 1px solid #f1f5f9; color: #1e293b; vertical-align: middle; }
.table-hub tbody tr:hover { background: #f8fafc; }
.table-hub tbody tr:last-child td { border-bottom: 0; }

.table-hub thead th.th-sort { white-space: nowrap; vertical-align: middle; }
.table-hub thead th.th-sort a {
    color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 0.2rem;
    font-weight: 600;
}
.table-hub thead th.th-sort a:hover { color: #0f172a; }
.table-hub thead th.th-sort .sort-ind { font-size: 0.65rem; opacity: 0.4; font-weight: 400; }
.table-hub thead th.th-sort.is-active a { color: #0f172a; }
.table-hub thead th.th-sort.is-active .sort-ind { opacity: 1; color: var(--brand-500); }
.table-hub thead th.text-right.th-sort a { width: 100%; justify-content: flex-end; }

/* Botões */
.btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; border-radius: 0.5rem; font-size: 0.875rem; font-weight: 500; transition: all 0.15s; cursor: pointer; border: 1px solid transparent; }
.btn-primary { background: var(--brand-500); color: #fff; }
.btn-primary:hover { background: var(--brand-600); }
.btn-secondary { background: #fff; color: #334155; border-color: #cbd5e1; }
.btn-secondary:hover { background: #f8fafc; }
.btn-danger { background: #e11d48; color: #fff; }
.btn-danger:hover { background: #be123c; }
.btn-ghost { background: transparent; color: #334155; }
.btn-ghost:hover { background: #f1f5f9; }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; }

/* Form inputs padrão */
.input, .select, .textarea {
    width: 100%; padding: 0.55rem 0.75rem; border: 1px solid #cbd5e1; border-radius: 0.5rem;
    font-size: 0.875rem; color: #0f172a; background: #fff; outline: none; transition: border-color 0.15s, box-shadow 0.15s;
}
.input:focus, .select:focus, .textarea:focus { border-color: var(--brand-500); box-shadow: 0 0 0 3px rgba(255,91,0,0.15); }
.form-label { display: block; font-size: 0.8rem; font-weight: 500; color: #334155; margin-bottom: 0.35rem; }
.form-help  { font-size: 0.75rem; color: #64748b; margin-top: 0.25rem; }

/* Stat cards */
.stat-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 0.75rem; padding: 1.25rem; transition: transform 0.15s, box-shadow 0.15s; }
.stat-card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(15,23,42,0.08); }
.stat-label { font-size: 0.75rem; color: #64748b; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; }
.stat-value { font-size: 1.75rem; font-weight: 700; color: #0f172a; margin-top: 0.25rem; line-height: 1.2; }
.stat-trend { font-size: 0.75rem; margin-top: 0.4rem; }
.stat-trend.up { color: #059669; }
.stat-trend.down { color: #dc2626; }

/* Loading spinner */
@keyframes hub-spin { to { transform: rotate(360deg); } }
.spinner { width: 1.25rem; height: 1.25rem; border-radius: 50%; border: 2px solid #e2e8f0; border-top-color: var(--brand-500); animation: hub-spin 0.7s linear infinite; display: inline-block; }

/* Chip marketplace */
.chip-mp { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.25rem 0.6rem; border-radius: 9999px; font-size: 0.7rem; font-weight: 600; }
.chip-mp .dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; }

/* Empty state */
.empty-state { text-align: center; padding: 3rem 1rem; color: #64748b; }
.empty-state svg { width: 3rem; height: 3rem; margin: 0 auto 1rem; color: #cbd5e1; }
.empty-state h3 { font-size: 1rem; font-weight: 600; color: #334155; margin-bottom: 0.25rem; }

/* Page header */
.page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.page-header h2 { font-size: 1.375rem; font-weight: 700; color: #0f172a; }
.page-header p { color: #64748b; font-size: 0.875rem; margin-top: 0.15rem; }

/* Responsivo */
@media (max-width: 1023px) {
    #sidebar.translate-x-0 { box-shadow: 0 0 60px rgba(0,0,0,0.4); }
}