/* ═══════════════════════════════════════════════════
   VVAuthTool — Shared Component Styles
   Requires: theme.css (provides --t-* CSS variables)
   Designed to be used by ALL layouts and pages.
   ═══════════════════════════════════════════════════ */

/* ── Typography ─────────────────────────────── */
body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; background: var(--t-bg); color: var(--t-text); -webkit-font-smoothing: antialiased; }
::selection { background: var(--t-accent); color: white; }
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--t-scrollbar-track); }
::-webkit-scrollbar-thumb { background: var(--t-scrollbar-thumb); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--t-accent); }

/* ── Links ──────────────────────────────────── */
a { color: var(--t-link); transition: color 0.2s; }
a:hover { color: var(--t-link-hover); }

/* ═══════════════════════════════════════════════════
   CARDS
   ═══════════════════════════════════════════════════ */
.card, .d-card {
    background: var(--t-glass-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--t-glass-border);
    border-radius: 12px;
    color: var(--t-text);
    box-shadow: var(--t-shadow);
}
.card-header, .d-card-header {
    background: var(--t-th-bg);
    border-bottom: 1px solid var(--t-glass-border);
    font-weight: 600;
    color: var(--t-text);
    padding: 1rem 1.5rem;
}
.card-body, .d-card-body { padding: 1.5rem; color: var(--t-text); }

/* Stat Cards */
.stat-card {
    background: var(--t-glass-bg);
    backdrop-filter: blur(12px);
    border: 1px solid var(--t-glass-border);
    border-radius: 12px;
    padding: 1.25rem;
    transition: all 0.3s ease;
}
.stat-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.2);
    border-color: rgba(124,58,237,0.2);
}
[data-theme="light"] .stat-card:hover {
    box-shadow: 0 4px 16px rgba(245,124,0,0.1);
    border-color: rgba(245,124,0,0.2);
}
.stat-card .stat-icon {
    width: 48px; height: 48px;
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.25rem; color: white;
}
.stat-card .stat-value { font-size: 1.5rem; font-weight: 800; color: var(--t-text); }
.stat-card .stat-label { font-size: 0.8rem; color: var(--t-muted); font-weight: 500; }

/* Gradient icon backgrounds */
.bg-gradient-purple { background: linear-gradient(135deg, #7c3aed, #a78bfa); }
.bg-gradient-cyan { background: linear-gradient(135deg, #06b6d4, #67e8f9); }
.bg-gradient-amber { background: linear-gradient(135deg, #f59e0b, #fbbf24); }
.bg-gradient-pink { background: linear-gradient(135deg, #ec4899, #f472b6); }
.bg-gradient-green { background: linear-gradient(135deg, #10b981, #34d399); }
.bg-gradient-red { background: linear-gradient(135deg, #ef4444, #f87171); }
[data-theme="light"] .bg-gradient-purple { background: linear-gradient(135deg, #f57c00, #ff9800); }
[data-theme="light"] .bg-gradient-cyan { background: linear-gradient(135deg, #ff9800, #ffb74d); }
[data-theme="light"] .bg-gradient-amber { background: linear-gradient(135deg, #f59e0b, #fbbf24); }
[data-theme="light"] .bg-gradient-pink { background: linear-gradient(135deg, #ec4899, #f472b6); }
[data-theme="light"] .bg-gradient-green { background: linear-gradient(135deg, #2e7d32, #4caf50); }

/* ── Card Banner (welcome) ──────────────────── */
.banner-card {
    background: var(--t-banner);
    border: 1px solid var(--t-glass-border);
    border-radius: 16px;
    padding: 1.75rem 2rem;
    margin-bottom: 1.5rem;
}
.banner-card h2 { font-size: 1.3rem; font-weight: 800; margin-bottom: 0.35rem; }
.banner-card p { color: var(--t-text2); font-size: 0.9rem; margin: 0; }

/* ═══════════════════════════════════════════════════
   TABLES
   ═══════════════════════════════════════════════════ */
.table-custom, .table { color: var(--t-text); --bs-table-bg: transparent !important; }
.table > :not(caption) > * > * { background-color: transparent !important; color: var(--t-text); border-bottom-color: var(--t-td-border) !important; }
.table thead th {
    background: var(--t-th-bg) !important;
    color: var(--t-text2);
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid var(--t-glass-border) !important;
    padding: 0.875rem 1rem;
}
.table tbody td { padding: 0.875rem 1rem; border-bottom: 1px solid var(--t-td-border) !important; vertical-align: middle; }
.table tbody tr { transition: background 0.15s; }
.table tbody tr:hover { background: var(--t-hover-bg) !important; }
.table tbody tr:hover td { background-color: transparent !important; }
.table tbody tr:last-child td { border-bottom: none !important; }
.table-striped > tbody > tr:nth-of-type(odd) > * { --bs-table-bg-type: transparent !important; }
.table-hover > tbody > tr:hover > * { --bs-table-bg-state: var(--t-hover-bg) !important; }
.card .table, .d-card .table { background: transparent !important; }

/* ── Transaction Cards ──────────────────────── */
.tx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; padding: 1.25rem; }
.tx-card {
    background: var(--t-tx-bg);
    border: 1px solid var(--t-tx-border);
    border-radius: 12px;
    padding: 1.25rem;
    transition: all 0.3s;
}
.tx-card:hover { border-color: rgba(124,58,237,0.2); background: rgba(124,58,237,0.03); }
[data-theme="light"] .tx-card:hover { border-color: rgba(245,124,0,0.25); background: rgba(245,124,0,0.02); }

/* ═══════════════════════════════════════════════════
   BADGES
   ═══════════════════════════════════════════════════ */
.badge {
    display: inline-flex; align-items: center;
    padding: 0.35rem 0.75rem;
    border-radius: 6px;
    font-size: 0.75rem; font-weight: 600;
}
.badge-success { background: var(--t-badge-success-bg); color: var(--t-badge-success); }
.badge-danger { background: var(--t-badge-danger-bg); color: var(--t-badge-danger); }
.badge-warning { background: var(--t-badge-warning-bg); color: var(--t-badge-warning); }
.badge-info { background: var(--t-badge-info-bg); color: var(--t-badge-info); }
.badge-purple { background: rgba(124,58,237,0.15); color: #a78bfa; }

/* ═══════════════════════════════════════════════════
   FORMS
   ═══════════════════════════════════════════════════ */
.form-control, .form-select {
    background-color: var(--t-bg-input);
    border: 1px solid var(--t-glass-border);
    color: var(--t-text);
    border-radius: 8px;
    padding: 0.6rem 1rem;
    transition: all 0.25s;
}
.form-control:focus, .form-select:focus {
    background-color: var(--t-bg-input);
    border-color: var(--t-accent);
    color: var(--t-text);
    box-shadow: 0 0 0 3px rgba(124,58,237,0.12);
}
.form-control:disabled, .form-select:disabled {
    background-color: var(--t-bg-tertiary);
    color: var(--t-muted);
    opacity: 0.7;
    border-color: var(--t-glass-border);
}
.form-control::placeholder { color: var(--t-input-placeholder); }
.form-label { color: var(--t-text2); font-weight: 600; font-size: 0.85rem; margin-bottom: 0.4rem; }
.input-group-text { background: var(--t-bg-tertiary); border: 1px solid var(--t-glass-border); color: var(--t-text2); }
.form-check-input { background-color: var(--t-bg-input); border-color: var(--t-glass-border); }
.form-check-input:checked { background-color: var(--t-accent); border-color: var(--t-accent); }

/* Input with icon wrapper */
.input-icon-wrap { position: relative; }
.input-icon-wrap i {
    position: absolute; left: 1rem; top: 50%;
    transform: translateY(-50%);
    color: var(--t-input-placeholder);
    font-size: 0.85rem;
    pointer-events: none;
    transition: color 0.25s;
}
.input-icon-wrap .form-control { padding-left: 2.75rem; }
.input-icon-wrap .form-control:focus ~ i { color: var(--t-accent); }

/* ── Alert Messages ─────────────────────────── */
.alert { border: none; border-radius: 10px; }
.alert-success { background: var(--t-badge-success-bg); color: var(--t-badge-success); }
.alert-danger { background: var(--t-badge-danger-bg); color: var(--t-badge-danger); }
.alert-warning { background: var(--t-badge-warning-bg); color: var(--t-badge-warning); }
.alert-info { background: var(--t-alert-info-bg); color: var(--t-alert-info-color); border: 1px solid var(--t-alert-info-border); }
.alert .btn-close { filter: var(--t-close-filter); opacity: 0.5; }

/* ═══════════════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════════════ */
.btn-gradient {
    background: linear-gradient(135deg, var(--t-accent), color-mix(in srgb, var(--t-accent) 80%, #000));
    color: white; border: none; border-radius: 10px;
    font-weight: 700; padding: 0.75rem 1.5rem;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    display: inline-flex; align-items: center; gap: 0.5rem;
    cursor: pointer; text-decoration: none;
}
.btn-gradient:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(124,58,237,0.35);
    color: white;
}
[data-theme="light"] .btn-gradient {
    background: linear-gradient(135deg, #f57c00, #ff9800);
}
[data-theme="light"] .btn-gradient:hover {
    box-shadow: 0 6px 20px rgba(245,124,0,0.35);
}

.btn-outline-custom {
    background: transparent; color: var(--t-text);
    border: 1px solid var(--t-glass-border); border-radius: 10px;
    font-weight: 600; padding: 0.6rem 1.2rem;
    transition: all 0.3s;
    display: inline-flex; align-items: center; gap: 0.5rem;
    cursor: pointer; text-decoration: none;
}
.btn-outline-custom:hover {
    border-color: var(--t-accent);
    background: rgba(124,58,237,0.08);
    color: var(--t-accent);
}
[data-theme="light"] .btn-outline-custom:hover {
    background: rgba(245,124,0,0.08);
    color: #e65100;
    border-color: #f57c00;
}

.btn-sm-custom {
    padding: 0.4rem 1rem;
    font-size: 0.8rem;
    border-radius: 8px;
}

/* ── Theme Toggle ───────────────────────────── */
.theme-toggle {
    background: var(--t-bg-tertiary);
    border: 1px solid var(--t-glass-border);
    color: var(--t-text2);
    width: 36px; height: 36px;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; font-size: 0.95rem;
    transition: all 0.3s;
}
.theme-toggle:hover {
    color: var(--t-accent);
    border-color: var(--t-accent);
    transform: rotate(15deg);
}

/* ═══════════════════════════════════════════════════
   MODALS
   ═══════════════════════════════════════════════════ */
.modal-content {
    background: var(--t-bg-secondary);
    border: 1px solid var(--t-glass-border);
    color: var(--t-text);
}
.modal-header { border-bottom: 1px solid var(--t-glass-border); }
.modal-header .btn-close { filter: var(--t-close-filter); }
.modal-footer { border-top: 1px solid var(--t-glass-border); }

/* ═══════════════════════════════════════════════════
   DROPDOWNS
   ═══════════════════════════════════════════════════ */
.dropdown-menu {
    background: var(--t-bg-secondary);
    border: 1px solid var(--t-glass-border);
}
.dropdown-item { color: var(--t-text2); }
.dropdown-item:hover { background: var(--t-bg-tertiary); color: var(--t-text); }

/* ═══════════════════════════════════════════════════
   PAGINATION
   ═══════════════════════════════════════════════════ */
.pagination .page-link {
    background: var(--t-bg-tertiary);
    border-color: var(--t-glass-border);
    color: var(--t-text2);
}
.pagination .page-item.active .page-link {
    background: var(--t-accent);
    border-color: var(--t-accent);
    color: white;
}

/* ═══════════════════════════════════════════════════
   DATATABLES
   ═══════════════════════════════════════════════════ */
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate {
    color: var(--t-text2) !important;
    padding: 0.75rem 1rem;
}
.dataTables_wrapper .dataTables_filter input {
    background: var(--t-bg-input);
    border: 1px solid var(--t-glass-border);
    color: var(--t-text);
    border-radius: 6px;
    padding: 0.375rem 0.75rem;
}
.dataTables_wrapper .dataTables_paginate .paginate_button { color: var(--t-text2) !important; }
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: var(--t-accent) !important;
    color: white !important;
    border: none !important;
    border-radius: 6px;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: var(--t-bg-tertiary) !important;
    color: var(--t-text) !important;
    border: none !important;
}
table.dataTable tbody tr { background-color: transparent !important; }
table.dataTable tbody tr:hover { background-color: var(--t-hover-bg) !important; }

/* ═══════════════════════════════════════════════════
   NAV TABS (Bootstrap override)
   ═══════════════════════════════════════════════════ */
.nav-tabs { border-bottom-color: var(--t-glass-border); }
.nav-tabs .nav-link {
    color: var(--t-tab-color);
    border: 1px solid transparent;
    border-radius: 8px 8px 0 0;
    font-weight: 600; font-size: 0.82rem;
    padding: 0.6rem 1rem;
    transition: all 0.2s;
}
.nav-tabs .nav-link:hover {
    color: var(--t-accent);
    border-color: transparent;
    background: var(--t-hover-bg);
}
.nav-tabs .nav-link.active {
    background: var(--t-tab-active-bg);
    color: var(--t-tab-active-color);
    border-color: var(--t-tab-border) var(--t-tab-border) var(--t-tab-active-bg);
}
[data-theme="light"] .nav-tabs .nav-link { --t-tab-active-bg: #fff; }
[data-theme="light"] .nav-tabs .nav-link.active { border-bottom-color: #fff; }

/* ═══════════════════════════════════════════════════
   TEXT UTILITIES
   ═══════════════════════════════════════════════════ */
.text-muted { color: var(--t-muted) !important; }
.text-secondary-custom { color: var(--t-text2) !important; }
h1, h2, h3, h4, h5, h6 { color: var(--t-heading); }
a:not(.btn):not(.btn-gradient):not(.btn-outline-custom) { color: var(--t-link); }
a:not(.btn):not(.btn-gradient):not(.btn-outline-custom):hover { color: var(--t-link-hover); }

/* ── Empty States ───────────────────────────── */
.empty-state { text-align: center; padding: 2.5rem 1.5rem; color: var(--t-muted); }
.empty-state i { font-size: 2.5rem; margin-bottom: 0.75rem; opacity: 0.3; display: block; }
.empty-state p { margin: 0; font-size: 0.9rem; }

/* ── Section Header (profile settings) ──────── */
.section-title-custom {
    color: var(--t-text); font-weight: 700; font-size: 0.95rem;
    margin-bottom: 1rem;
    display: flex; align-items: center; gap: 0.5rem;
}
.section-divider { border: none; border-top: 1px solid var(--t-glass-border); margin: 1.5rem 0; }

/* ── Pre/Code ───────────────────────────────── */
pre, code { background: var(--t-bg2); color: #67e8f9; border-radius: 6px; }
pre { padding: 1.25rem; overflow-x: auto; border: 1px solid var(--t-glass-border); }
pre code { background: none; padding: 0; font-size: 0.85rem; }
code { padding: 0.2rem 0.5rem; font-size: 0.85em; }
[data-theme="light"] pre, [data-theme="light"] code { color: #e65100; background: var(--t-bg-tertiary); }
[data-theme="light"] pre code { background: none; }

/* ── Scroll Reveal ──────────────────────────── */
.reveal { opacity: 0; transform: translateY(30px); transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
.reveal.visible { opacity: 1; transform: translateY(0); }

/* ── Light Theme Overrides for Components ───── */
[data-theme="light"] .card,
[data-theme="light"] .d-card,
[data-theme="light"] .stat-card {
    background: #ffffff;
    border-color: #e0e0e0;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
    backdrop-filter: none;
}
[data-theme="light"] .card-header,
[data-theme="light"] .d-card-header {
    background: #fafafa;
    border-bottom-color: #eee;
}

[data-theme="light"] .form-control,
[data-theme="light"] .form-select {
    background-color: #fff;
    border-color: #e0e0e0;
    color: #212121;
}
[data-theme="light"] .form-control:focus,
[data-theme="light"] .form-select:focus {
    border-color: #f57c00;
    box-shadow: 0 0 0 3px rgba(245,124,0,0.12);
    background-color: #fff;
}
[data-theme="light"] .form-control::placeholder { color: #bdbdbd; }
[data-theme="light"] .form-label { color: #333; }
[data-theme="light"] .input-group-text { background: #fafafa; border-color: #e0e0e0; color: #555; }
[data-theme="light"] .form-check-input { background-color: #fff; border-color: #e0e0e0; }
[data-theme="light"] .form-check-input:checked { background-color: #f57c00; border-color: #f57c00; }
[data-theme="light"] .input-icon-wrap i { color: #bdbdbd; }
[data-theme="light"] .input-icon-wrap .form-control:focus ~ i { color: #f57c00; }

[data-theme="light"] .table thead th { background: #fafafa !important; color: #555; }
[data-theme="light"] .table tbody td { border-bottom-color: #f0f0f0 !important; }
[data-theme="light"] .table tbody tr:hover { background: rgba(245,124,0,0.03) !important; }

[data-theme="light"] .badge-success { background: #e8f5e9; color: #2e7d32; }
[data-theme="light"] .badge-danger { background: #ffebee; color: #c62828; }
[data-theme="light"] .badge-warning { background: #fff3e0; color: #e65100; }
[data-theme="light"] .badge-info { background: #e3f2fd; color: #1565c0; }

[data-theme="light"] .alert-success { background: #e8f5e9; color: #2e7d32; border: 1px solid #c8e6c9; }
[data-theme="light"] .alert-danger { background: #ffebee; color: #c62828; border: 1px solid #ffcdd2; }
[data-theme="light"] .alert-info { background: #fff3e0; color: #e65100; border: 1px solid #ffe0b2; }
[data-theme="light"] .alert .btn-close { filter: none; opacity: 0.6; }

[data-theme="light"] .modal-content { background: #fff; border-color: #e0e0e0; color: #212121; }
[data-theme="light"] .modal-header { border-bottom-color: #eee; }
[data-theme="light"] .modal-header .btn-close { filter: none; }
[data-theme="light"] .modal-footer { border-top-color: #eee; }
[data-theme="light"] .dropdown-menu { background: #fff; border-color: #e0e0e0; }
[data-theme="light"] .dropdown-item { color: #555; }
[data-theme="light"] .dropdown-item:hover { background: #fff3e0; color: #e65100; }
[data-theme="light"] .pagination .page-link { background: #fff; border-color: #e0e0e0; color: #555; }
[data-theme="light"] .pagination .page-item.active .page-link { background: #f57c00; border-color: #f57c00; color: #fff; }

[data-theme="light"] .nav-tabs { border-bottom-color: #e0e0e0; }
[data-theme="light"] .nav-tabs .nav-link { color: #555; }
[data-theme="light"] .nav-tabs .nav-link:hover { color: #e65100; background: #fff3e0; }
[data-theme="light"] .nav-tabs .nav-link.active {
    background: #fff; color: #e65100;
    border-color: #e0e0e0 #e0e0e0 #fff;
}

[data-theme="light"] .text-muted { color: #888 !important; }
[data-theme="light"] h1, [data-theme="light"] h2, [data-theme="light"] h3,
[data-theme="light"] h4, [data-theme="light"] h5, [data-theme="light"] h6 { color: #1a1a1a; }

[data-theme="light"] .banner-card { background: linear-gradient(135deg, rgba(245,124,0,0.06), rgba(255,152,0,0.03)); }
[data-theme="light"] .tx-card { background: #fff; border-color: #e0e0e0; }

[data-theme="light"] pre, [data-theme="light"] code { background: #fafafa; color: #e65100; border-color: #e0e0e0; }
[data-theme="light"] pre code { background: none; }

[data-theme="light"] .stat-card { box-shadow: 0 1px 4px rgba(0,0,0,0.06); }
[data-theme="light"] .stat-card:hover { box-shadow: 0 4px 16px rgba(245,124,0,0.1); border-color: rgba(245,124,0,0.25); }

/* ── Responsive ─────────────────────────────── */
@media (max-width: 768px) {
    .tx-grid { grid-template-columns: 1fr; }
    .stat-card:hover { transform: none; }
}

/* ── Gradient Text Utility ──────────────────── */
.gradient-text {
    background: linear-gradient(135deg, var(--t-accent), var(--t-accent2));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
[data-theme="light"] .gradient-text {
    background: linear-gradient(135deg, #f57c00, #ff9800);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}