:root {
    --bg: #f6f5f2;
    --surface: #ffffff;
    --surface-2: #f0efe9;
    --border: #dedcd3;
    --text: #23221f;
    --text-secondary: #6b6a63;
    --text-muted: #9a988f;
    /* PricePulse brand green (#20c20e) darkened enough to keep white
       button/badge text at a readable contrast ratio — the true brand
       shade fails WCAG AA for white-on-accent text. */
    --accent: #158010;
    --navy: #06223b;
    --danger-bg: #fbe9e7;
    --danger-text: #a3341f;
    --warning-bg: #fdf1de;
    --warning-text: #8a5a12;
    --success-bg: #e8f1e6;
    --success-text: #2d6b2f;
    --radius: 8px;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.5;
}

.topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* No vertical padding — the logo's own height is what defines the
       bar's depth (matches TaskPulse's header, same technique: growing
       the logo eats the padding that used to sit around it, rather than
       adding to the bar's total depth). */
    padding: 0 20px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
    gap: 10px;
    position: relative;
}

.brand {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}
.brand-logo {
    /* Same 120px height and zero-topbar-padding technique as PricePulse's
       and TaskPulse's own logos, for a consistent header depth across the
       whole app family. */
    height: 120px;
    width: auto;
    display: block;
}

nav { display: flex; align-items: center; gap: 16px; }
nav a { text-decoration: none; color: var(--text-secondary); font-size: 14px; padding-bottom: 3px; border-bottom: 2px solid transparent; }
nav a:hover { color: var(--text); }
nav a.active { color: var(--text); font-weight: 700; border-bottom-color: var(--accent); }
nav a.nav-cta.active { box-shadow: inset 0 0 0 2px #fff; border-bottom-color: transparent; }
.nav-user { font-size: 13px; color: var(--text-muted); }
.admin-banner {
    font-size: 13px;
    font-weight: 600;
    color: var(--warning-text);
    background: var(--warning-bg);
    padding: 4px 10px;
    border-radius: var(--radius);
}
.nav-cta {
    background: var(--accent);
    color: #fff !important;
    padding: 8px 14px;
    border-radius: var(--radius);
}

.nav-toggle {
    display: none;
    background: none;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    width: 40px;
    height: 40px;
    padding: 0;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.nav-toggle-bars {
    position: relative;
    display: block;
    width: 20px;
    height: 2px;
    background: var(--text);
    border-radius: 2px;
}
.nav-toggle-bars::before,
.nav-toggle-bars::after {
    content: "";
    position: absolute;
    left: 0;
    width: 20px;
    height: 2px;
    background: var(--text);
    border-radius: 2px;
}
.nav-toggle-bars::before { top: -6px; }
.nav-toggle-bars::after { top: 6px; }

@media (max-width: 640px) {
    .nav-toggle { display: inline-flex; }
    nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        background: var(--surface);
        border-bottom: 1px solid var(--border);
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12);
        padding: 8px 0;
        z-index: 20;
    }
    nav.nav-open { display: flex; }
    nav a {
        padding: 14px 20px;
        border-bottom: none;
        border-left: 3px solid transparent;
    }
    nav a.active { border-left-color: var(--accent); background: var(--surface-2); }
    nav a.nav-cta { margin: 8px 20px; border-radius: var(--radius); }
    nav a.nav-cta.active { box-shadow: none; }
    .nav-user, .admin-banner {
        display: block;
        padding: 10px 20px;
    }

    /* Touch targets: comfortable ~44px tap height for the primary
       interactive controls once fingers, not a mouse cursor, are doing
       the pointing. */
    .button { padding: 11px 16px; min-height: 44px; box-sizing: border-box; }
    .badge { padding: 6px 12px; }

    /* Slightly larger key numbers/headings for at-arm's-length glancing. */
    h1 { font-size: 24px; }
    .metric-value { font-size: 26px; }

    .product-table { font-size: 13px; }
    .product-table th, .product-table td { padding: 8px 10px; }
}

.container {
    max-width: 720px;
    margin: 0 auto;
    padding: 20px 16px 60px;
}

h1 { font-size: 22px; margin: 0 0 4px; }
.muted { color: var(--text-secondary); font-size: 14px; margin: 0 0 20px; }

.page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 16px;
}

.metric-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
    margin-bottom: 24px;
}
.metric-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
.metric-label { font-size: 13px; color: var(--text-secondary); margin: 0 0 4px; }
.metric-value { font-size: 24px; font-weight: 600; margin: 0; }
.metric-value.warn { color: var(--warning-text); }

.section-label {
    font-size: 13px;
    color: var(--text-secondary);
    margin: 24px 0 8px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.search-bar { display: flex; gap: 8px; margin-bottom: 16px; }
.search-bar input {
    flex: 1;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 14px;
}

.list-block {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}

.chart-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px;
    margin-bottom: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.table-wrap {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    /* Bounded height with scroll on both axes inside this box, not the
       whole page — so if the table is wider than the screen, the
       horizontal scrollbar sits right below the visible rows, not at
       the bottom of a possibly very long list you'd have to scroll the
       whole page to reach. */
    max-height: 70vh;
    overflow: auto;
    /* Scroll-shadow cue: two gradients scroll with the content (fading
       the edge to the surface color once you've scrolled past it) and
       two stay fixed (a faint shadow that only reads as visible where
       there's actually more off-screen to the side) — a standard
       CSS-only pattern for signalling horizontal overflow without JS. */
    background:
        linear-gradient(to right, var(--surface) 30%, rgba(255, 255, 255, 0)),
        linear-gradient(to left, var(--surface) 30%, rgba(255, 255, 255, 0)) 100% 0,
        linear-gradient(to right, rgba(0, 0, 0, 0.10), rgba(0, 0, 0, 0)),
        linear-gradient(to left, rgba(0, 0, 0, 0.10), rgba(0, 0, 0, 0)) 100% 0;
    background-repeat: no-repeat;
    background-color: var(--surface);
    background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
    background-attachment: local, local, scroll, scroll;
}
.product-table { width: 100%; border-collapse: collapse; font-size: 14px; white-space: nowrap; }
.product-table th, .product-table td { padding: 10px 14px; text-align: left; }
.product-table .col-product { white-space: normal; min-width: 160px; }
.product-table thead th {
    position: sticky;
    top: 0;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-secondary);
}
.product-table thead th a { color: inherit; text-decoration: none; }
.product-table thead th a:hover { color: var(--text); }
.sort-arrow { font-size: 10px; color: var(--accent); }
.product-table tbody tr:not(:last-child) td { border-bottom: 1px solid var(--border); }
.row-title-link { color: var(--text); font-weight: 500; text-decoration: none; }
.row-title-link:hover { text-decoration: underline; }

.trend { font-weight: 600; white-space: nowrap; }
.trend-up { color: var(--danger-text); }
.trend-down { color: var(--success-text); }
.trend-same { color: var(--text-muted); font-weight: 400; }

.row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
}
.row:last-child { border-bottom: none; }
.row.muted-row { opacity: 0.6; }
.row-main { flex: 1; min-width: 180px; }
.row-title { font-weight: 500; margin: 0; font-size: 15px; }
.row-sub { font-size: 13px; color: var(--text-muted); margin: 3px 0 0; }
.app-logo { height: 56px; width: auto; display: block; margin-bottom: 6px; }
.badge-danger-text { color: var(--danger-text); }

.badge {
    font-size: 12px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: var(--radius);
    white-space: nowrap;
}
.badge-danger { background: var(--danger-bg); color: var(--danger-text); }
.badge-success { background: var(--success-bg); color: var(--success-text); }
.badge-neutral { background: var(--surface-2); color: var(--text-secondary); }

.button {
    display: inline-block;
    padding: 8px 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text);
    text-decoration: none;
    font-size: 14px;
    cursor: pointer;
}
.button.primary {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}
.button-disabled {
    opacity: 0.4;
    cursor: default;
}

.upgrade-options {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 12px;
}
.upgrade-options form { margin: 0; }

.pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 20px;
}
.pager-status { font-size: 14px; color: var(--text-secondary); }

.callout {
    border-radius: var(--radius);
    padding: 12px 16px;
    margin-bottom: 20px;
    font-size: 14px;
}
.callout-success { background: var(--success-bg); color: var(--success-text); }

.form-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-width: 480px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
.form-card label { display: block; font-size: 13px; color: var(--text-secondary); margin-top: 10px; }
.form-card input, .form-card select, .form-card textarea {
    /* Labels and controls sit inside plain block-flow wrapper divs in a
       couple of forms (e.g. history.html's category-fields toggle), not
       always as direct flex children of .form-card itself — without an
       explicit display/width here, a <label> (inline by default) and a
       <select> (inline-block) just run on next to each other like text
       instead of stacking, which is what was making these forms look
       broken rather than merely plain. */
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 14px;
    font-family: inherit;
    resize: vertical;
}
.form-card button { margin-top: 18px; }

.dropzone {
    border: 2px dashed var(--border);
    border-radius: var(--radius);
    padding: 28px 16px;
    text-align: center;
    cursor: pointer;
    background: var(--surface-2);
    transition: border-color 0.15s, background 0.15s;
}
.dropzone:hover { border-color: var(--accent); }
.dropzone.dropzone-active { border-color: var(--accent); background: var(--success-bg); }
.dropzone p { margin: 4px 0; }

.mapping-row-form { margin-bottom: 14px; }
.mapping-row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.mapping-fields { display: flex; flex-direction: column; gap: 4px; min-width: 220px; }
.mapping-fields label { font-size: 12px; color: var(--text-secondary); }
.mapping-fields input, .mapping-fields select {
    padding: 7px 9px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 14px;
}
.size-fields { display: flex; gap: 6px; }
.size-fields input { width: 90px; }
.size-fields select { flex: 1; }

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text-secondary);
    margin-top: 10px;
}
.checkbox-label input[type="checkbox"] { width: auto; }

.empty-state {
    text-align: center;
    padding: 60px 20px;
}

.flash {
    background: var(--warning-bg);
    color: var(--warning-text);
    border-radius: var(--radius);
    padding: 12px 16px;
    margin-bottom: 20px;
    font-size: 14px;
}

@media (max-width: 480px) {
    .metric-grid { grid-template-columns: 1fr 1fr; }
    .row { flex-direction: column; align-items: flex-start; }
}