/*
 * livia.css — Shared styles for iLIA / iLISA tool pages
 * Extracted from flypredictome.html (primary), universal.html, dimer.html
 */

/* ── Base ── */
html { scrollbar-gutter: stable; }
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: #f5f7fa;
    color: #333;
    min-height: 100vh;
}

/* ── Header ── */
.header { background: white; color: #1a5276; padding: 0.8rem 2rem 0.8rem; border-bottom: 1px solid #e8e8e8; }
.header h1 { font-size: 1.8rem; font-weight: 700; margin-bottom: 0.15rem; color: #1a5276; letter-spacing: -0.02em; }
.header p { font-size: 0.92rem; color: #888; margin-bottom: 0.8rem; font-weight: 400; }
.header-links { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.header-links a { color: #555; text-decoration: none; font-size: 0.82rem; padding: 0.3rem 0.7rem; border: 1px solid #ddd; border-radius: 6px; transition: all 0.2s; background: #f8f9fa; }
.header-links a:hover { background: #2471A3; color: white; border-color: #2471A3; }

/* ── Layout ── */
.container { max-width: 1100px; margin: 0 auto; padding: 1.5rem; }

/* ── Cards ── */
.card {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    margin-bottom: 1.5rem;
}
.card label {
    font-weight: 600;
    font-size: 0.85rem;
    color: #555;
    display: block;
    margin-bottom: 0.4rem;
}

/* ── Steps ── */
.step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px; height: 28px;
    border-radius: 50%;
    background: #2471A3;
    color: white;
    font-weight: 700;
    font-size: 0.85rem;
    margin-right: 0.5rem;
    flex-shrink: 0;
}
.step-header {
    display: flex;
    align-items: center;
    margin-bottom: 0.8rem;
    font-weight: 600;
    font-size: 1rem;
}
.step-desc {
    font-size: 0.88rem;
    color: #666;
    margin-bottom: 0.8rem;
    padding-left: 2.3rem;
}
.step-desc code {
    background: #f0f0f0;
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
    font-size: 0.82rem;
}

/* ── Buttons ── */
.btn {
    padding: 0.6rem 1.5rem;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: background 0.2s;
}
.btn-primary { background: #2471A3; color: white; }
.btn-primary:hover { background: #1a5276; }
.btn-primary:disabled { background: #aaa; cursor: not-allowed; }
.example-btn { padding: 0.25rem 0.65rem; border: none; border-radius: 20px; background: #eaf2f8; cursor: pointer; font-size: 0.78rem; color: #2471A3; transition: all 0.2s; font-weight: 500; }
.example-btn:hover { background: #2471A3; color: white; }

.btn-download {
    padding: 0.6rem 1.2rem;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    border: 2px solid;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    transition: all 0.2s;
}
.btn-download.cxc { background: #2471A3; color: white; border-color: #2471A3; }
.btn-download.cxc:hover { background: #1a5276; border-color: #1a5276; }
.btn-download.pdb { background: white; color: #E67E22; border-color: #E67E22; }
.btn-download.pdb:hover { background: #fef5ec; }

/* ── Color Scheme ── */
.color-section { display: flex; gap: 2rem; flex-wrap: wrap; }
.color-group { flex: 1; min-width: 200px; }
.color-group h3 {
    font-size: 0.8rem;
    color: #888;
    margin-bottom: 0.6rem;
}
.color-pair {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.5rem;
}
.color-pair input[type="color"] {
    width: 36px; height: 36px;
    border: 2px solid #e0e0e0;
    border-radius: 6px;
    cursor: pointer;
    padding: 2px;
}
.color-pair .color-label { font-size: 0.9rem; }
.color-pair .color-hex { font-family: monospace; font-size: 0.8rem; color: #888; }
.color-def { font-weight: 400; font-size: 0.8rem; color: #999; }
.color-preview-strip {
    display: flex; height: 8px; border-radius: 4px;
    overflow: hidden; margin-top: 0.5rem;
}
.color-preview-strip div { flex: 1; transition: background 0.3s; }

/* ── URL input ── */
.url-row {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 0.8rem;
}
.url-row input[type="text"] {
    flex: 1;
    padding: 0.7rem 1rem;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    font-size: 0.95rem;
    transition: border-color 0.2s;
}
.url-row input[type="text"]:focus { outline: none; border-color: #2471A3; }
.url-row select {
    padding: 0.7rem 0.8rem;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    font-size: 0.95rem;
    background: white;
}
.fetch-status {
    font-size: 0.85rem;
    color: #666;
    min-height: 1.2rem;
    margin-bottom: 0.5rem;
}
.fetch-status.loading { color: #2471A3; }
.fetch-status.error { color: #c0392b; }
.fetch-status.success { color: #27ae60; }

/* ── Results ── */
.results { display: none; }
.results.active { display: block; }

.metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 0.8rem;
    margin-bottom: 1rem;
}
.metric {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 0.8rem;
    text-align: center;
}
.metric .value { font-size: 1.3rem; font-weight: 700; color: #2471A3; }
.metric .label { font-size: 0.75rem; color: #888; margin-top: 0.2rem; }

.result-card h2 { font-size: 1.2rem; margin-bottom: 1rem; color: #1a5276; }

/* ── Tables ── */
.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
    margin-bottom: 1rem;
}
.data-table th {
    text-align: left;
    padding: 0.5rem 0.8rem;
    background: #f8f9fa;
    font-weight: 600;
    font-size: 0.8rem;
    color: #666;
}
.data-table td {
    padding: 0.5rem 0.8rem;
    border-top: 1px solid #eee;
}
.data-table tr.selected td { background: #faf8f4; }
.data-table tr.selected td:first-child { box-shadow: inset 4px 0 0 #c4a35a; }
.model-badge { font-size: 0.7rem; font-weight: 500; color: #2471A3; background: #eaf2f8; padding: 0.15rem 0.5rem; border-radius: 4px; vertical-align: middle; }
.data-table tr.clickable { cursor: pointer; }
.data-table tr.clickable:hover { background: #f0f7fc; }

/* Sortable table headers */
.data-table th.sortable { cursor: pointer; user-select: none; position: relative; }
.data-table th.sortable:hover { background: #e8f0fe; }
.data-table th.sortable::after { content: ' \21C5'; font-size: 0.7em; color: #aaa; }
.data-table th.sort-asc::after { content: ' \25B2'; color: #2471A3; }
.data-table th.sort-desc::after { content: ' \25BC'; color: #2471A3; }

/* ── Script Preview ── */
.script-preview {
    background: #1e1e2e;
    color: #cdd6f4;
    border-radius: 8px;
    padding: 0.6rem 0.8rem;
    font-family: 'SF Mono', 'Fira Code', monospace;
    font-size: 0.8rem;
    line-height: 1.5;
    max-height: 200px;
    overflow-y: auto;
    white-space: pre;
    margin-bottom: 1rem;
}
.script-preview .comment { color: #6c7086; }
.script-preview .command { color: #89b4fa; }
.script-preview .color-val { color: #f9e2af; }

.download-row { display: flex; gap: 0.75rem; flex-wrap: wrap; }

/* ── Error ── */
.error-msg {
    display: none;
    background: #fdeaea;
    color: #c0392b;
    padding: 0.6rem 0.8rem;
    border-radius: 8px;
    margin-bottom: 1rem;
}
.error-msg.active { display: block; }

/* ── Info box ── */
.info-box { background: #faf8f4; border-left: 3px solid #c4a35a; padding: 0.4rem 0.8rem; border-radius: 0 6px 6px 0; font-size: 0.8rem; color: #555; margin-bottom: 0.6rem; }

/* ── Input tabs ── */
.input-tabs { display: flex; gap: 0; border-bottom: 2px solid #e0e0e0; margin-bottom: 1rem; }
.input-tab { padding: 0.5rem 1.2rem; font-size: 0.9rem; font-weight: 600; color: #888; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -2px; transition: all 0.2s; background: none; border-top: none; border-left: none; border-right: none; }
.input-tab:hover { color: #2471A3; }
.input-tab.active { color: #2471A3; border-bottom-color: #2471A3; }

/* ── Preset chips (in Options card) ── */
.presets-row {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.preset-chip {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.8rem;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.82rem;
    color: #666;
    transition: all 0.2s;
    background: white;
}
.preset-chip:hover { border-color: #2471A3; color: #333; }
.preset-chip.active { border-color: #2471A3; background: #eaf2f8; color: #1a5276; font-weight: 600; }

/* ── Sequence viewer ── */
.seq-row { display:flex; align-items:center; margin-bottom:0; }
.seq-num { font-size:0.72rem; color:#888; width:36px; text-align:right; padding-right:4px; flex-shrink:0; font-family:'SF Mono','Fira Code',monospace; }
.seq-blocks { display:flex; flex-wrap:nowrap; font-family:'SF Mono','Fira Code',monospace; font-size:0.82rem; line-height:1.4; letter-spacing:0.5px; }
.seq-res { display:inline-block; width:0.75em; text-align:center; cursor:default; color:#333; }
.seq-res.clir { color:white; font-weight:700; }
.seq-chain-label { font-size:0.88rem; font-weight:700; color:#1a5276; margin-top:0.5rem; margin-bottom:0.2rem; }
.seq-tooltip { position:fixed; background:#333; color:white; padding:2px 6px; border-radius:4px; font-size:0.72rem; pointer-events:none; z-index:200; display:none; font-family:'SF Mono',monospace; }

/* ── Footer ── */
.footer {
    text-align: center;
    padding: 2rem;
    font-size: 0.8rem;
    color: #999;
}
.footer a { color: #2471A3; text-decoration: none; }
.footer a:hover { text-decoration: underline; }

/* ── Responsive ── */
@media (max-width: 768px) {
    .header { padding: 0.6rem 0.8rem; }
    .header h1 { font-size: 1.2rem; }
    .header-links { gap: 0.4rem; }
    .header-links a { font-size: 0.72rem; padding: 0.15rem 0.4rem; }
    .container { padding: 0.75rem; }
    .card, .result-card { padding: 0.6rem 0.8rem; border-radius: 8px; overflow-x: auto; }
    .result-card h2 { font-size: 1rem; }
    .map-row { flex-wrap: wrap; justify-content: center; }
    canvas { max-width: 100%; height: auto; }
    .data-table th, .data-table td { white-space: nowrap; padding: 0.3rem 0.5rem; font-size: 0.75rem; }
    #viewer3d-frame { height: 400px !important; }
    .script-preview { font-size: 0.68rem; max-height: 250px; overflow-x: auto; }
    .seq-blocks { font-size: 0.68rem; }
    .seq-res { width: 0.6em; }
    .seq-num { font-size: 0.62rem; width: 28px; }
    .download-row { flex-direction: column; }
    .btn-download { width: 100%; text-align: center; }
    .colorbar-labels { width: 100%; max-width: 300px; }
    .color-section { gap: 0.8rem; }
    .color-group { min-width: 140px; }
    .preset-chip { font-size: 0.72rem; padding: 0.25rem 0.5rem; }
}