/* ============================================================
   NewSO Sim Finder — site theme layer (Phase 1 redesign)
   Loaded AFTER style.css; overrides the old TSO-blue skin with
   the site design system. Color values per mode are applied by
   siteColorMode() in function.js — keep the two in sync.
   ============================================================ */

/* Default (pre-JS) palette: matches the "lightmode" set in
   siteColorMode() so there is no flash of the old skin. */
:root {
    --bg-fallback: #f7f6fb;
    --sim-font: #241b3a;
    --sim-offline-font: #8d86a5;
    --list-index-selected-bg: #ff6b9d;
    --inset-bg: #f1eff7;
    --inset-bg-dark: #e9e6f2;
    --block-gradient-light: #ffffff;
    --block-gradient-dark: #ffffff;
    --outset-title-bg: #2b1a52;
    --bg-dark-gradient-light: #f7f6fb;
    --bg-dark-gradient-dark: #efedf6;
    --finder-line: #e5e1f0;
    --finder-pink: #ff6b9d;
    --finder-pink-dark: #ff4f8b;
    --finder-pink-deep: #d6336c;
}

/* ---------- Base ---------- */
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    text-shadow: none;
    font-size: 15px;
}

/* Keep the FreeSO font where it's charming, not everywhere */
.outset-title,
.inset-title,
.clock-text {
    font-family: 'FreeSO Font', 'Poppins', sans-serif;
    text-shadow: none;
}

/* ---------- Cards ---------- */
.block-background {
    border-radius: 14px;
    border: 1px solid var(--finder-line);
    box-shadow: 0 10px 30px rgba(26, 16, 51, 0.07);
}

.outset-title {
    background: var(--outset-title-bg);
    color: #fff;
    border-radius: 999px;
    padding: 6px 20px;
    box-shadow: none;
    border: none;
    letter-spacing: 0.02em;
}

.inset-title {
    background: var(--inset-bg-dark);
    color: var(--sim-font);
    border-radius: 10px;
    box-shadow: none;
    border: 1px solid var(--finder-line);
}

/* ---------- Intro banner ---------- */
.simfinder-page-copy {
    background: var(--block-gradient-light);
    border: 1px solid var(--finder-line);
    box-shadow: 0 10px 30px rgba(26, 16, 51, 0.07);
}

.simfinder-eyebrow { color: var(--finder-pink-deep); }

.simfinder-page-copy h1 { color: var(--sim-font); }

.simfinder-summary { color: var(--sim-offline-font); }

/* ---------- Inputs & buttons ---------- */
.search-bar {
    background: var(--block-gradient-light);
    color: var(--sim-font);
    border: 2px solid var(--finder-line);
    border-radius: 10px;
    box-shadow: none;
    font-family: 'Inter', sans-serif;
    padding: 8px 12px;
}

.search-bar:focus {
    outline: none;
    border-color: var(--finder-pink);
    box-shadow: 0 0 0 3px rgba(255, 107, 157, 0.15);
}

/* Sprite buttons become labeled text buttons */
.search-button,
.sort-button {
    background: var(--finder-pink) !important;
    background-image: none !important;
    width: auto;
    height: 38px;
    padding: 0 18px;
    border-radius: 10px;
    border: none;
    box-shadow: 0 6px 16px rgba(255, 107, 157, 0.3);
    color: #fff;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
    transform: none;
    transition: background 0.2s, transform 0.15s;
}

.search-button:hover,
.sort-button:hover {
    background: var(--finder-pink-dark) !important;
    background-image: none !important;
    transform: translateY(-1px);
}

.search-button:active,
.sort-button:active {
    background: var(--finder-pink-deep) !important;
    background-image: none !important;
}

.sort-button { position: static; }

.list-title-container {
    align-items: center;
    gap: 10px;
}

/* Bookmark import/export sprite arrows become labeled buttons */
.bookmark-button {
    background: none;
    border: none;
    padding: 0;
}

.export-arrow,
.import-arrow {
    background: var(--inset-bg-dark) !important;
    background-image: none !important;
    width: auto;
    height: 32px;
    padding: 0 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    border: 1px solid var(--finder-line);
    box-shadow: none;
    color: var(--sim-font);
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 0.82rem;
    cursor: pointer;
    transform: none;
    transition: border-color 0.2s, color 0.2s;
}

.export-arrow:hover,
.import-arrow:hover {
    background-image: none !important;
    border-color: var(--finder-pink);
    color: var(--finder-pink-deep);
}

.export-arrow:active,
.import-arrow:active { background-image: none !important; }

/* ---------- Lists ---------- */
.list-table {
    background: var(--inset-bg);
    border-radius: 10px;
    border: 1px solid var(--finder-line);
    box-shadow: none;
    font-family: 'Inter', sans-serif;
}

.sim-list-node-selected {
    background-color: var(--list-index-selected-bg);
    color: #fff;
}

.sim-in-lot-list-node-selected {
    background-color: var(--list-index-selected-bg);
    color: #fff;
}

/* ---------- Detail panels ---------- */
.thumbnail-desc-holder,
.thumbnail-bio-holder {
    background: var(--inset-bg);
    color: var(--sim-font);
    border-radius: 10px;
    border: 1px solid var(--finder-line);
    box-shadow: none;
    font-family: 'Inter', sans-serif;
}

/* ---------- Top strip (clock + jobs + SMO) ---------- */
.finder-topstrip {
    display: flex;
    align-items: stretch;
    gap: 14px;
    flex-wrap: wrap;
    max-width: 1500px;
    margin: 0 auto 16px;
}

.finder-topstrip .clock-bar-container {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0;
    padding: 14px 26px;
    min-width: 180px;
}

.finder-topstrip .div-market-watch {
    flex: 1;
    min-width: 320px;
    margin: 0;
    padding-bottom: 10px;
}

.finder-topstrip .smo-div {
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
}

/* ---------- Job schedule panel ---------- */
.job-schedule-tab {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    border-radius: 8px;
    border: 1px solid var(--finder-line);
    background: var(--inset-bg);
    color: var(--sim-font);
    cursor: pointer;
}

.job-schedule-tab.active {
    background: var(--finder-pink);
    border-color: var(--finder-pink);
    color: #fff;
}

/* ---------- SMO text ---------- */
.smo-text {
    font-family: 'Inter', sans-serif;
    color: var(--sim-font);
    text-shadow: none;
}

/* ---------- Scrollbars ---------- */
.scrollbar::-webkit-scrollbar { width: 9px; height: 9px; }

.scrollbar::-webkit-scrollbar-track { background: transparent; }

.scrollbar::-webkit-scrollbar-thumb {
    background: var(--sim-offline-font);
    border-radius: 999px;
}

.scrollbar::-webkit-scrollbar-thumb:hover { background: var(--finder-pink); }

/* ---------- Color mode toggle ---------- */
.colormode-toggle-container {
    border-radius: 999px;
}

/* ---------- Phase 2: master–detail layout ---------- */
.finder-app {
    position: static;
    display: grid;
    grid-template-columns: minmax(340px, 440px) minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

.finder-master,
.finder-detail {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

.finder-tabs {
    display: flex;
    gap: 6px;
    padding: 8px;
}

.finder-tab {
    flex: 1;
    padding: 10px 4px;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: var(--sim-font);
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 0.95rem;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

.finder-tab:hover { background: var(--inset-bg); }

.finder-tab.active {
    background: var(--finder-pink);
    color: #fff;
    box-shadow: 0 6px 16px rgba(255, 107, 157, 0.3);
}

.finder-placeholder {
    padding: 42px 24px;
    text-align: center;
    color: var(--sim-offline-font);
    font-family: 'Inter', sans-serif;
}

.finder-topstrip .job-schedule-panel {
    flex: 0 0 300px;
    margin: 0;
}

/* ---------- Small screens ---------- */
@media (max-width: 900px) {
    .finder-topstrip { margin: 0 0 14px; }
    .finder-topstrip .div-market-watch { min-width: 100%; }
    .finder-topstrip .job-schedule-panel { flex: 1 1 100%; }
    .finder-app { grid-template-columns: 1fr; }
}