/* Jude Blockchain Explorer - Custom Styles */

/* Hash & address monospace treatment */
a[href^="/tx/"],
a[href^="/block/"],
a[href^="/sn/"] {
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    font-size: 0.8125rem;
    word-break: break-all;
}

/* Truncate long hashes in table cells on smaller screens */
.sn-pubkey-cell a,
.data-table td.font-mono a {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}
@media (max-width: 767px) {
    .sn-pubkey-cell a,
    .data-table td.font-mono a {
        max-width: 120px;
    }
}
@media (min-width: 768px) and (max-width: 1023px) {
    .sn-pubkey-cell a,
    .data-table td.font-mono a {
        max-width: 200px;
    }
}
@media (min-width: 1024px) {
    .sn-pubkey-cell a {
        max-width: 320px;
    }
}

/* Tables */
.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
}
.data-table thead th {
    background-color: #f8fafc;
    color: #475569;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.6875rem;
    letter-spacing: 0.05em;
    padding: 0.625rem 0.75rem;
    text-align: left;
    border-bottom: 2px solid #e2e8f0;
    white-space: nowrap;
}
.data-table tbody td {
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid #f1f5f9;
    color: #334155;
    vertical-align: middle;
}
.data-table tbody tr:hover {
    background-color: #f8fafc;
}
.data-table tbody tr.block-row {
    background-color: #fafafe;
    border-left: 3px solid #6366f1;
}
.data-table tbody tr.block-row:hover {
    background-color: #f0f0ff;
}

/* Cards */
.card {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
}

/* Stat items */
.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 0.75rem;
}
.stat-item {
    padding: 0.75rem 1rem;
    background: #f8fafc;
    border-radius: 0.375rem;
    border: 1px solid #f1f5f9;
}
.stat-item .stat-label {
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #64748b;
    font-weight: 500;
    margin-bottom: 0.125rem;
}
.stat-item .stat-value {
    font-size: 0.875rem;
    font-weight: 600;
    color: #0f172a;
}

/* Info list (pipe-separated metadata) */
.info-line {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    font-size: 0.8125rem;
    line-height: 1.75;
}
.info-line > span {
    white-space: nowrap;
}
.info-line > span:not(:first-child)::before {
    content: " · ";
    color: #cbd5e1;
    margin: 0 0.375rem;
}
.info-line label {
    color: #64748b;
    font-weight: 500;
}
.info-line .stat-bold {
    font-weight: 600;
    color: #0f172a;
}

/* Badges */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.6875rem;
    font-weight: 600;
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
}
.badge-active {
    background-color: #ecfdf5;
    color: #059669;
}
.badge-warning {
    background-color: #fffbeb;
    color: #d97706;
}
.badge-danger {
    background-color: #fef2f2;
    color: #dc2626;
}
.badge-info {
    background-color: #eef2ff;
    color: #4f46e5;
}

/* TX type icons */
.tx-type-icon {
    cursor: help;
    font-size: 1rem;
}

/* Page controls / pagination */
.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 0;
}
.pagination .page-btn {
    display: inline-flex;
    align-items: center;
    padding: 0.375rem 0.75rem;
    font-size: 0.8125rem;
    font-weight: 500;
    border: 1px solid #e2e8f0;
    border-radius: 0.375rem;
    background: white;
    color: #334155;
    text-decoration: none;
    transition: all 0.15s;
}
.pagination .page-btn:hover {
    background-color: #f8fafc;
    border-color: #6366f1;
    color: #4f46e5;
}
.pagination .page-btn.disabled {
    opacity: 0.4;
    pointer-events: none;
}
.pagination .page-info {
    font-size: 0.8125rem;
    color: #64748b;
    padding: 0.375rem 0.75rem;
}
.pagination select {
    font-size: 0.8125rem;
    padding: 0.25rem 0.5rem;
    border: 1px solid #e2e8f0;
    border-radius: 0.375rem;
    background: white;
    color: #334155;
}

/* Quorum visualizations */
.quorum-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}
.quorum-card {
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    overflow: hidden;
    flex-grow: 1;
    min-width: 280px;
}
.quorum-card.active {
    border-color: #6366f1;
    box-shadow: 0 0 0 1px #6366f1;
}
.quorum-card .quorum-header {
    padding: 0.375rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    color: #334155;
}
.quorum-card.active .quorum-header {
    background: #eef2ff;
    color: #4f46e5;
}
.quorum-card .quorum-body {
    padding: 0.5rem;
}
.quorum-card .quorum-section {
    border-top: 1px solid #f1f5f9;
    padding-top: 0.375rem;
    margin-top: 0.375rem;
}
.quorum-card .quorum-section:first-child {
    border-top: none;
    padding-top: 0;
    margin-top: 0;
}
.quorum-card .quorum-section label {
    display: block;
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #94a3b8;
    margin-bottom: 0.25rem;
}
.quorum-nodes {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
}
.quorum-node {
    display: block;
    flex: 0 0 36px;
    max-width: 52px;
    flex-grow: 1;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 3px;
    overflow: hidden;
    text-overflow: "";
    padding: 1px 2px;
    font-size: 9px;
    color: #475569;
    text-decoration: none;
    font-family: 'JetBrains Mono', monospace;
    transition: all 0.15s;
}
.quorum-node:hover {
    background: #eef2ff;
    border-color: #6366f1;
    color: #4f46e5;
}
.quorum-node.voted,
.quorum-node.testee {
    background: #eef2ff;
    border-color: #a5b4fc;
    color: #4f46e5;
}

/* Checkpoint signatures */
.sig-ok { color: #059669; font-weight: bold; }
.sig-miss { color: #dc2626; }

/* SN status colors */
.sn-status-active { color: #059669; }
.sn-status-decomm { color: #dc2626; font-weight: 600; }
.sn-status-awaiting { color: #d97706; }

/* Links */
a {
    color: #4f46e5;
    text-decoration: none;
    transition: color 0.15s;
}
a:hover {
    color: #4338ca;
}
a:visited {
    color: #4f46e5;
}

/* Section containers */
.section {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1rem;
}
@media (min-width: 640px) {
    .section {
        padding: 0 1.5rem;
    }
}
@media (min-width: 1024px) {
    .section {
        padding: 0 2rem;
    }
}

/* Warning labels */
label.warning {
    color: #dc2626;
    font-weight: 600;
}

/* Table overflow on mobile */
.table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Syntax highlighting for raw details */
.syntax-highlight > pre {
    font-size: 0.8125rem;
    overflow-x: auto;
    tab-size: 4;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    padding: 1rem;
    background: #f8fafc;
    color: #334155;
    font-family: 'JetBrains Mono', monospace;
}

/* TX legend */
.tx-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1rem;
    font-size: 0.75rem;
    color: #64748b;
}

/* SN detail page */
.sn-details-layout {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
}
.sn-details-layout .sn-info {
    flex: 1;
    min-width: 300px;
}
.sn-details-layout img.qr {
    flex-shrink: 0;
}

/* Pulse quorum block producers */
.quorum-card .quorum-nodes.producer .quorum-node {
    max-width: 120px;
}

/* ===== Mobile responsiveness ===== */

/* Compact padding on mobile */
@media (max-width: 639px) {
    .section {
        padding: 0 0.75rem;
    }
    .card {
        border-radius: 0.375rem;
    }
    .stat-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
    }
    .stat-item {
        padding: 0.5rem 0.75rem;
    }
    .stat-item .stat-value {
        font-size: 0.8125rem;
    }
    .data-table thead th {
        padding: 0.5rem;
        font-size: 0.625rem;
    }
    .data-table tbody td {
        padding: 0.375rem 0.5rem;
        font-size: 0.75rem;
    }
    .quorum-grid {
        gap: 0.5rem;
    }
    .quorum-card {
        min-width: 100% !important;
        flex-basis: 100% !important;
    }
    .info-line {
        flex-direction: column;
        gap: 0.25rem;
    }
    .info-line > span:not(:first-child)::before {
        content: none;
    }
    .sn-details-layout {
        flex-direction: column;
    }
    .sn-details-layout img.qr {
        align-self: center;
    }
    .tx-legend {
        font-size: 0.6875rem;
    }
}

/* ===== Block detail enhancements ===== */

/* Block type badge */
.block-type-mined {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.625rem;
    border-radius: 0.375rem;
    background: #fef3c7;
    color: #92400e;
    font-size: 0.75rem;
    font-weight: 600;
}
.block-type-pulse {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.625rem;
    border-radius: 0.375rem;
    background: #ede9fe;
    color: #5b21b6;
    font-size: 0.75rem;
    font-weight: 600;
}

/* Highlight key values */
.highlight-value {
    font-size: 1.125rem;
    font-weight: 700;
    color: #0f172a;
}
.highlight-value-brand {
    font-size: 1.125rem;
    font-weight: 700;
    color: #4f46e5;
}

/* ===== TX detail enhancements ===== */

/* TX type header badge */
.tx-type-header {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    border-radius: 0.5rem;
    font-size: 0.8125rem;
    font-weight: 600;
}
.tx-type-header.transfer { background: #f0f9ff; color: #0369a1; }
.tx-type-header.registration { background: #ecfdf5; color: #065f46; }
.tx-type-header.contribution { background: #f0fdf4; color: #166534; }
.tx-type-header.decommission { background: #fef2f2; color: #991b1b; }
.tx-type-header.recommission { background: #ecfdf5; color: #065f46; }
.tx-type-header.deregistration { background: #fef2f2; color: #991b1b; }
.tx-type-header.unlock { background: #fffbeb; color: #92400e; }
.tx-type-header.lns { background: #eef2ff; color: #3730a3; }
.tx-type-header.coinbase { background: #f8fafc; color: #475569; }

/* Confirmation count colors */
.confirmations-low { color: #d97706; font-weight: 600; }
.confirmations-mid { color: #059669; font-weight: 600; }
.confirmations-high { color: #0f172a; font-weight: 600; }