/*
 * Shared dark theme for the Linksync static UI. Layered on top of Bootstrap 5
 * (loaded via CDN). Replaces the per-page <style> blocks from the old PHP UI.
 */
:root {
    --ls-bg: #020617;
    --ls-surface: #0f172a;
    --ls-surface-2: #1e293b;
    --ls-border: #1f2937;
    --ls-text: #e5e7eb;
    --ls-muted: #9ca3af;
    --ls-accent: #38bdf8;
}

body {
    background-color: var(--ls-bg);
    color: var(--ls-text);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    min-height: 100vh;
}

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

.navbar.ls-navbar {
    background-color: var(--ls-surface);
    border-bottom: 1px solid var(--ls-surface-2);
}

.navbar.ls-navbar .navbar-brand {
    font-weight: 600;
    color: #e2e8f0;
}

.navbar.ls-navbar .nav-link {
    color: var(--ls-muted);
}

.navbar.ls-navbar .nav-link:hover,
.navbar.ls-navbar .nav-link.active {
    color: var(--ls-text);
}

.card.ls-card {
    background-color: var(--ls-surface);
    border: 1px solid var(--ls-surface-2);
    border-radius: 0.75rem;
    box-shadow: 0 16px 32px rgba(15, 23, 42, 0.5);
}

.ls-card .card-header {
    background-color: transparent;
    border-bottom: 1px solid var(--ls-border);
    font-weight: 600;
}

.form-control,
.form-select {
    background-color: var(--ls-bg);
    border: 1px solid #374151;
    color: var(--ls-text);
}

.form-control:focus,
.form-select:focus {
    background-color: var(--ls-bg);
    color: var(--ls-text);
    border-color: var(--ls-accent);
    box-shadow: 0 0 0 0.2rem rgba(56, 189, 248, 0.25);
}

.form-control::placeholder {
    color: #64748b;
}

.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--ls-text);
    color: var(--ls-text);
}

.table > :not(caption) > * > * {
    border-bottom-color: var(--ls-border);
}

.table thead th {
    color: var(--ls-muted);
    font-weight: 500;
    border-bottom-color: var(--ls-surface-2);
}

.text-muted-ls {
    color: var(--ls-muted) !important;
}

.btn-gradient {
    background: linear-gradient(to right, #0ea5e9, #22c55e);
    border: none;
    color: #0b1120;
    font-weight: 600;
}

.btn-gradient:hover {
    filter: brightness(1.05);
    color: #0b1120;
}

.btn-purple {
    background: linear-gradient(to right, #7c3aed, #a855f7);
    border: none;
    color: #fff;
}

.btn-purple:hover {
    filter: brightness(1.05);
    color: #fff;
}

.hero-title {
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    background: linear-gradient(135deg, #e0f2fe 0%, #a5f3fc 50%, #67e8f9 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

pre.ls-result {
    background-color: var(--ls-surface);
    border: 1px solid var(--ls-surface-2);
    border-radius: 0.5rem;
    padding: 1rem 1.25rem;
    color: var(--ls-text);
    max-height: 380px;
    overflow: auto;
    font-size: 0.85rem;
}

.status-pill {
    font-size: 0.8rem;
    padding: 0.15rem 0.5rem;
    border-radius: 0.25rem;
    display: inline-block;
}
.status-pill.s-completed { background: #166534; color: #bbf7d0; }
.status-pill.s-processing,
.status-pill.s-matching,
.status-pill.s-parsing { background: #1e3a5f; color: #93c5fd; }
.status-pill.s-failed { background: #7f1d1d; color: #fecaca; }
.status-pill.s-default { background: #374151; color: #d1d5db; }

#toast-area {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 1080;
    max-width: 420px;
}

/* Bootstrap modals default to a light panel; match the app dark theme. */
.modal-content.ls-modal {
    background-color: var(--ls-surface);
    border: 1px solid var(--ls-surface-2);
    color: var(--ls-text);
}

.modal-content.ls-modal .modal-header {
    border-bottom-color: var(--ls-border);
}

.modal-content.ls-modal .modal-title {
    color: var(--ls-text);
}

.modal-content.ls-modal .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

.modal-content.ls-modal code {
    color: #bae6fd;
    background-color: var(--ls-bg);
    padding: 0.1rem 0.35rem;
    border-radius: 0.25rem;
    font-size: 0.85em;
}

.training-analysis .summary-grid {
    display: grid;
    gap: 0.35rem 1.5rem;
    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
    margin-bottom: 1rem;
    font-size: 0.9rem;
}

.training-analysis .summary-grid dt {
    color: var(--ls-muted);
    font-weight: 500;
    margin: 0;
}

.training-analysis .summary-grid dd {
    margin: 0 0 0.5rem;
    color: var(--ls-text);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.training-analysis .help-text {
    color: var(--ls-muted);
    font-size: 0.875rem;
    margin-bottom: 1.25rem;
}

.training-analysis .comparison-title {
    color: #f1f5f9;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.training-analysis .table-training {
    --bs-table-bg: var(--ls-bg);
    --bs-table-color: var(--ls-text);
    --bs-table-striped-bg: rgba(30, 41, 59, 0.65);
    --bs-table-hover-bg: rgba(56, 189, 248, 0.08);
    border: 1px solid var(--ls-border);
    border-radius: 0.5rem;
    overflow: hidden;
}

.training-analysis .table-training thead th {
    background-color: var(--ls-surface-2);
    color: #cbd5e1;
    border-bottom-color: var(--ls-border);
}

.training-analysis .table-training tbody tr.row-null td {
    color: var(--ls-muted);
}

.training-analysis .table-training td.num {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    color: #e2e8f0;
    white-space: nowrap;
}

.training-analysis .prob-val {
    border-bottom: 1px dotted #64748b;
    cursor: help;
}