/* ============================================================
   Grosscrypto — design system
   Dark trading-terminal aesthetic: deep navy surfaces, a gold
   accent (finance/crypto), indigo for secondary actions, and
   monospace for price data so columns actually line up like a
   real ticker. Both themes are first-class -- .dark-theme is the
   default/primary, .light-theme is a fully designed alternate,
   not an inverted afterthought.
   ============================================================ */

:root {
    --font-display: 'Sora', system-ui, sans-serif;
    --font-body: 'IBM Plex Sans', system-ui, sans-serif;
    --font-mono: 'IBM Plex Mono', ui-monospace, monospace;

    --radius: 12px;
    --radius-sm: 8px;

    /* ── Light theme (default -- no class required) ─────────────── */
    --bg: #f5f6f9;
    --bg-elevated: #ffffff;
    --surface: #ffffff;
    --surface-2: #f0f2f6;
    --border: #e3e6ed;
    --text: #171b26;
    --text-muted: #5c6478;
    --accent: #b8860b;
    --accent-ink: #ffffff;
    --accent-2: #5457d1;
    --up: #0d9f6e;
    --down: #d92d3d;
    --shadow: 0 12px 32px rgba(23, 27, 38, 0.08);
    --shadow-sm: 0 4px 12px rgba(23, 27, 38, 0.06);

    /* Bridge Bootstrap's own theme variables to ours. Bootstrap
       components (.card, .table, .list-group, .alert, etc.) set their
       own `color` from --bs-body-color/--bs-card-color/etc rather than
       inheriting from body, so without this every untouched Bootstrap
       component silently keeps Bootstrap's #212529-on-white defaults --
       invisible dark-gray-on-dark-navy text in dark mode. Fixing it here
       once, instead of patching each Bootstrap class we happen to touch,
       is what stops this bug from recurring in components we haven't
       hand-styled yet. */
    --bs-body-color: var(--text);
    --bs-body-color-rgb: 23, 27, 38;
    --bs-body-bg: var(--bg);
    --bs-card-color: var(--text);
    --bs-secondary-color: var(--text-muted);
    --bs-secondary-color-rgb: 92, 100, 120;
    --bs-border-color: var(--border);
    --bs-border-color-translucent: var(--border);
    --bs-tertiary-bg: var(--surface-2);
    --bs-heading-color: var(--text);
    --bs-link-color: var(--accent-2);
    --bs-link-hover-color: var(--accent);
}

/* ── Dark theme override ──────────────────────────────────────────
   The only class the toggle ever touches. Light is the unclassed
   default above, so there is nothing to remove/conflict with --
   this is what makes the toggle robust regardless of any stale
   "light-theme" class left on body by old markup/scripts. */
body.dark-theme {
    --bg: #0a0e17;
    --bg-elevated: #0d1220;
    --surface: #131a29;
    --surface-2: #1a2233;
    --border: #232c3f;
    --text: #e9ecf1;
    --text-muted: #8b93a7;
    --accent: #f2b90c;
    --accent-ink: #1a1400;
    --accent-2: #7c7ff2;
    --up: #16c784;
    --down: #ea3943;
    --shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
    --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.3);

    /* Custom properties don't dynamically re-resolve down the tree --
       a var() reference is substituted using the value in scope where
       it's DECLARED, not re-evaluated per descendant. Since these were
       only declared once on :root (using the light --text), they'd stay
       frozen at the light value even under body.dark-theme unless
       redeclared here too, on the same element, after --text/--border/etc
       above have already been overridden for this scope. */
    --bs-body-color: var(--text);
    --bs-body-color-rgb: 233, 236, 241;
    --bs-body-bg: var(--bg);
    --bs-card-color: var(--text);
    --bs-secondary-color: var(--text-muted);
    --bs-secondary-color-rgb: 139, 147, 167;
    --bs-border-color: var(--border);
    --bs-border-color-translucent: var(--border);
    --bs-tertiary-bg: var(--surface-2);
    --bs-heading-color: var(--text);
    --bs-link-color: var(--accent-2);
    --bs-link-hover-color: var(--accent);
}

/* ============================================================
   Base
   ============================================================ */
body {
    background-color: var(--bg);
    color: var(--text);
    font-family: var(--font-body);
    transition: background-color 0.25s ease, color 0.25s ease;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.navbar-brand, .card-title {
    font-family: var(--font-display);
    letter-spacing: -0.01em;
}

a {
    color: var(--accent-2);
}

a:hover {
    color: var(--accent);
}

::selection {
    background: var(--accent);
    color: var(--accent-ink);
}

/* Tabular figures anywhere numbers line up in columns */
.table, .price-cell, .change-cell, .vol-cell, .mcap-cell {
    font-variant-numeric: tabular-nums;
}

/* ============================================================
   Navbar
   ============================================================ */
.navbar {
    background-color: var(--bg-elevated) !important;
    border-bottom: 1px solid var(--border);
    padding-top: 0.85rem;
    padding-bottom: 0.85rem;
}

.navbar-logo {
    height: 34px;
    width: auto;
}

.gc-wordmark {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.55rem;
    letter-spacing: -0.02em;
    color: var(--text) !important;
    display: inline-flex;
    align-items: baseline;
}

.gc-wordmark-accent {
    color: var(--accent);
}

footer .gc-wordmark {
    font-size: 1.3rem;
    margin-bottom: 0.75rem;
    display: inline-flex;
}

.navbar-nav .nav-link {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.92rem;
    letter-spacing: 0.01em;
    color: var(--text-muted) !important;
    padding: 0.5rem 1rem !important;
    border-radius: var(--radius-sm);
    transition: color 0.15s ease, background-color 0.15s ease;
}

.navbar-nav .nav-link:hover {
    color: var(--text) !important;
    background-color: var(--surface-2);
}

.navbar-nav .nav-link.active {
    color: var(--accent) !important;
}

.form-check.form-switch .form-check-label {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.form-check-input:checked {
    background-color: var(--accent);
    border-color: var(--accent);
}

/* ============================================================
   Hero (homepage)
   ============================================================ */
.gc-hero {
    background:
        radial-gradient(ellipse 900px 400px at 15% -10%, rgba(242, 185, 12, 0.10), transparent),
        radial-gradient(ellipse 700px 400px at 100% 0%, rgba(124, 127, 242, 0.10), transparent),
        var(--bg-elevated);
    border-bottom: 1px solid var(--border);
    padding: 3.25rem 0 2.5rem;
    margin-bottom: 2rem;
}

.gc-hero-eyebrow {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--accent);
    font-weight: 600;
    margin-bottom: 0.75rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.gc-hero-eyebrow .dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--up);
    box-shadow: 0 0 0 3px rgba(22, 199, 132, 0.2);
}

.gc-listing-duration {
    display: inline-block;
    margin-top: 0.2rem;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--text-muted);
}

.gc-hero h1 {
    font-size: clamp(1.9rem, 4vw, 2.75rem);
    font-weight: 800;
    margin-bottom: 0.5rem;
    text-wrap: balance;
}

.gc-hero p.lead {
    color: var(--text-muted);
    font-size: 1.05rem;
    max-width: 640px;
    margin-bottom: 0;
}

/* ============================================================
   Cards (news, listings)
   ============================================================ */
.card {
    background-color: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: none;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.card.shadow-lg,
.gc-news-card {
    box-shadow: var(--shadow-sm);
}

.gc-news-card:hover,
.card.shadow-lg:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow);
    border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
}

.gc-news-card { overflow: hidden; }

.gc-news-img {
    width: 100%;
    height: 100%;
    min-height: 200px;
    max-height: 260px;
    object-fit: cover;
    display: block;
}

@media (max-width: 767px) {
    .gc-news-img { max-height: 200px; }
}

.card-title {
    font-weight: 700;
    color: var(--text);
}

/* Bootstrap's .text-muted is a fixed gray, not theme-aware -- override
   it site-wide so it never goes low-contrast against a dark surface
   (same bug class as the footer copyright text). */
.text-muted {
    color: var(--text-muted) !important;
}

/* Article meta row (date, read time) */
.gc-meta {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Section headings above content blocks */
.gc-section-title {
    font-weight: 800;
    font-size: 1.5rem;
    margin-bottom: 1.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* ============================================================
   Buttons
   ============================================================ */
.btn-primary {
    background-color: var(--accent);
    border-color: var(--accent);
    color: var(--accent-ink);
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: 0.01em;
}

.btn-primary:hover, .btn-primary:focus {
    background-color: color-mix(in srgb, var(--accent) 88%, black);
    border-color: color-mix(in srgb, var(--accent) 88%, black);
    color: var(--accent-ink);
}

.btn-outline-primary {
    color: var(--accent-2);
    border-color: var(--accent-2);
}

.btn-outline-primary:hover {
    background-color: var(--accent-2);
    border-color: var(--accent-2);
}

/* ============================================================
   Price table
   ============================================================ */
#crypto-table .table {
    background-color: var(--surface);
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--border);
    margin-bottom: 0;
}

#crypto-table .table thead th {
    background-color: var(--surface-2) !important;
    color: var(--text-muted);
    font-family: var(--font-display);
    font-size: 0.76rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
    border-bottom: 1px solid var(--border);
    padding: 0.85rem 0.9rem;
}

#crypto-table .table tbody td {
    border-color: var(--border);
    color: var(--text);
    padding: 0.85rem 0.9rem;
    vertical-align: middle;
    font-family: var(--font-mono);
    font-size: 0.92rem;
}

/* Coin name cell stays in the display/body font, not mono */
#crypto-table .table tbody td:nth-child(2) {
    font-family: var(--font-body);
    font-weight: 600;
}

#crypto-table .table tbody tr {
    transition: background-color 0.12s ease;
}

#crypto-table .table tbody tr:hover {
    background-color: var(--surface-2);
}

#crypto-table .table img {
    border-radius: 50%;
    background: var(--surface-2);
    padding: 2px;
}

#last-update {
    font-family: var(--font-mono);
    font-size: 0.8rem;
}

/* Search bar on the prices page */
#search-bar {
    background-color: var(--surface);
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: var(--radius-sm);
    padding: 0.65rem 1rem;
}

#search-bar:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent);
    background-color: var(--surface);
    color: var(--text);
}

/* ============================================================
   Modals
   ============================================================ */
.modal-content {
    background-color: var(--surface);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.modal-header, .modal-footer {
    border-color: var(--border) !important;
    background-color: transparent !important;
    color: inherit !important;
}

/* Payment instructions modal */
.gc-payment-modal .modal-title {
    font-family: var(--font-display);
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.gc-payment-modal .modal-title i {
    color: var(--accent);
}

.gc-payment-msg {
    margin-bottom: 1rem;
}

.gc-wallet-box {
    background-color: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 0.85rem 1rem;
    margin-bottom: 1.25rem;
}

.gc-wallet-label {
    display: block;
    font-family: var(--font-display);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    margin-bottom: 0.4rem;
}

.gc-wallet-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.gc-wallet-address {
    font-family: var(--font-mono);
    font-size: 0.88rem;
    color: var(--text);
    word-break: break-all;
    flex: 1;
}

.gc-copy-btn {
    flex-shrink: 0;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-muted);
    border-radius: var(--radius-sm);
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.gc-copy-btn:hover {
    color: var(--accent);
    border-color: var(--accent);
}

.gc-copy-btn.copied {
    color: var(--up);
    border-color: var(--up);
}

.gc-qr-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    padding: 1.25rem 0 1.5rem;
}

.gc-qr-wrap img {
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: #fff;
    padding: 8px;
}

.gc-qr-caption {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.gc-payment-status {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    padding: 0.7rem 0.85rem;
    border-radius: var(--radius-sm);
    background-color: var(--surface-2);
    font-weight: 600;
    font-size: 0.9rem;
}

.gc-status-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.gc-confirm-bar {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.gc-confirm-track {
    flex: 1;
    height: 6px;
    border-radius: 999px;
    background-color: var(--border);
    overflow: hidden;
}

.gc-confirm-fill {
    height: 100%;
    border-radius: 999px;
    background: var(--accent);
    transition: width 0.5s ease;
}

.gc-confirm-count {
    font-family: var(--font-mono);
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--text-muted);
    white-space: nowrap;
}

.gc-status-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent);
    animation: gc-pulse 1.4s ease-in-out infinite;
}

.gc-payment-status[data-state="waiting"] .gc-status-text {
    color: var(--text-muted);
}

.gc-payment-status[data-state="confirmed"] {
    background-color: color-mix(in srgb, var(--up) 14%, var(--surface-2));
}

.gc-payment-status[data-state="confirmed"] .gc-status-dot {
    background: var(--up);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--up) 22%, transparent);
    animation: none;
}

.gc-payment-status[data-state="confirmed"] .gc-status-text {
    color: var(--up);
}

.gc-payment-status[data-state="confirmed"] .gc-confirm-fill {
    background: var(--up);
}

@keyframes gc-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}

.gc-error-modal .modal-title {
    color: var(--down);
}

.form-control, .form-select {
    background-color: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--text);
}

.form-control:focus, .form-select:focus {
    background-color: var(--surface-2);
    border-color: var(--accent);
    color: var(--text);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent);
}

.form-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-muted);
}

/* ============================================================
   Footer
   ============================================================ */
footer.gc-footer {
    background-color: var(--bg-elevated) !important;
    border-top: 1px solid var(--border);
}

footer.gc-footer h5 {
    font-family: var(--font-display);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    margin-bottom: 1rem;
}

footer.gc-footer p,
footer.gc-footer li {
    color: var(--text-muted);
    font-size: 0.92rem;
}

footer.gc-footer a {
    text-decoration: none;
    color: var(--text-muted);
    transition: color 0.15s ease;
}

footer.gc-footer a:hover {
    color: var(--accent);
}

footer.gc-footer i {
    transition: color 0.15s ease, transform 0.15s ease;
}

footer.gc-footer i:hover {
    color: var(--accent);
    transform: translateY(-2px);
}

footer.gc-footer .form-control {
    background-color: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--text);
}

/* Optional additional styling for images */
.content img {
    max-width: 100%;
    height: auto;
    margin-bottom: 20px;
    border-radius: var(--radius-sm);
}

/* ============================================================
   Pagination
   ============================================================ */
.pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    list-style: none;
    padding-left: 0;
    margin: 2rem 0;
    gap: 0.4rem;
}

.pagination .page-item {
    margin: 0;
}

.pagination .page-link {
    padding: 0.5rem 0.95rem;
    text-decoration: none;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background-color: var(--surface);
    color: var(--text);
    font-family: var(--font-mono);
    font-size: 0.88rem;
}

.pagination .page-link:hover {
    border-color: var(--accent);
    color: var(--accent);
    background-color: var(--surface);
}

.pagination .active .page-link {
    background-color: var(--accent);
    border-color: var(--accent);
    color: var(--accent-ink);
}

/* ============================================================
   Misc / carried over
   ============================================================ */
html { scroll-behavior: smooth; }

button:focus, .navbar-toggler:focus, a:focus, a:active {
    outline: none;
    box-shadow: none;
}

.navbar-toggler:focus {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent) !important;
}

.card-body img { width: 50px; height: auto; margin-right: 10px; }
.d-flex { display: flex; align-items: center; }
.card-body { display: block; }
.mt-3 { margin-top: 15px; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 768px) {
    .navbar { padding: 0.6rem 0.75rem; }
    .gc-hero { padding: 2.25rem 0 1.75rem; }
    .pagination .page-item { flex: 0 0 auto; }
    .pagination .page-link { padding: 0.4rem 0.7rem; font-size: 0.82rem; }
    #crypto-table .table { font-size: 0.8rem; }
    #crypto-table .table thead th,
    #crypto-table .table tbody td { padding: 0.55rem 0.5rem; }
    #crypto-table .table img { width: 26px; height: 26px; }
    .content img { width: 100%; }
}