/* ============================================================================
   Housing Scout — warm editorial design system
   Cream page + near-white cards that lift on soft shadows, forest-green accents,
   terracotta actions, Fraunces serif for display type.
   ============================================================================ */
:root {
    --bg: #ece5d3;              /* page background (warm cream) */
    --surface: #fdfbf6;         /* cards — near-white, clearly above the page */
    --surface-sunken: #f2ece0;  /* recessed panels/inputs */
    --sidebar: #f5f0e4;         /* sidebar — a hair lighter than page, hairline divider */
    --console: #232f22;         /* activity log (dark forest green) */

    --border: rgba(58, 48, 30, 0.13);
    --border-strong: rgba(58, 48, 30, 0.22);

    --ink: #2a2620;             /* primary text (warm near-black) */
    --ink-soft: #6a6252;        /* secondary */
    --ink-faint: #9c9482;       /* muted / placeholder */

    --terracotta: #b0502f;
    --terracotta-deep: #8f3d22;
    --forest: #34503b;          /* green accent */
    --forest-soft: rgba(52, 80, 59, 0.12);
    --danger: #9b3527;
    --danger-soft: rgba(155, 53, 39, 0.10);
    --gold: #9a7326;
    --gold-soft: rgba(154, 115, 38, 0.12);

    --serif: 'Fraunces', Georgia, 'Times New Roman', serif;
    --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --mono: 'Fira Code', ui-monospace, monospace;

    --shadow-sm: 0 1px 2px rgba(58,48,30,0.05), 0 1px 3px rgba(58,48,30,0.08);
    --shadow-md: 0 6px 18px -8px rgba(58,48,30,0.22);
    --radius: 14px;
    --ease: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);

    /* Back-compat aliases — login.html and help.html have inline styles that use the older
       token names. Keep these mapped so those standalone pages stay in sync with the theme. */
    --primary: var(--terracotta);
    --primary-hover: var(--terracotta-deep);
    --bg-dark: var(--bg);
    --bg-card: var(--surface);
    --bg-inset: var(--surface-sunken);
    --border-color: var(--border);
    --text-primary: var(--ink);
    --text-secondary: var(--ink-soft);
    --text-muted: var(--ink-faint);
    --success: var(--forest);
    --success-light: var(--forest-soft);
    --danger-light: var(--danger-soft);
    --shadow-premium: var(--shadow-md);
    --transition-smooth: var(--ease);
    --font-sans: var(--serif);
    --font-body: var(--sans);
    --font-mono: var(--mono);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    background-color: var(--bg);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    height: 100vh;
}

a { color: var(--terracotta); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---- Layout ---- */
.app-container { display: flex; height: 100vh; width: 100vw; overflow: hidden; }

.sidebar {
    width: 340px;
    flex-shrink: 0;
    background-color: var(--sidebar);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    padding: 26px 24px;
    overflow-y: auto;
}

.main-content {
    flex: 1;
    height: 100vh;
    overflow-y: auto;
    padding: 34px 40px;
    display: flex;
    flex-direction: column;
    gap: 22px;
}
.main-content > * { flex-shrink: 0; }

/* ---- Brand ---- */
.brand { display: flex; align-items: center; gap: 13px; margin-bottom: 30px; }
.brand-icon {
    font-size: 22px;
    color: var(--surface);
    background: var(--terracotta);
    width: 40px; height: 40px;
    border-radius: 11px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    box-shadow: var(--shadow-sm);
}
.brand-text h1 { font-family: var(--serif); font-size: 21px; font-weight: 600; letter-spacing: -0.2px; }
.brand-text p { font-size: 11px; color: var(--ink-faint); letter-spacing: 0.3px; }

/* ---- Settings panel ---- */
.settings-panel > h2 {
    font-family: var(--sans);
    font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.8px;
    color: var(--ink-faint);
    margin-bottom: 22px;
    display: flex; align-items: center; gap: 8px;
}
.section-icon { color: var(--terracotta); }

.form-section { margin-bottom: 28px; }
.form-section-title {
    font-family: var(--sans);
    font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.7px;
    color: var(--ink-soft);
    margin-bottom: 14px; padding-bottom: 9px;
    border-bottom: 1px solid var(--border);
    display: flex; align-items: center; gap: 8px;
}
.form-section-title i { color: var(--terracotta); }

.form-group { margin-bottom: 18px; }
.form-group > label {
    display: block; font-size: 12px; font-weight: 600; color: var(--ink);
    margin-bottom: 5px;
}
.help-text { font-size: 11.5px; color: var(--ink-faint); margin-top: 5px; line-height: 1.5; }

input[type="number"], input[type="text"], textarea {
    width: 100%;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--ink);
    padding: 10px 13px;
    font-size: 13.5px;
    font-family: inherit;
    transition: var(--ease);
}
input[type="number"] { padding-left: 30px; }
textarea { resize: vertical; min-height: 44px; }
input:focus, textarea:focus {
    outline: none;
    border-color: var(--terracotta);
    box-shadow: 0 0 0 3px rgba(176,80,47,0.15);
}
input::placeholder, textarea::placeholder { color: var(--ink-faint); }

.input-with-icon { position: relative; display: flex; align-items: center; }
.input-icon { position: absolute; left: 12px; color: var(--ink-faint); font-size: 13px; }

/* ---- Toggle ---- */
.toggle-group {
    display: flex; justify-content: space-between; align-items: flex-start; gap: 14px;
    background: var(--surface);
    padding: 14px;
    border-radius: 12px;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
}
.toggle-label { flex: 1; }
.toggle-label > label { display: block; font-size: 13px; font-weight: 600; color: var(--ink); margin-bottom: 3px; }
.toggle-label .help-text { margin-top: 0; }
.toggle-switch { position: relative; display: inline-block; width: 42px; height: 24px; flex-shrink: 0; margin-top: 1px; }
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.slider {
    position: absolute; inset: 0; cursor: pointer;
    background: rgba(58,48,30,0.20); border-radius: 34px; transition: var(--ease);
}
.slider:before {
    content: ""; position: absolute; height: 18px; width: 18px; left: 3px; bottom: 3px;
    background: var(--surface); border-radius: 50%; transition: var(--ease);
    box-shadow: 0 1px 2px rgba(58,48,30,0.35);
}
input:checked + .slider { background: var(--terracotta); }
input:checked + .slider:before { transform: translateX(18px); }

/* ---- Search plan editor ---- */
.plans-empty-hint {
    font-size: 12px; color: var(--ink-faint); text-align: center; line-height: 1.5;
    padding: 16px; background: var(--surface-sunken);
    border: 1px dashed var(--border-strong); border-radius: 12px; margin-bottom: 12px;
}
.plan-editor-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px; padding: 15px; margin-bottom: 12px;
    box-shadow: var(--shadow-sm);
}
.plan-editor-row { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.plan-editor-row input[type="text"] { flex: 1; font-weight: 600; background: var(--surface-sunken); }
.plan-field-label { display: block; font-size: 11px; font-weight: 600; color: var(--ink-soft); margin-bottom: 6px; }
.plan-field-optional { color: var(--ink-faint); font-weight: 400; }
.plan-desc-input { margin-bottom: 12px; font-size: 13px; background: var(--surface-sunken); }
.plan-editor-card .input-with-icon input { background: var(--surface-sunken); }
.btn-icon-danger {
    flex-shrink: 0; width: 38px; height: 38px;
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent; color: var(--ink-faint);
    border: 1px solid var(--border); border-radius: 10px; cursor: pointer; transition: var(--ease);
}
.btn-icon-danger:hover { background: var(--danger); border-color: var(--danger); color: #fff; }

/* ---- Buttons ---- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 11px 18px; border-radius: 10px;
    font-family: var(--sans); font-size: 13.5px; font-weight: 600;
    cursor: pointer; border: 1px solid transparent; transition: var(--ease); white-space: nowrap;
}
.btn-primary { background: var(--terracotta); color: #fff; box-shadow: var(--shadow-sm); }
.btn-primary:hover:not(:disabled) { background: var(--terracotta-deep); }
.btn-secondary { background: var(--surface); color: var(--ink); border-color: var(--border-strong); }
.btn-secondary:hover:not(:disabled) { background: var(--surface-sunken); }
.btn-ghost { background: transparent; color: var(--terracotta); border: 1px dashed var(--border-strong); }
.btn-ghost:hover { background: rgba(176,80,47,0.07); border-color: var(--terracotta); }
.btn-block { width: 100%; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-text {
    background: none; border: none; color: var(--ink-faint); font-size: 12px; font-family: var(--sans);
    cursor: pointer; display: inline-flex; align-items: center; gap: 5px; transition: var(--ease);
}
.btn-text:hover { color: var(--ink); }

/* ---- Sidebar footer ---- */
.footer-info { margin-top: auto; padding-top: 20px; border-top: 1px solid var(--border); }
.account-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.account-email {
    display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--ink-soft);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 190px;
}
.account-email i { color: var(--terracotta); }

/* ---- Dashboard header ---- */
.dashboard-header { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; }
.welcome-box h2 { font-family: var(--serif); font-size: 32px; font-weight: 600; letter-spacing: -0.5px; line-height: 1.1; }
.welcome-box p { color: var(--ink-soft); font-size: 14px; margin-top: 6px; }
.header-actions { display: flex; gap: 10px; }

/* ---- Status strip ---- */
.status-strip {
    display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
    padding: 12px 18px;
    background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
    box-shadow: var(--shadow-sm);
}
.status-strip-left { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 500; color: var(--ink-soft); }
.status-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--ink-faint); flex-shrink: 0; }
.status-strip.running .status-dot { background: var(--forest); animation: pulse 1.5s infinite; }
.status-strip.running .status-strip-left { color: var(--forest); }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(52,80,59,0.4);} 70% { box-shadow: 0 0 0 6px rgba(52,80,59,0);} 100% { box-shadow: 0 0 0 0 rgba(52,80,59,0);} }

.summary-stats { display: flex; gap: 22px; }
.stat { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.15; }
.stat-num { font-family: var(--serif); font-size: 20px; font-weight: 600; color: var(--ink); }
.stat-label { font-size: 11px; color: var(--ink-faint); text-transform: uppercase; letter-spacing: 0.4px; }

/* ---- Subscribe banner ---- */
.subscribe-banner {
    display: flex; align-items: center; justify-content: space-between; gap: 20px;
    padding: 20px 22px; border-radius: var(--radius);
    background: linear-gradient(180deg, #fdfbf6, #f8f2e6);
    border: 1px solid rgba(176,80,47,0.30);
    box-shadow: var(--shadow-sm);
}
.subscribe-text h3 { font-family: var(--serif); font-size: 18px; font-weight: 600; margin-bottom: 3px; display: flex; align-items: center; gap: 9px; }
.subscribe-text h3 i { color: var(--terracotta); font-size: 15px; }
.subscribe-text p { font-size: 13px; color: var(--ink-soft); line-height: 1.5; max-width: 60ch; }

.cookie-issue-banner {
    display: flex; align-items: center; justify-content: space-between; gap: 20px;
    padding: 20px 22px; border-radius: var(--radius);
    background: linear-gradient(180deg, #fdfbf6, #f7e9e5);
    border: 1px solid rgba(155,53,39,0.30);
    box-shadow: var(--shadow-sm);
}
.cookie-issue-banner .subscribe-text h3 i { color: var(--danger); }

/* ---- Results / tabs ---- */
.results-section { min-height: 200px; }
.tabs-container { display: flex; gap: 6px; border-bottom: 1px solid var(--border); margin-bottom: 22px; flex-wrap: wrap; }
.tab-btn {
    background: none; border: none; color: var(--ink-faint);
    font-family: var(--sans); font-size: 14px; font-weight: 600;
    padding: 10px 14px; cursor: pointer; position: relative;
    display: inline-flex; align-items: center; gap: 8px; transition: var(--ease);
}
.tab-btn:hover { color: var(--ink); }
.tab-btn.active { color: var(--terracotta); }
.tab-btn.active:after { content: ""; position: absolute; bottom: -1px; left: 8px; right: 8px; height: 2px; background: var(--terracotta); border-radius: 2px; }
.tab-content { display: none; }
.tab-content.active { display: block; }

.listings-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 20px; }

/* ---- Empty state ---- */
.empty-state {
    grid-column: 1 / -1; text-align: center; padding: 64px 24px;
    color: var(--ink-faint); background: var(--surface-sunken);
    border: 1px dashed var(--border-strong); border-radius: var(--radius);
    display: flex; flex-direction: column; align-items: center;
}
.empty-state i { font-size: 40px; color: var(--border-strong); margin-bottom: 16px; }
.empty-state h3 { font-family: var(--serif); font-size: 19px; font-weight: 600; color: var(--ink-soft); margin-bottom: 6px; }
.empty-state p { font-size: 13px; max-width: 42ch; line-height: 1.5; }

/* ---- Listing card ---- */
.listing-card {
    display: flex; flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px;
    box-shadow: var(--shadow-sm);
    transition: var(--ease);
}
.listing-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.listing-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.listing-price { font-family: var(--serif); font-size: 18px; font-weight: 600; color: var(--terracotta); }
.match-pill {
    font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 20px;
    display: inline-flex; align-items: center; gap: 5px;
}
.match-high { background: var(--forest-soft); color: var(--forest); }
.match-mid { background: var(--gold-soft); color: var(--gold); }
.match-none { background: var(--surface-sunken); color: var(--ink-faint); }
.listing-title { font-family: var(--serif); font-size: 18px; font-weight: 600; line-height: 1.25; margin-bottom: 12px; color: var(--ink); }

.listing-meta { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-bottom: 14px; }
.listing-meta span { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-soft); }
.listing-meta i { color: var(--terracotta); font-size: 12px; width: 13px; text-align: center; }

.listing-verdict {
    font-size: 13px; color: var(--ink-soft); line-height: 1.55;
    padding-left: 12px; border-left: 2px solid var(--forest-soft);
    margin-bottom: 14px;
}
.listing-verdict strong { color: var(--forest); font-weight: 600; }

.listing-suggested-message {
    margin-bottom: 16px; padding: 12px; background: var(--gold-soft);
    border-radius: 10px; border: 1px solid rgba(154, 115, 38, 0.25);
}
.suggested-message-label {
    font-size: 11px; font-weight: 700; color: var(--gold); text-transform: uppercase;
    letter-spacing: 0.03em; margin-bottom: 6px; display: flex; align-items: center; gap: 6px;
}
.suggested-message-text { font-size: 13px; color: var(--ink-soft); line-height: 1.55; white-space: pre-wrap; margin-bottom: 10px; }
.copy-message-btn { font-size: 11.5px; }

.listing-original { margin-bottom: 16px; font-size: 12.5px; }
.listing-original summary {
    cursor: pointer; color: var(--ink-faint); font-weight: 600; list-style: none;
    display: inline-flex; align-items: center; gap: 6px; user-select: none;
}
.listing-original summary::-webkit-details-marker { display: none; }
.listing-original summary::before { content: "\f0da"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 10px; transition: var(--ease); }
.listing-original[open] summary::before { transform: rotate(90deg); }
.listing-original p {
    margin-top: 10px; padding: 12px; background: var(--surface-sunken);
    border-radius: 10px; color: var(--ink-soft); line-height: 1.55; white-space: pre-wrap;
    max-height: 160px; overflow-y: auto;
}

.listing-actions { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--border); }
.status-select {
    background: var(--surface-sunken); border: 1px solid var(--border); border-radius: 8px;
    color: var(--ink); padding: 6px 10px; font-size: 12px; font-family: var(--sans); cursor: pointer; outline: none;
}
.status-select:focus { border-color: var(--terracotta); }
.listing-links { display: flex; gap: 6px; }
.btn-quiet {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 6px 11px; border-radius: 8px; font-size: 12px; font-weight: 600;
    background: var(--surface-sunken); color: var(--ink-soft); border: 1px solid var(--border);
    cursor: pointer; transition: var(--ease); text-decoration: none;
}
.btn-quiet:hover { background: var(--bg); color: var(--ink); text-decoration: none; }
.btn-quiet.danger:hover { background: var(--danger); border-color: var(--danger); color: #fff; }

.listing-card.status-interested { border-left: 3px solid var(--forest); }
.listing-card.status-applied { border-left: 3px solid var(--terracotta); }
.listing-card.status-rejected { opacity: 0.6; }

/* ---- Activity log (collapsible) ---- */
.console-section {
    background: var(--console); border-radius: 12px; overflow: hidden;
    border: 1px solid rgba(0,0,0,0.2);
}
.console-header {
    width: 100%; display: flex; justify-content: space-between; align-items: center;
    padding: 13px 18px; background: none; border: none; cursor: pointer;
    color: #e9e2d1; font-family: var(--sans);
}
.console-title { font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 9px; }
.console-title i { color: #a9b8a0; }
.console-controls { display: flex; align-items: center; gap: 14px; }
.console-controls .btn-text { color: #a9b8a0; }
.console-controls .btn-text:hover { color: #fff; }
.console-chevron { color: #a9b8a0; font-size: 12px; transition: var(--ease); }
.console-section:not(.collapsed) .console-chevron { transform: rotate(180deg); }
.console-body {
    height: 190px; overflow-y: auto; padding: 4px 18px 16px;
    font-family: var(--mono); font-size: 12px; line-height: 1.65;
    display: flex; flex-direction: column; gap: 6px;
}
.console-section.collapsed .console-body { display: none; }
.log-line { border-left: 2px solid transparent; padding-left: 10px; color: #d7d0be; }
.log-info { color: #d7d0be; border-left-color: #4d5a45; }
.log-success { color: #93c9a4; border-left-color: var(--forest); }
.log-warning { color: #d9b072; border-left-color: var(--gold); }
.log-error { color: #e39b8f; border-left-color: var(--danger); }
.log-debug { color: #8f9784; font-style: italic; }

/* ---- Main footer ---- */
.main-footer { display: flex; justify-content: flex-end; padding-top: 4px; }
.main-footer a { font-size: 12px; color: var(--ink-faint); display: inline-flex; align-items: center; gap: 6px; }
.main-footer a:hover { color: var(--terracotta); text-decoration: none; }

/* ---- Scrollbars ---- */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(58,48,30,0.20); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: rgba(58,48,30,0.32); }

/* ---- Responsive ---- */
@media (max-width: 900px) {
    .app-container { flex-direction: column; height: auto; overflow: auto; }
    .sidebar { width: 100%; border-right: none; border-bottom: 1px solid var(--border); }
    .main-content { height: auto; padding: 24px 20px; }
    .dashboard-header { align-items: flex-start; }
}