/* Menu Functions Styling */

.ct-menu-functions {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ct-menu-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--ct-text-secondary);
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    transition: all 0.2s;
    position: relative;
    text-align: left;
}

.ct-menu-btn:hover {
    background: var(--ct-border);
    color: var(--ct-accent-blue);
    border-color: var(--ct-accent-blue);
}

.ct-menu-icon {
    font-size: 16px;
    min-width: 20px;
    display: flex;
    align-items: center;
}

.ct-menu-label {
    flex: 1;
}

.ct-menu-badge {
    display: inline-block;
    background: var(--ct-accent-red);
    color: white;
    border-radius: 10px;
    padding: 2px 6px;
    font-size: 10px;
    font-weight: 600;
    min-width: 18px;
    text-align: center;
}

/* Modal Styles */
.ct-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1001;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.2s ease-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.ct-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(2px);
}

.ct-modal-content {
    position: relative;
    background: var(--ct-bg-darker);
    border: 1px solid var(--ct-border);
    border-radius: 12px;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    animation: slideUp 0.3s ease-out;
}

@keyframes slideUp {
    from {
        transform: translateY(20px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.ct-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    border-bottom: 1px solid var(--ct-border);
}

.ct-modal-header h3 {
    margin: 0;
    font-size: 16px;
    color: var(--ct-text-primary);
}

.ct-modal-close {
    background: none;
    border: none;
    color: var(--ct-text-secondary);
    font-size: 24px;
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: all 0.2s;
}

.ct-modal-close:hover {
    background: var(--ct-border);
    color: var(--ct-text-primary);
}

.ct-modal-body {
    padding: 16px;
}

.ct-modal-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ct-modal-empty {
    text-align: center;
    color: var(--ct-text-secondary);
    padding: 24px;
    font-style: italic;
}

.ct-modal-hint {
    font-size: 11px;
    color: var(--ct-text-secondary);
    opacity: 0.85;
    line-height: 1.4;
    margin: 0 0 10px;
}

.ct-modal-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.ct-modal-table thead {
    border-bottom: 1px solid var(--ct-border);
}

.ct-modal-table th {
    padding: 8px;
    text-align: left;
    color: var(--ct-text-secondary);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 10px;
}

.ct-modal-table td {
    padding: 10px 8px;
    border-bottom: 1px solid var(--ct-border);
    color: var(--ct-text-primary);
}

.ct-modal-table tbody tr:hover {
    background: var(--ct-border);
}

/* Explore panel (trending / gainers / losers / market-wide search) */
.ct-explore {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ct-explore-tabs {
    display: flex;
    gap: 6px;
}

.ct-explore-tab {
    flex: 1;
    padding: 6px 10px;
    border: 1px solid var(--ct-border);
    background: var(--ct-bg-darker);
    color: var(--ct-text-secondary);
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.ct-explore-tab-active {
    color: var(--ct-accent-blue);
    border-color: var(--ct-accent-blue);
}

.ct-explore-search {
    padding: 8px 10px;
    border: 1px solid var(--ct-border);
    background: var(--ct-bg-darker);
    color: var(--ct-text-primary);
    border-radius: 6px;
    font-size: 12px;
    width: 100%;
    box-sizing: border-box;
}

.ct-explore-body {
    min-height: 120px;
    max-height: 360px;
    overflow-y: auto;
}

.ct-explore-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ct-explore-row {
    display: grid;
    grid-template-columns: 40px 1fr auto auto;
    align-items: center;
    gap: 10px;
    padding: 8px;
    border-radius: 6px;
    text-decoration: none;
    color: var(--ct-text-primary);
}

.ct-explore-row:hover {
    background: var(--ct-border);
}

.ct-explore-rank {
    color: var(--ct-text-secondary);
    font-size: 11px;
}

.ct-explore-name {
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ct-explore-symbol {
    color: var(--ct-text-secondary);
    font-size: 11px;
}

.ct-explore-price {
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}

.ct-explore-change {
    font-size: 12px;
    font-weight: 600;
    min-width: 60px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.ct-explore-disclaimer {
    margin: 0;
    font-size: 10px;
    color: var(--ct-text-secondary);
    opacity: 0.8;
}

.ct-explore-disclaimer a {
    color: var(--ct-accent-blue);
}

/* "🆕 New" tab (recently created on-chain pools) - see loadNewPoolsTab() in
   crypto-menu-ui.js. Rows here are real <button>s (clickable straight into
   this app's own chart), not <a> link-outs like every other Explore row -
   .ct-new-pool-row resets button chrome so it can still share
   .ct-explore-row's grid layout/hover styling above. */
.ct-new-pool-row {
    width: 100%;
    background: none;
    border: none;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.ct-explore-chain-note {
    margin: 0 0 4px 0;
    font-size: 10px;
    color: var(--ct-text-secondary);
    opacity: 0.8;
}

.ct-explore-risk-note {
    color: var(--ct-accent-yellow);
    opacity: 1;
}

/* Overdue-snapshot warning on the Screened tab (Aug 26 2026). Deliberately
   louder than .ct-explore-risk-note: that one is a standing "not investment
   advice" caveat users learn to skim past, whereas this only appears when the
   12h refresh job has actually failed and the rankings on screen are known to
   be out of date. Red border + tint so it can't be mistaken for the usual
   boilerplate. See describeSnapshotAge() in crypto-menu-ui.js. */
.ct-explore-stale-note {
    color: var(--ct-accent-red);
    opacity: 1;
    border: 1px solid var(--ct-accent-red);
    border-radius: 6px;
    background: rgba(239, 68, 68, 0.08);
    padding: 6px 10px;
}

/* "🛡️ Screened" tab (curated new-BSC-token security snapshot) - see
   loadScreenedTab() in crypto-menu-ui.js and docs/KNOWN-ISSUES.md #45.
   Rows share .ct-new-pool-row's button-reset + click-to-chart wiring (same
   behavior: open straight into this app's own chart), plus their own
   .ct-screened-row hook for the two bits unique to this tab: a
   per-row flags line, and a distinct "medium risk" color that isn't one of
   the existing green/red .ct-positive/.ct-negative pair. */
.ct-screened-row {
    align-items: flex-start;
}

.ct-screened-flags {
    display: block;
    font-size: 10px;
    color: var(--ct-text-secondary);
    opacity: 0.85;
    white-space: normal;
    line-height: 1.3;
    margin-top: 2px;
}

.ct-screened-medium {
    color: var(--ct-accent-yellow);
}

.ct-form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    background: var(--ct-bg-dark);
    border-radius: 8px;
    border: 1px solid var(--ct-border);
}

.ct-form-group input,
.ct-form-group select {
    padding: 8px 10px;
    border: 1px solid var(--ct-border);
    background: var(--ct-bg-darker);
    color: var(--ct-text-primary);
    border-radius: 6px;
    font-size: 12px;
}

.ct-form-group input:focus,
.ct-form-group select:focus {
    outline: none;
    border-color: var(--ct-accent-blue);
    box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.1);
}

.ct-btn-primary,
.ct-btn-small {
    padding: 8px 12px;
    border: none;
    background: var(--ct-accent-blue);
    color: var(--ct-bg-dark);
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    font-size: 12px;
    transition: all 0.2s;
}

.ct-btn-primary:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}

.ct-btn-small {
    padding: 4px 8px;
    font-size: 11px;
}

.ct-btn-delete {
    background: var(--ct-accent-red);
}

.ct-btn-delete:hover {
    opacity: 0.9;
}

/* Stats Box */
.ct-stats-box {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
    padding: 12px;
    background: var(--ct-bg-dark);
    border-radius: 8px;
    border: 1px solid var(--ct-border);
}

.ct-stat {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12px;
}

.ct-stat strong {
    color: var(--ct-text-secondary);
    font-size: 10px;
    text-transform: uppercase;
}

/* Favorites List */
.ct-favorites-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ct-favorite-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    background: var(--ct-bg-dark);
    border: 1px solid var(--ct-border);
    border-radius: 8px;
}

.ct-fav-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ct-fav-info strong {
    color: var(--ct-accent-blue);
    font-size: 12px;
}

.ct-fav-category {
    font-size: 10px;
    color: var(--ct-text-secondary);
    text-transform: uppercase;
    background: var(--ct-border);
    padding: 2px 6px;
    border-radius: 3px;
    width: fit-content;
}

.ct-fav-notes {
    font-size: 11px;
    color: var(--ct-text-secondary);
    font-style: italic;
}

/* Calculator */
.ct-calculator {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.ct-calc-section {
    padding: 12px;
    background: var(--ct-bg-dark);
    border: 1px solid var(--ct-border);
    border-radius: 8px;
}

.ct-calc-section h4 {
    margin: 0 0 8px;
    font-size: 12px;
    color: var(--ct-accent-blue);
    text-transform: uppercase;
}

.ct-calc-inputs {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ct-calc-inputs input,
.ct-calc-inputs select {
    padding: 6px 8px;
    border: 1px solid var(--ct-border);
    background: var(--ct-bg-darker);
    color: var(--ct-text-primary);
    border-radius: 4px;
    font-size: 11px;
}

.ct-calc-result {
    padding: 8px;
    background: var(--ct-bg-darker);
    border-radius: 4px;
    font-size: 11px;
    color: var(--ct-text-secondary);
    margin-top: 4px;
}

.ct-calc-result strong {
    color: var(--ct-accent-green);
}

/* Alert Status */
.ct-alert-triggered {
    color: var(--ct-accent-green);
    font-weight: 600;
}

.ct-alert-pending {
    color: var(--ct-accent-yellow);
}

/* Responsive */
@media (max-width: 768px) {
    .ct-modal-content {
        width: calc(100vw - 32px) !important;
        max-height: calc(100vh - 60px);
    }

    .ct-stats-box {
        grid-template-columns: 1fr;
    }

    .ct-modal-table {
        font-size: 10px;
    }

    .ct-modal-table th,
    .ct-modal-table td {
        padding: 6px 4px;
    }
}