/* ============================================
   VALUEZ - Components CSS
   Reusable components: buttons, alerts, forms,
   metric-cards, tables, charts, badges
   ============================================ */

/* ==================== BUTTONS ==================== */
.btn-glow {
    padding:10px 24px; border:none; border-radius:12px;
    background:linear-gradient(135deg, var(--glow-blue), #0080cc);
    color:#fff; font-size:0.82rem; font-weight:600; cursor:pointer;
    transition:all 0.3s; box-shadow:0 4px 25px rgba(0,163,255,0.25);
    text-decoration:none; display:inline-block;
}
.btn-glow:hover { transform:translateY(-1px); box-shadow:0 6px 30px rgba(0,163,255,0.3); color:#fff; }

.btn-submit {
    width:100%; padding:15px; border:none; border-radius:14px;
    background:linear-gradient(135deg, var(--glow-blue), #0080cc);
    color:#fff; font-size:0.9rem; font-weight:600; cursor:pointer; transition:all 0.3s;
    box-shadow:0 4px 25px rgba(0,163,255,0.25);
    display:flex; align-items:center; justify-content:center; gap:10px;
}
.btn-submit:hover { transform:translateY(-2px); box-shadow:0 8px 35px rgba(0,163,255,0.35); }
.btn-submit:active { transform:translateY(0); }
.btn-submit:disabled { opacity:0.5; cursor:not-allowed; transform:none; }
.btn-submit svg { width:18px; height:18px; }

.btn-valuez {
    background:linear-gradient(135deg, var(--glow-blue), #0080cc);
    color:#fff; border:none; border-radius:12px;
    padding:10px 24px; font-weight:600; font-size:0.85rem;
    transition:all 0.3s; box-shadow:0 4px 20px rgba(0,163,255,0.2);
}
.btn-valuez:hover { transform:translateY(-1px); box-shadow:0 6px 25px rgba(0,163,255,0.3); color:#fff; }
.btn-valuez.btn-lg {
    width:100%; padding:15px; border-radius:14px; font-size:0.9rem;
    display:flex; align-items:center; justify-content:center; gap:10px;
    box-shadow:0 4px 25px rgba(0,163,255,0.25);
}
.btn-valuez.btn-lg:hover { transform:translateY(-2px); box-shadow:0 8px 35px rgba(0,163,255,0.35); }
.btn-valuez.btn-lg svg, .btn-valuez.btn-lg i[data-feather] { width:18px; height:18px; }

.btn-gold {
    background:linear-gradient(135deg, #f0a500, #d49000);
    color:#fff; border:none; border-radius:12px;
    padding:10px 24px; font-weight:600; font-size:0.85rem;
    transition:all 0.3s; box-shadow:0 4px 20px rgba(240,165,0,0.2);
}
.btn-gold:hover { transform:translateY(-1px); box-shadow:0 6px 25px rgba(240,165,0,0.3); color:#fff; }

.btn-back {
    display:inline-flex; align-items:center; gap:8px;
    color:var(--text-label); text-decoration:none; font-size:0.8rem; margin-bottom:24px;
    transition:color 0.3s;
}
.btn-back:hover { color:var(--glow-blue); }
.btn-back svg { width:16px; height:16px; }

/* ==================== ALERTS ==================== */
.alert-box {
    padding:12px 16px; border-radius:10px; font-size:0.78rem;
    margin-bottom:20px; display:flex; align-items:center; gap:10px;
}
.alert-error {
    background:rgba(233,69,96,0.08); border:1px solid rgba(233,69,96,0.2); color:#e94560;
}
.alert-success {
    background:rgba(0,255,198,0.06); border:1px solid rgba(0,255,198,0.15); color:#00FFC6;
}
.alert-warning {
    background:rgba(255,193,7,0.08); border:1px solid rgba(255,193,7,0.2); color:#ffc107;
}
.alert-info {
    background:rgba(0,163,255,0.06); border:1px solid rgba(0,163,255,0.12); color:#8EA3C7;
}

/* ==================== STATUS BAR ==================== */
.status-bar {
    padding:14px 20px; border-radius:12px; font-size:0.8rem;
    display:none; margin-bottom:24px; align-items:center; gap:10px;
}
.status-bar.active { display:flex; }
.status-processing {
    background:rgba(0,163,255,0.06); border:1px solid rgba(0,163,255,0.12); color:#8EA3C7;
}
.status-success {
    background:rgba(0,255,198,0.06); border:1px solid rgba(0,255,198,0.12); color:var(--glow-green);
}
.status-error {
    background:rgba(233,69,96,0.06); border:1px solid rgba(233,69,96,0.12); color:#e94560;
}

/* ==================== FORM FIELDS ==================== */
.field-group { margin-bottom:18px; }
.field-group label {
    display:block; font-size:0.65rem; font-weight:500;
    text-transform:uppercase; letter-spacing:0.8px;
    color:var(--text-label); margin-bottom:7px;
}
.field-group input,
.field-group select {
    width:100%; padding:11px 16px;
    background:rgba(5,8,22,0.5); border:1px solid rgba(0,163,255,0.08);
    border-radius:10px; color:#fff; font-size:0.85rem;
    outline:none; transition:all 0.3s;
}
.field-group input:focus,
.field-group select:focus {
    border-color:rgba(0,163,255,0.25); box-shadow:0 0 15px rgba(0,163,255,0.06);
}
.field-group select { cursor:pointer; }
.field-group select option { background:#0B1730; }
.field-group input:read-only { opacity:0.6; }

.field-row { display:grid; gap:16px; }
.field-row-2 { grid-template-columns:1fr 1fr; }
.field-row-3 { grid-template-columns:1fr 1fr 1fr; }
.field-row-4 { grid-template-columns:2fr 1fr 1fr 1fr; }
@media(max-width:768px) {
    .field-row-2, .field-row-3, .field-row-4 { grid-template-columns:1fr; }
}

/* Auth-style input group (login/register) */
.input-group { margin-bottom:20px; }
.input-group label {
    display:block; font-size:0.68rem; font-weight:500;
    text-transform:uppercase; letter-spacing:1px;
    color:#5F749B; margin-bottom:8px;
}
.input-group label .optional {
    font-weight:400; color:#3a4a6b; text-transform:none; letter-spacing:0;
}
.input-group input {
    width:100%; padding:13px 16px;
    background:rgba(5,8,22,0.6); border:1px solid rgba(0,163,255,0.08);
    border-radius:12px; color:#fff; font-size:0.88rem; font-weight:400;
    outline:none; transition:all 0.3s ease;
}
.input-group input::placeholder { color:#3a4a6b; }
.input-group input:focus {
    border-color:rgba(0,163,255,0.3);
    box-shadow:0 0 20px rgba(0,163,255,0.08), inset 0 0 20px rgba(0,163,255,0.02);
}

/* ==================== METRIC CARDS ==================== */
.metric-card {
    background:linear-gradient(145deg, var(--card-bg), var(--card-bg-2));
    border:1px solid rgba(0,163,255,0.06); border-radius:14px;
    padding:20px; transition:all 0.3s; position:relative; overflow:hidden;
}
.metric-card::before {
    content:''; position:absolute; top:0; left:0; right:0; height:1px;
    background:linear-gradient(90deg, transparent, rgba(0,163,255,0.15), transparent);
}
.metric-card:hover {
    border-color:rgba(0,163,255,0.12); box-shadow:0 4px 20px rgba(0,163,255,0.06);
    transform:translateY(-2px);
}
.metric-label {
    font-size:0.62rem; font-weight:600; text-transform:uppercase;
    letter-spacing:1px; color:var(--text-label); margin-bottom:8px;
}
.metric-value { font-size:1.25rem; font-weight:700; color:var(--text-primary); }
.metric-icon {
    width:40px; height:40px; border-radius:10px;
    display:flex; align-items:center; justify-content:center;
}

.metric-card.gold { border-color:rgba(240,165,0,0.15); }
.metric-card.gold::before { background:linear-gradient(90deg, transparent, rgba(240,165,0,0.2), transparent); }
.metric-card.gold:hover { border-color:rgba(240,165,0,0.25); box-shadow:0 4px 20px rgba(240,165,0,0.08); }

.metric-card.success { border-color:rgba(0,255,198,0.12); }
.metric-card.success::before { background:linear-gradient(90deg, transparent, rgba(0,255,198,0.15), transparent); }
.metric-card.success:hover { border-color:rgba(0,255,198,0.2); box-shadow:0 4px 20px rgba(0,255,198,0.06); }

.metric-card.danger { border-color:rgba(233,69,96,0.12); }
.metric-card.danger::before { background:linear-gradient(90deg, transparent, rgba(233,69,96,0.15), transparent); }
.metric-card.danger:hover { border-color:rgba(233,69,96,0.2); box-shadow:0 4px 20px rgba(233,69,96,0.06); }

/* ==================== TABLE CONTAINER ==================== */
.table-container {
    background:linear-gradient(145deg, var(--card-bg), var(--card-bg-2));
    border:1px solid rgba(0,163,255,0.06); border-radius:18px;
    padding:24px; position:relative; overflow:hidden; transition:all 0.3s;
}
.table-container::before {
    content:''; position:absolute; top:0; left:0; right:0; height:1px;
    background:linear-gradient(90deg, transparent, rgba(0,163,255,0.15), transparent);
}

/* ==================== CHART CONTAINER ==================== */
.chart-container {
    background:linear-gradient(145deg, var(--card-bg), var(--card-bg-2));
    border:1px solid rgba(0,163,255,0.06); border-radius:18px;
    padding:24px; position:relative; overflow:hidden;
}
.chart-container::before {
    content:''; position:absolute; top:0; left:0; right:0; height:1px;
    background:linear-gradient(90deg, transparent, rgba(0,163,255,0.15), transparent);
}

/* ==================== EMPTY STATE ==================== */
.empty-state { text-align:center; padding:80px 20px; }
.empty-state-icon {
    width:80px; height:80px; border-radius:20px;
    background:rgba(0,163,255,0.06); border:1px solid rgba(0,163,255,0.1);
    display:flex; align-items:center; justify-content:center;
    margin:0 auto 24px; color:var(--glow-blue);
}
.empty-state-icon svg { width:32px; height:32px; }

/* ==================== STATUS BADGE ==================== */
.status-badge {
    display:inline-flex; align-items:center; gap:6px;
    padding:6px 14px; border-radius:8px; font-size:0.72rem; font-weight:600;
}
.status-badge.ativa {
    background:rgba(0,255,198,0.08); color:#00FFC6; border:1px solid rgba(0,255,198,0.2);
}
.status-badge.inativa {
    background:rgba(233,69,96,0.08); color:#e94560; border:1px solid rgba(233,69,96,0.2);
}

/* ==================== SCORE BADGES ==================== */
.score-badge {
    display:inline-flex; padding:4px 14px; border-radius:8px;
    font-size:0.75rem; font-weight:700; letter-spacing:1px;
}
.score-badge.score-aaa { background:rgba(0,255,198,0.12); color:#00FFC6; border:1px solid rgba(0,255,198,0.2); }
.score-badge.score-aa { background:rgba(0,163,255,0.12); color:#00A3FF; border:1px solid rgba(0,163,255,0.2); }
.score-badge.score-a { background:rgba(0,225,255,0.12); color:#00E1FF; border:1px solid rgba(0,225,255,0.2); }
.score-badge.score-bbb { background:rgba(255,193,7,0.12); color:#ffc107; border:1px solid rgba(255,193,7,0.2); }
.score-badge.score-bb { background:rgba(255,152,0,0.12); color:#ff9800; border:1px solid rgba(255,152,0,0.2); }
.score-badge.score-b { background:rgba(233,69,96,0.12); color:#e94560; border:1px solid rgba(233,69,96,0.2); }
.score-badge.score-c { background:rgba(233,69,96,0.15); color:#ff4757; border:1px solid rgba(233,69,96,0.25); }

/* ==================== RISK METER ==================== */
.risk-meter { height:6px; border-radius:3px; background:rgba(0,163,255,0.06); overflow:hidden; }
.risk-meter .fill { height:100%; border-radius:3px; transition:width 0.6s ease; }
.risk-low .fill { background:linear-gradient(90deg, var(--glow-green), var(--glow-cyan)); }
.risk-medium .fill { background:linear-gradient(90deg, #ffc107, #ff9800); }
.risk-high .fill { background:linear-gradient(90deg, #e94560, #ff4757); }

/* ==================== LOADING ==================== */
.loading-indicator { display:none; text-align:center; padding:30px; }
.loading-indicator.active { display:block; }
.spinner {
    width:40px; height:40px;
    border:3px solid rgba(0,163,255,0.15);
    border-top-color:#00A3FF; border-radius:50%;
    animation:spin 0.8s linear infinite;
    margin:0 auto 16px;
}
@keyframes spin { to { transform:rotate(360deg); } }
.loading-text { font-size:0.82rem; color:#8EA3C7; }
.spinner-sm {
    width:16px; height:16px;
    border:2px solid rgba(0,163,255,0.15);
    border-top-color:#00A3FF; border-radius:50%;
    animation:spin 0.8s linear infinite;
}

/* ==================== AI LOADING ==================== */
.ai-loading { text-align:center; padding:40px; }

/* ==================== FORM STYLES (Bootstrap overrides) ==================== */
.form-control, .form-select {
    background:rgba(5,8,22,0.5); border:1px solid rgba(0,163,255,0.08);
    color:#fff; border-radius:10px; transition:all 0.3s;
}
.form-control:focus, .form-select:focus {
    background:rgba(5,8,22,0.6); border-color:rgba(0,163,255,0.25);
    box-shadow:0 0 15px rgba(0,163,255,0.06); color:#fff;
}
.form-control::placeholder { color:#3a4a6b; }
.form-label { color:var(--text-label); }
.form-select option { background:#0B1730; }

/* Money input */
.money-input { font-variant-numeric:tabular-nums; }

/* ==================== LIGHT MODE OVERRIDES ==================== */
body.light-mode .btn-glow { background:linear-gradient(135deg, #0070E0, #005bb5); box-shadow:0 4px 15px rgba(0,112,224,0.2); }
body.light-mode .metric-card { background:#fff; border-color:#E2E8F0; }
body.light-mode .metric-card::before { background:linear-gradient(90deg, transparent, rgba(0,112,224,0.1), transparent); }
body.light-mode .metric-card:hover { border-color:rgba(0,112,224,0.2); box-shadow:0 4px 15px rgba(0,112,224,0.05); }
body.light-mode .table-container { background:#fff; border-color:#E2E8F0; }
body.light-mode .chart-container { background:#fff; border-color:#E2E8F0; }
body.light-mode .form-control, body.light-mode .form-select {
    background:#F0F2F5; border-color:#E2E8F0; color:#1A1F36;
}
body.light-mode .form-control:focus, body.light-mode .form-select:focus {
    background:#fff; border-color:rgba(0,112,224,0.25);
    box-shadow:0 0 10px rgba(0,112,224,0.05); color:#1A1F36;
}
body.light-mode .form-control::placeholder { color:#A0AEC0; }
body.light-mode .field-group input, body.light-mode .field-group select {
    background:#F0F2F5; border-color:#E2E8F0; color:#1A1F36;
}