/* ================================================================
   Marketplace Dashboard — Styles
   ================================================================

   Design language: clean, quiet, "modern SaaS" — Inter type, soft
   surfaces, indigo accent. Everything is driven by CSS custom
   properties so the whole UI has a light theme and an automatic
   dark theme (prefers-color-scheme) with zero JavaScript.

   Responsive strategy (mobile-first, fluid):
   - base styles target small phones (360–500px wide)
   - >= 560px  second column appears (large phones, foldable OUTER
     screens ~560–600px: Galaxy Z Fold, Pixel Fold, dual-screen)
   - >= 700px  controls go back on one row; admin cards pair up —
     this is the FOLDABLE UNFOLDED portrait width (~673px), and the
     layout must look complete here, not like a stretched phone
   - >= 900px   tablets / unfolded landscape
   - >= 1200px  desktop

   Grids use auto-fill/auto-fit minmax(), so when a foldable changes
   state (e.g. 414px -> 673px) the layout reflows instantly with no
   sticky state.

   Notched phones get safe-area insets (navbar, footer, login sheet)
   via env(safe-area-inset-*) with the viewport-fit=cover meta tag.
   ================================================================ */

/* --- 1. Design tokens ------------------------------------------ */

:root {
    color-scheme: light dark;

    --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: 'SF Mono', 'Fira Code', ui-monospace, monospace;

    /* Light theme */
    --bg: #f6f7f9;
    --bg-elevated: #ffffff;
    --bg-inset: #eef0f3;
    --text: #171c26;
    --text-muted: #5c6572;
    --border: #e2e5ea;
    --border-strong: #cdd2da;

    --accent: #4f46e5;
    --accent-hover: #4338ca;
    --accent-soft: #eef0fe;
    --accent-text: #4f46e5;

    --success: #059669;  --success-soft: #e7f6ef;  --success-text: #067a5b;
    --warning: #d97706;  --warning-soft: #fdf3e3;  --warning-text: #92600d;
    --danger:  #dc2626;  --danger-soft:  #fdecec;  --danger-text:  #b03030;

    --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.05);
    --shadow-md: 0 4px 12px -2px rgba(16, 24, 40, 0.08);
    --shadow-lg: 0 12px 28px -6px rgba(16, 24, 40, 0.12);

    --radius: 10px;
    --radius-lg: 14px;
    --nav-height: 58px;
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* Dark theme — automatic (prefers-color-scheme) OR explicit [data-theme="dark"] */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg: #0e1116;
        --bg-elevated: #151a22;
        --bg-inset: #1b212c;
        --text: #e2e6ee;
        --text-muted: #97a0b0;
        --border: #262d3a;
        --border-strong: #354052;

        --accent: #818cf8;
        --accent-hover: #9aa2fb;
        --accent-soft: rgba(129, 140, 248, 0.16);
        --accent-text: #a5adff;

        --success: #34d399;  --success-soft: rgba(52, 211, 153, 0.14);  --success-text: #6ee7b7;
        --warning: #fbbf24;  --warning-soft: rgba(251, 191, 36, 0.13);  --warning-text: #fcd34d;
        --danger:  #f87171;  --danger-soft:  rgba(248, 113, 113, 0.13); --danger-text:  #fca5a5;

        --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
        --shadow-md: 0 4px 12px -2px rgba(0, 0, 0, 0.5);
        --shadow-lg: 0 12px 28px -6px rgba(0, 0, 0, 0.6);
    }
}

:root[data-theme="dark"] {
    --bg: #0e1116;
    --bg-elevated: #151a22;
    --bg-inset: #1b212c;
    --text: #e2e6ee;
    --text-muted: #97a0b0;
    --border: #262d3a;
    --border-strong: #354052;

    --accent: #818cf8;
    --accent-hover: #9aa2fb;
    --accent-soft: rgba(129, 140, 248, 0.16);
    --accent-text: #a5adff;

    --success: #34d399;  --success-soft: rgba(52, 211, 153, 0.14);  --success-text: #6ee7b7;
    --warning: #fbbf24;  --warning-soft: rgba(251, 191, 36, 0.13);  --warning-text: #fcd34d;
    --danger:  #f87171;  --danger-soft:  rgba(248, 113, 113, 0.13); --danger-text:  #fca5a5;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 12px -2px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 12px 28px -6px rgba(0, 0, 0, 0.6);
}

:root[data-theme="light"] {
    --bg: #f6f7f9;
    --bg-elevated: #ffffff;
    --bg-inset: #eef0f3;
    --text: #171c26;
    --text-muted: #5c6572;
    --border: #e2e5ea;
    --border-strong: #cdd2da;

    --accent: #4f46e5;
    --accent-hover: #4338ca;
    --accent-soft: #eef0fe;
    --accent-text: #4f46e5;

    --success: #059669;  --success-soft: #e7f6ef;  --success-text: #067a5b;
    --warning: #d97706;  --warning-soft: #fdf3e3;  --warning-text: #92600d;
    --danger:  #dc2626;  --danger-soft:  #fdecec;  --danger-text:  #b03030;

    --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.05);
    --shadow-md: 0 4px 12px -2px rgba(16, 24, 40, 0.08);
    --shadow-lg: 0 12px 28px -6px rgba(16, 24, 40, 0.12);
}

/* --- 2. Reset & base ------------------------------------------- */

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

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    font-family: var(--font);
    background: var(--bg);
    color: var(--text);
    line-height: 1.6;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
}

::selection { background: var(--accent-soft); }

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 6px;
}

code {
    font-family: var(--font-mono);
    font-size: 0.9em;
    background: var(--bg-inset);
    padding: 1px 5px;
    border-radius: 5px;
}

/* --- 3. Navigation ---------------------------------------------- */

.navbar {
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: var(--nav-height);
    padding: 8px max(14px, env(safe-area-inset-right, 0px)) 8px max(14px, env(safe-area-inset-left, 0px));
    background: var(--bg-elevated);
    background: color-mix(in srgb, var(--bg-elevated) 82%, transparent);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border);
}

.nav-brand {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
}

.nav-logo {
    color: var(--accent);
    flex-shrink: 0;
}

.nav-title {
    font-size: 15px;
    font-weight: 650;
    letter-spacing: -0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 1;
    min-width: 0;
}

.nav-link {
    text-decoration: none;
    color: var(--text-muted);
    padding: 7px 12px;
    border-radius: 8px;
    font-size: 13.5px;
    font-weight: 550;
    white-space: nowrap;
    transition: color 0.15s, background 0.15s;
}

.nav-link:hover {
    color: var(--text);
    background: var(--bg-inset);
}

.nav-link.active {
    color: var(--accent-text);
    background: var(--accent-soft);
}

.nav-link--api {
    font-size: 12px;
    color: var(--text-muted);
}

/* "Signed in as …" chip */
.nav-identity {
    display: inline-flex;
    align-items: center;
    font-size: 12px;
    color: var(--text-muted);
    background: var(--bg-inset);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 4px 11px;
    max-width: 240px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Sign-out button */
.nav-signout {
    margin-left: 4px;
    padding: 7px 13px;
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 550;
    color: var(--text-muted);
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 8px;
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
}

.nav-signout:hover {
    color: var(--accent-text);
    border-color: var(--accent);
    background: var(--accent-soft);
}

.nav-signout:disabled { opacity: 0.6; cursor: default; }

/* Hamburger button — hidden on desktop, shown on mobile via the media query
   below. Three bars that morph into an X when the menu is open. */
.nav-burger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 10px;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 9px;
    cursor: pointer;
    flex-shrink: 0;
    touch-action: manipulation;
}

.nav-burger span {
    display: block;
    width: 100%;
    height: 2px;
    border-radius: 2px;
    background: var(--text);
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.navbar.menu-open .nav-burger span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
.navbar.menu-open .nav-burger span:nth-child(2) {
    opacity: 0;
}
.navbar.menu-open .nav-burger span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* --- 4. Main content & footer ----------------------------------- */

.main-content {
    flex: 1;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 20px 16px calc(20px + var(--safe-bottom));
}

.footer {
    text-align: center;
    padding: 14px 16px calc(14px + var(--safe-bottom));
    color: var(--text-muted);
    font-size: 12px;
    border-top: 1px solid var(--border);
}

/* --- 5. Flash messages ------------------------------------------ */

.flash-messages {
    max-width: 1400px;
    width: 100%;
    margin: 0 auto;
    padding: 0 16px;
}

.flash {
    padding: 11px 16px;
    border-radius: var(--radius);
    font-size: 14px;
    font-weight: 500;
    margin: 14px 16px 0;
}

.flash--success {
    background: var(--success-soft);
    color: var(--success-text);
    border: 1px solid var(--border);
}

.flash--error {
    background: var(--danger-soft);
    color: var(--danger-text);
    border: 1px solid var(--border);
}

.flash--warning {
    background: var(--warning-soft);
    color: var(--warning-text);
    border: 1px solid var(--border);
}

.flash--inline { margin: 0; padding: 6px 12px; }

/* --- 6. Buttons -------------------------------------------------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 9px 16px;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--bg-elevated);
    color: var(--text);
    font-family: inherit;
    font-size: 14px;
    font-weight: 550;
    cursor: pointer;
    touch-action: manipulation;
    transition: background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s, transform 0.06s;
}

.btn:hover {
    background: var(--bg-inset);
    box-shadow: var(--shadow-sm);
}

.btn:active { transform: translateY(1px); }

.btn:disabled { opacity: 0.55; cursor: default; }

.btn--primary {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}

.btn--primary:hover {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
}

.btn--danger {
    color: var(--danger);
    border-color: var(--danger);
}

.btn--danger:hover {
    background: var(--danger);
    color: #fff;
    border-color: var(--danger);
}

.btn--warning {
    color: var(--warning-text);
    border-color: var(--warning);
    background: var(--warning-soft);
}

.btn--warning:hover {
    background: var(--warning);
    color: #fff;
    border-color: var(--warning);
}

.btn--success {
    color: var(--success-text);
    border-color: var(--success);
    background: var(--success-soft);
}

.btn--success:hover {
    background: var(--success);
    color: #fff;
    border-color: var(--success);
}

.btn--sm {
    padding: 7px 13px;
    font-size: 13px;
}

.btn--block {
    width: 100%;
    min-height: 46px;
}

/* Google sign-in button (login page) */
.btn--google {
    background: var(--bg-elevated);
    color: var(--text);
    border: 1px solid var(--border-strong);
}

.btn--google:hover {
    background: var(--bg-inset);
    border-color: var(--accent);
}

.google-icon { flex-shrink: 0; }

/* --- 7. Dashboard: stats bar ------------------------------------- */

.stats-bar {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-bottom: 18px;
}

.stat {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px 16px;
    box-shadow: var(--shadow-sm);
}

.stat-number {
    display: block;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    color: var(--text);
}

.stat-label {
    font-size: 11.5px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 550;
}

.stat--active .stat-number { color: var(--accent-text); }
.stat--sold .stat-number { color: var(--success-text); }
.stat--value .stat-number { color: var(--warning-text); }

/* --- Metrics Time Filter --- */
.metrics-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    flex-wrap: wrap;
    gap: 10px;
}

.metrics-filter-group {
    display: inline-flex;
    gap: 4px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 3px;
}

.metrics-filter-btn {
    border: none;
    background: transparent;
    color: var(--text-muted);
    padding: 5px 13px;
    font-size: 12.5px;
    font-weight: 550;
    font-family: inherit;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s;
}

.metrics-filter-btn:hover {
    color: var(--text);
    background: var(--bg-hover);
}

.metrics-filter-btn.is-active {
    background: var(--accent);
    color: #ffffff;
    font-weight: 600;
}

/* --- 8. Dashboard: toolbar --------------------------------------- */

.toolbar {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: stretch;
    margin-bottom: 14px;
    gap: 10px;
}

.toolbar-left, .toolbar-right {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.search-input {
    flex: 1 1 100%;
    min-width: 0;
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: 9px;
    font-family: inherit;
    font-size: 14px;
    background: var(--bg-elevated);
    color: var(--text);
}

.search-input::placeholder { color: var(--text-muted); }

.search-input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

.filter-select {
    flex: 1 1 auto;
    min-width: 0;
    padding: 9px 34px 9px 13px;
    border: 1px solid var(--border);
    border-radius: 9px;
    font-family: inherit;
    font-size: 14px;
    background: var(--bg-elevated);
    color: var(--text);
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23888'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
}

.filter-select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

/* --- 9. Dashboard: listing grid & cards -------------------------- */

.listing-grid {
    display: grid;
    /* Fluid: 1 col on phones, 2 on wide phones / unfolded foldables,
       3–4 on tablets/desktops — reflows instantly across fold states */
    grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
    gap: 14px;
}

/* Screen-reader-only text, for icon buttons that carry no visible label. */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* -- Card density toggle ------------------------------------------------ */

.view-toggle {
    display: inline-flex;
    border: 1px solid var(--border-strong);
    border-radius: 6px;
    overflow: hidden;
}

.view-toggle-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* A comfortable tap target on a phone, where this is the whole point. */
    min-width: 34px;
    min-height: 30px;
    padding: 0 7px;
    background: transparent;
    border: 0;
    cursor: pointer;
    color: var(--text-muted);
}

.view-toggle-btn + .view-toggle-btn {
    border-left: 1px solid var(--border-strong);
}

.view-toggle-btn svg {
    width: 14px;
    height: 14px;
    fill: currentColor;
}

.view-toggle-btn:hover {
    background: var(--bg-inset);
    color: var(--text);
}

.view-toggle-btn[aria-pressed="true"] {
    background: var(--accent);
    color: #ffffff;
}

/* The compact grid. Cards are allowed to shrink well below their comfortable
   width so a phone fits two across instead of one: the point is to see more of
   the inventory per screen rather than to read any one card in full. The image
   goes square because at this width a 4:3 crop leaves almost no room for the
   text beneath it. */
body[data-card-view="compact"] .listing-grid {
    grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr));
    gap: 8px;
}

body[data-card-view="compact"] .card-image {
    aspect-ratio: 1 / 1;
}

body[data-card-view="compact"] .listing-card .card-cost-line {
    font-size: 12px;
}

/* The profit still leads, just at the compact scale. */
body[data-card-view="compact"] .listing-card .card-actual-profit {
    font-size: 14px;
}

body[data-card-view="compact"] .listing-card .card-title {
    font-size: 12px;
    /* Two lines keeps card heights even in a dense grid, where a ragged mix of
       one and three line titles makes the rows look broken. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* -- Back to top --------------------------------------------------------- */

.back-to-top {
    position: fixed;
    right: 18px;
    /* Clears the iOS home indicator and the Android gesture bar. */
    bottom: calc(18px + env(safe-area-inset-bottom, 0px));
    z-index: 60;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--border-strong);
    background: var(--bg-elevated);
    color: var(--text);
    box-shadow: var(--shadow-md);
    cursor: pointer;
    transition: opacity 0.18s, transform 0.18s;
}

.back-to-top[hidden] {
    display: none;
}

.back-to-top svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
}

.back-to-top:hover {
    background: var(--bg-inset);
    transform: translateY(-2px);
}

.listing-card {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
    position: relative;
}

.listing-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: var(--border-strong);
}

/* A sold item is finished, so its card is outlined in green and its corner folded
   back. Both are decoration: nothing is hidden, and the profit is still the
   loudest thing on the card.

   An outline rather than another box-shadow, because the card already uses
   box-shadow for its elevation and, when grouped, for the stacked-cards effect —
   a green ring must not silently replace either of those. Outline also follows
   the border radius and costs no layout. */
.listing-card--sold {
    border-color: var(--success);
    outline: 1px solid var(--success);
    outline-offset: -1px;
}

/* Keep the green on hover: .listing-card:hover is a class plus a pseudo-class, so
   it outranks the rule above and would otherwise revert the border. */
.listing-card--sold:hover {
    border-color: var(--success);
}

/* The fold. A hard gradient stop draws the turned-back flap in the success
   colour; a second gradient draws the crease along that diagonal. The crease is
   what does the work — without it a triangle of colour just reads as a wedge
   rather than paper turned back. */
.listing-card--sold::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 34px;
    height: 34px;
    pointer-events: none;
    background:
        linear-gradient(225deg,
            transparent 46%, rgba(0, 0, 0, 0.35) 50%, transparent 54%),
        linear-gradient(225deg,
            var(--success) 0 50%, var(--bg-elevated) 50% 100%);
}

.card-platform-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    color: var(--text-muted);
    box-shadow: var(--shadow-sm);
}

.card-image {
    aspect-ratio: 4/3;
    overflow: hidden;
    background: var(--bg-inset);
}

.card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}

.listing-card:hover .card-image img { transform: scale(1.05); }

/* Card body: a single vertical stack with one consistent gap, so title, price,
   cost hint, flags, metrics and the team footer line up across every card
   instead of each element carrying its own ad-hoc margins. */
.card-body {
    padding: 13px 14px 14px;
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.card-title {
    font-size: 14px;
    font-weight: 600;
    margin: 0;
    line-height: 1.35;
    /* Reserve two lines so one-line and two-line titles keep the price and the
       rows below aligned between neighbouring cards. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.7em;
}

.card-price {
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
    color: var(--text);
    margin: 0;
}

/* Cost / profit hint under the price. */
.card-cost-line {
    font-size: 11.5px;
    color: var(--text-muted);
    margin: 0;
}

/* The marketplace fee that came off a completed sale, kept muted: it explains
   why the payout is lower than the sale price. */
.card-fees-note {
    color: var(--text-muted);
}

/* The bottom line of a sale. Set larger and heavier than the workings beside it
   (payout and costs, at 11.5px) because it is the figure being looked for — the
   other two are only there to show how it was reached.
   
   It gets its own line: inline, a long payout or cost pushed it onto a wrap of
   its own anyway on narrow cards, so the layout was inconsistent between cards. */
.card-actual-profit {
    display: block;
    margin-top: 2px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
}

/* The payout and costs workings, above the profit. */
.card-cost-working {
    display: block;
}

/* An estimated platform fee on a listing that has not sold yet. Muted, and
   worded as an estimate, because it is derived from this account's past fees
   rather than quoted by the platform. */
.card-est-fee {
    color: var(--text-muted);
    font-style: italic;
}

/* Sale economics in the detail modal: what the buyer paid, what the marketplace
   took, what actually arrived, and the deductions that turn it into profit. */
.detail-sale-economics {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px 10px;
    margin-bottom: 12px;
    border-radius: 6px;
    background: var(--bg-elevated);
    border: 1px solid var(--accent);
    font-size: 12px;
    color: var(--text-muted);
}

/* Each line reads left to right as a sum: the money in, then the deductions,
   then the result. */
.detail-sale-line {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
}

.detail-sale-economics strong {
    color: var(--text);
}

/* "Got it free" toggle under the cost field in the detail modal. */
.cost-free-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    user-select: none;
}

.cost-free-toggle input[type="checkbox"] {
    width: 14px;
    height: 14px;
    margin: 0;
    accent-color: var(--accent);
    cursor: pointer;
}

/* The amount field is disabled while "free" is ticked, so make that obvious
   rather than leaving it looking editable. */
.detail-purchase-price-input:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Status badges and flags (status, group, no-cost) share one wrapping row. */
.card-flags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

/* Engagement stats get their own row, so the boxes always sit side by side
   rather than being spread apart by the other chips. */
.card-metrics {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* Team attribution, separated by a hairline rule. */
.card-footer {
    display: flex;
    align-items: center;
    padding-top: 9px;
    border-top: 1px solid var(--border);
}

.card-status {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.card-status--active { background: var(--success-soft); color: var(--success-text); }
.card-status--sold { background: var(--warning-soft); color: var(--warning-text); }
.card-status--written_off, .card-status--written-off { background: var(--danger-soft); color: var(--danger-text); border: 1px solid rgba(220, 38, 38, 0.25); }
.card-status--draft { background: var(--bg-inset); color: var(--text-muted); }
.card-status--expired { background: var(--danger-soft); color: var(--danger-text); }
.card-status--unknown { background: var(--bg-inset); color: var(--text-muted); }

/* Free-shipping badge. Blue and sentence-case rather than the uppercase status
   pills: it is a term of the listing you chose, not a state it is in, and it
   should not read as another status alongside "Active". */
.card-chip--freeship {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    background: rgba(59, 130, 246, 0.14);
    color: #60a5fa;
    border: 1px solid rgba(59, 130, 246, 0.3);
}

/* "No Cost" flag: a listing with no purchase price recorded.
   Amber, not red: this is missing information to fill in, not a failure. */
.card-status--missing-cost {
    background: var(--warning-soft);
    color: var(--warning-text);
    border: 1px dashed rgba(217, 119, 6, 0.55);
}

/* Group chip: the same item linked across marketplaces. */
.card-status--group {
    background: var(--accent-soft);
    color: var(--accent-text);
}

/* Grouped card: a linked-item accent edge plus a fanned stack of two cards
   behind it, so a group reads as several listings piled together. The stack is
   drawn with box-shadow (not clipped by the card's overflow) and kept within the
   grid gap. */
.listing-card--group {
    border-left: 3px solid var(--accent);
    box-shadow:
        var(--shadow-sm),
        5px 5px 0 -1px var(--bg-elevated),
        5px 5px 0 0 var(--border-strong),
        10px 10px 0 -1px var(--bg-elevated),
        10px 10px 0 0 var(--border-strong);
}

.listing-card--group:hover {
    box-shadow:
        var(--shadow-md),
        5px 5px 0 -1px var(--bg-elevated),
        5px 5px 0 0 var(--border-strong),
        10px 10px 0 -1px var(--bg-elevated),
        10px 10px 0 0 var(--border-strong);
}

/* Sold on one channel, still live elsewhere — actionable, so it gets an alert
   stripe rather than a muted hint. */
.card-delist-alert {
    font-size: 11.5px;
    line-height: 1.35;
    color: var(--danger-text);
    background: var(--danger-soft);
    border: 1px solid rgba(220, 38, 38, 0.25);
    border-radius: 6px;
    padding: 5px 8px;
    margin: 0;
    font-weight: 550;
}

/* The replaced profit line on a card with no COGS. Muted, because the absence
   of a number is the point: showing a profit here would be misleading. */
.card-cost-missing {
    font-size: 11.5px;
    color: var(--warning-text);
    margin: 0;
    font-style: italic;
}

/* A subtle left edge so flagged cards are scannable in a grid. */
.listing-card--missing-cost {
    border-left: 3px solid rgba(217, 119, 6, 0.65);
}

/* "Missing cost" toolbar filter */
.filter-check {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-elevated);
    font-size: 13px;
    color: var(--text);
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

.filter-check:hover {
    border-color: var(--accent);
}

.filter-check input[type="checkbox"] {
    width: 14px;
    height: 14px;
    margin: 0;
    accent-color: var(--accent);
    cursor: pointer;
}

/* --- "Listed On" platform selector chips -------------------------
   Replaces a grid of bare checkboxes whose labels were all different widths,
   which read as scrambled. Each chip is a uniform, tappable card with the
   platform name and a stable checkmark. */
.platforms-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 8px;
    padding: 10px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.platform-chip {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 11px;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--bg-elevated);
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    min-height: 42px;
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}

/* The native checkbox is hidden but stays in the DOM for form submission and
   the save handlers, which read .detail-platform-cb:checked etc. */
.platform-chip input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}

.platform-chip-label {
    flex: 1;
    min-width: 0;
    font-size: 12.5px;
    font-weight: 650;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.platform-chip-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--bg-inset);
    color: transparent;
    font-size: 11px;
    flex-shrink: 0;
    transition: background 0.15s, color 0.15s;
}

.platform-chip:has(input:checked) {
    border-color: var(--accent);
    background: var(--accent-soft);
    box-shadow: 0 0 0 1px var(--accent);
}

.platform-chip:has(input:checked) .platform-chip-check {
    background: var(--accent);
    color: #fff;
}

/* On narrow phones, two columns is cleaner than a single overflowing column. */
@media (max-width: 640px) {
    .platforms-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Grouping selection mode */
.group-action-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    margin-top: 10px;
    background: var(--accent-soft);
    border: 1px solid var(--accent);
    border-radius: var(--radius);
    font-size: 13px;
    color: var(--accent-text);
    flex-wrap: wrap;
}

.listing-card--selectable {
    cursor: pointer;
}

.listing-card--selected {
    outline: 3px solid var(--accent);
    outline-offset: 2px;
}

/* Drag-to-group: cards are draggable; touch-action: pan-y lets a vertical swipe
   scroll the page while a hold + horizontal drag is handed to pointer events.
   user-select and -webkit-user-drag stop the browser's native image/text drag
   and selection from hijacking the gesture. */
.listing-card {
    touch-action: pan-y;
    user-select: none;
    -webkit-user-select: none;
}

.listing-card img {
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
    user-drag: none;
}

.listing-card--dragging {
    opacity: 0.45;
}

.listing-card--drop-target {
    outline: 3px solid var(--accent);
    outline-offset: 2px;
}

.drag-ghost {
    position: fixed;
    z-index: 3000;
    pointer-events: none;
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 300px;
    padding: 8px;
    border-radius: 10px;
    background: var(--bg-elevated);
    border: 1px solid var(--accent);
    color: var(--text);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
    transform: rotate(-2deg) scale(1.04);
}

.drag-ghost-img {
    flex: 0 0 46px;
    width: 46px;
    height: 46px;
    object-fit: cover;
    border-radius: 6px;
    background: var(--bg-muted);
}

.drag-ghost-body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.drag-ghost-title {
    font-size: 12px;
    font-weight: 600;
    line-height: 1.25;
    max-width: 220px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.drag-ghost-price {
    font-size: 12px;
    font-weight: 700;
    color: var(--accent);
}

.card-select-check {
    position: absolute;
    top: 8px;
    left: 8px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--bg-elevated);
    border: 2px solid var(--border-strong);
    color: #fff;
    font-size: 13px;
    line-height: 18px;
    text-align: center;
    display: none;
    pointer-events: none;
}

.listing-card--grouping-mode .card-select-check {
    display: block;
}

.listing-card--grouping-mode.listing-card--selected .card-select-check {
    background: var(--accent);
    border-color: var(--accent);
}

/* Team name chip on listing cards */
.card-team {
    display: inline-block;
    font-size: 11px;
    font-weight: 550;
    color: var(--accent-text);
    background: var(--accent-soft);
    border-radius: 999px;
    padding: 2px 9px;
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Engagement stats (views / watchers / favorites). Deliberately rectangular with
   a strong border, unlike the rounded status pills, so they read as data boxes
   and stand apart from the alerts. flex:1 makes a pair share the row evenly,
   which is what keeps them side by side. */
.card-metric {
    display: inline-flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 6px;
    flex: 1 1 0;
    min-width: 0;
    padding: 4px 8px;
    border-radius: 5px;
    background: var(--bg);
    border: 1.5px solid var(--border-strong);
    white-space: nowrap;
}

.card-metric-label {
    font-size: 9.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
}

.card-metric-value {
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}

/* --- 10. Pagination ----------------------------------------------- */

.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin-top: 22px;
    padding-bottom: 8px;
}

.pagination-info {
    font-size: 13px;
    color: var(--text-muted);
}

/* --- 11. Login page ------------------------------------------------ */

.login-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    min-height: calc(100vh - 200px);
    min-height: calc(100dvh - 200px);
    padding: 10px 0;
}

.login-card {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 32px 22px;
    width: 100%;
    max-width: 400px;
    margin: 0 16px;
    box-shadow: var(--shadow-lg);
    text-align: center;
}

.login-card h1 {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-bottom: 6px;
}

.login-subtitle {
    color: var(--text-muted);
    font-size: 14px;
    margin-bottom: 22px;
}

.login-divider {
    display: flex;
    align-items: center;
    margin: 16px 0;
    color: var(--text-muted);
    font-size: 12px;
}

.login-divider::before,
.login-divider::after {
    content: "";
    flex: 1;
    border-top: 1px solid var(--border);
}

.login-divider span { padding: 0 10px; }

/* --- 12. Forms ------------------------------------------------------ */

.form-group {
    margin-bottom: 16px;
    text-align: left;
}

.form-group label {
    display: block;
    font-size: 13px;
    font-weight: 550;
    color: var(--text);
    margin-bottom: 6px;
}

.form-group input {
    width: 100%;
    padding: 11px 13px;
    border: 1px solid var(--border);
    border-radius: 9px;
    font-family: inherit;
    font-size: 14px;
    background: var(--bg);
    color: var(--text);
    min-height: 44px;
}

.form-group input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

.label-hint {
    font-weight: 400;
    color: var(--text-muted);
    font-size: 12px;
}

.input-mono {
    font-family: var(--font-mono);
    font-size: 12.5px;
}

/* Inline (single-line) flash, e.g. next to a Save button */
.flash--inline { margin: 0; padding: 6px 12px; }

/* --- 13. Admin page --------------------------------------------------- */

.admin-page h1 {
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-bottom: 20px;
}

.admin-page h2 {
    font-size: 16.5px;
    font-weight: 650;
    letter-spacing: -0.01em;
    margin-bottom: 12px;
}

.admin-section {
    margin-bottom: 30px;
}

.section-desc {
    color: var(--text-muted);
    font-size: 13.5px;
    margin-bottom: 14px;
    max-width: 720px;
}

/* Marketplace account cards */
.account-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

.account-card {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px;
    box-shadow: var(--shadow-sm);
}

.account-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.account-platform {
    font-weight: 650;
    font-size: 15.5px;
}

.account-status {
    font-size: 11.5px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 999px;
}

.account-status--connected { background: var(--success-soft); color: var(--success-text); }
.account-status--disconnected { background: var(--danger-soft); color: var(--danger-text); }

.account-desc {
    font-size: 13.5px;
    color: var(--text-muted);
    margin-bottom: 12px;
}

.sync-buttons {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.sync-log {
    margin-top: 12px;
    min-height: 40px;
}

/* API configuration panel */
.api-config {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px;
    box-shadow: var(--shadow-sm);
}

.api-config h3 {
    font-size: 14.5px;
    font-weight: 650;
    margin-top: 16px;
    margin-bottom: 4px;
}

.api-config h3:first-child { margin-top: 0; }

.api-config p {
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 8px;
}

.api-config a { color: var(--accent-text); }

.api-config pre {
    background: #10151f;
    color: #dbe2ee;
    padding: 12px 14px;
    border-radius: 9px;
    font-size: 12.5px;
    font-family: var(--font-mono);
    overflow-x: auto;
}

/* Google settings form */
.settings-form {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-width: 640px;
}

.settings-form > p {
    font-size: 13.5px;
    color: var(--text-muted);
}

.settings-form a { color: var(--accent-text); }

.settings-steps {
    margin: 8px 0 12px 20px;
    color: var(--text-muted);
    font-size: 13px;
}

.settings-steps li { margin-bottom: 4px; }

.settings-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 10px;
    flex-wrap: wrap;
}

.settings-status {
    display: inline-flex;
    font-size: 13px;
    color: var(--text-muted);
}

/* Plugins */
.plugin-card {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px 16px;
    margin-bottom: 8px;
}

.plugin-card strong { font-size: 14.5px; }

.plugin-version {
    font-size: 12px;
    color: var(--text-muted);
    margin-left: 8px;
}

.plugin-card p {
    font-size: 13px;
    color: var(--text-muted);
    margin-top: 4px;
}

/* --- 14. Teams -------------------------------------------------------- */

/* Team cards in the admin Teams section */
.team-card {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: 14px 16px;
    margin-bottom: 14px;
    max-width: 720px;
}

.team-header {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.team-header strong {
    font-size: 15px;
    font-weight: 650;
}

.team-role-badge {
    display: inline-block;
    font-size: 10.5px;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: 999px;
    padding: 2px 9px;
}

.team-role-badge--owner { color: var(--accent-text); background: var(--accent-soft); }
.team-role-badge--member { color: var(--text-muted); background: var(--bg-inset); }
.team-role-badge--admin { color: var(--accent-text); background: var(--accent-soft); }
.team-role-badge--pending { color: #b45309; background: #fef3c7; }
.team-role-badge--approved { color: #15803d; background: #dcfce7; }
.team-role-badge--denied { color: var(--text-muted); background: var(--bg-inset); }

/* One user row in the Admin -> Users list */
.user-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

/* Outbound email quota display */
.usage-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 12px;
    font-size: 13px;
}
.usage-row strong { font-weight: 650; }
.usage-bar {
    height: 6px;
    border-radius: 999px;
    background: var(--bg-inset);
    overflow: hidden;
}
.usage-bar-fill {
    height: 100%;
    background: var(--accent);
    border-radius: 999px;
    transition: width 0.2s ease;
}
.usage-bar-fill--warn { background: #d97706; }
.usage-bar-fill--critical { background: #dc2626; }


.team-members {
    list-style: none;
    margin: 0 0 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.team-members li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: 9px;
    font-size: 13px;
    background: var(--bg);
}

.member-name { font-weight: 550; }

.member-email {
    color: var(--text-muted);
    font-weight: 400;
}

.team-actions-right {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.team-add-member {
    display: flex;
    gap: 8px;
}

.team-add-member input {
    flex: 1;
    min-width: 0;
    max-width: 320px;
    padding: 9px 12px;
    border: 1px solid var(--border);
    border-radius: 9px;
    font-size: 14px;
    font-family: inherit;
    background: var(--bg);
    color: var(--text);
}

.team-add-member input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

/* Create-team row: input + button */
.teams-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: 720px;
}

.form-group--inline {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    flex: 1;
    margin-bottom: 0;
}

.form-group--inline input {
    flex: 1;
    min-width: 200px;
    padding: 9px 13px;
    border: 1px solid var(--border);
    border-radius: 9px;
    font-size: 14px;
    font-family: inherit;
    background: var(--bg);
    color: var(--text);
}

.form-group--inline input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

/* ================================================================
   Responsive tiers
   ================================================================ */

/* --- Mobile: collapsible navigation + single-column layouts ------
   Below 768px the horizontal nav collapses into a hamburger menu, the toolbar
   stacks into one column, and modals become bottom sheets. This is the layer
   that keeps the dashboard usable on a phone instead of overflowing. */
@media (max-width: 767px) {
    /* -- navigation -- */
    .nav-burger { display: flex; }

    .nav-links {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
        padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
        background: var(--bg-elevated);
        border-bottom: 1px solid var(--border);
        box-shadow: var(--shadow-lg);
        z-index: 99;
    }

    .navbar.menu-open .nav-links {
        display: flex;
    }

    /* Menu items read left-to-right and fill the width, so they are large
       tap targets instead of cramped inline chips. */
    .navbar.menu-open .nav-links .nav-link,
    .navbar.menu-open .nav-links .nav-signout,
    .navbar.menu-open .nav-links .theme-toggle {
        width: 100%;
        justify-content: flex-start;
        text-align: left;
        padding: 12px 14px;
        font-size: 15px;
        border-radius: 9px;
    }

    .navbar.menu-open .nav-links .nav-identity {
        width: 100%;
        max-width: none;
        justify-content: flex-start;
        margin-bottom: 4px;
    }

    .navbar.menu-open .nav-links .nav-signout {
        margin-left: 0;
    }

    /* -- toolbar: one clean column, not a row of wrapping chips -- */
    .toolbar {
        flex-direction: column;
    }

    .toolbar-left {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .search-input {
        grid-column: 1 / -1;
    }

    .toolbar-left .filter-select {
        width: 100%;
        flex: 1 1 auto;
    }

    /* The team filter and the "missing cost" toggle span the full row so a
       long team name and the label are not squeezed. */
    #filter-team,
    .toolbar-left .filter-check {
        grid-column: 1 / -1;
        width: 100%;
    }

    .filter-check {
        justify-content: center;
    }

    /* Actions: the primary action is full-width, secondary actions share a row.
       This replaces "buttons all over the place" with a fixed, predictable
       order. */
    .toolbar-right {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .toolbar-right .btn {
        width: 100%;
    }

    .toolbar-right #add-manual-listing-btn {
        grid-column: 1 / -1;
        order: -1;
    }

    /* Grouping action bar stacks so the two buttons don't fight for width. */
    .group-action-bar {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }

    .group-action-bar .btn {
        width: 100%;
    }
}

/* --- >= 560px: big phones + foldable OUTER screens -------------- */
@media (min-width: 560px) {
    .stats-bar {
        grid-template-columns: repeat(4, 1fr);
        gap: 12px;
    }

    .stat-number { font-size: 26px; }

    /* Admin: account cards side by side */
    .account-cards { grid-template-columns: repeat(2, 1fr); }
}

/* --- >= 700px: foldable UNFOLDED portrait, large tablets -------- */
@media (min-width: 700px) {
    .main-content { padding: 28px 28px calc(28px + var(--safe-bottom)); }

    .toolbar {
        flex-direction: row;
        align-items: center;
    }

    .toolbar-left {
        flex: 1;
        flex-direction: row;
        align-items: center;
    }

    .search-input {
        flex: 1 1 auto;
        width: auto;
        max-width: 320px;
    }

    .filter-select {
        flex: 0 1 auto;
        width: auto;
    }

    .nav-title { font-size: 16px; }
}

/* --- >= 900px: tablets / unfolded landscape ---------------------- */
@media (min-width: 900px) {
    .main-content { padding: 32px; }
    .stats-bar { gap: 14px; }
    .stat { padding: 18px 20px; }
    .stat-number { font-size: 28px; }
}

/* --- >= 1200px: desktop ------------------------------------------ */
@media (min-width: 1200px) {
    .main-content { padding: 36px 40px; }
}

/* --- Small phones + foldable cover screens: tighten the nav ------
   (compact nav covers everything below the 560px tier, which is
   where large-phone / foldable-cover widths like 499–559px live) */
@media (max-width: 559px) {
    .navbar { padding-left: 12px; padding-right: 12px; }

    /* Logo only — the title text doesn't fit next to the links */
    .nav-title { display: none; }

    .nav-identity {
        max-width: 110px;
        font-size: 11px;
        padding: 3px 9px;
    }

    .nav-signout {
        padding: 6px 10px;
        font-size: 12.5px;
        margin-left: 0;
    }
}

/* Very narrow phones: drop the API Docs link (still in the docs) */
@media (max-width: 380px) {
    .nav-link--api { display: none; }
    .nav-link { padding: 7px 9px; font-size: 12.5px; }
    .nav-identity { max-width: 80px; }
}

/* Bigger touch targets on coarse pointers (phones, foldables) */
@media (hover: none) and (pointer: coarse) {
    .nav-link { min-height: 44px; display: inline-flex; align-items: center; }
    .btn { min-height: 44px; }
    .btn--sm { min-height: 38px; }
    .filter-select { min-height: 44px; }
    .team-members li { min-height: 44px; }
    .card-status { min-height: 24px; }
}

/* Respect users who prefer less motion */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
    .listing-card:hover { transform: none; }
    .card-image img { transition: none; }
}

/* ================================================================
   15. Modern UI Enhancements: Theme Toggle, Modal, Empty States
   ================================================================ */

/* --- Theme toggle button in navbar --- */
.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 6px 10px;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s ease;
}

.theme-toggle:hover {
    color: var(--accent);
    border-color: var(--accent);
    background: var(--accent-soft);
}

.theme-toggle svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
}

/* --- Admin Settings Grid --- */
.settings-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    margin: 18px 0;
}

@media (min-width: 768px) {
    .settings-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.settings-col {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px;
}

.settings-col h3 {
    font-size: 15px;
    font-weight: 650;
    margin-bottom: 4px;
    color: var(--text);
}

/* --- Empty state card --- */
.empty-state {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 60px 24px;
    background: var(--bg-elevated);
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-lg);
    margin: 20px 0;
}

.empty-state-icon {
    width: 56px;
    height: 56px;
    margin-bottom: 16px;
    color: var(--accent);
    background: var(--accent-soft);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.empty-state-title {
    font-size: 18px;
    font-weight: 650;
    margin-bottom: 6px;
    color: var(--text);
}

.empty-state-text {
    font-size: 14px;
    color: var(--text-muted);
    max-width: 440px;
    line-height: 1.5;
    margin-bottom: 18px;
}

/* --- Interactive Listing Details Modal --- */
.modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(14, 17, 22, 0.65);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

.modal-backdrop.is-open {
    opacity: 1;
    visibility: visible;
}

.modal {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    width: 100%;
    max-width: 640px;
    max-height: 90vh;
    max-height: 90dvh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: scale(0.96) translateY(8px);
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.modal-backdrop.is-open .modal {
    transform: scale(1) translateY(0);
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
    gap: 12px;
    flex-shrink: 0;
}

.modal-title-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
}

.modal-title {
    font-size: 16px;
    font-weight: 650;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.modal-close {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    border-radius: 6px;
    padding: 4px 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s, background-color 0.15s;
    flex-shrink: 0;
}

.modal-close:hover {
    color: var(--text);
    background: var(--bg-inset);
}

.modal > form {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.modal-body {
    padding: 20px;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.modal-media {
    width: 100%;
    /* Fill the modal width at 4:3 so the photo is large.
       flex-shrink:0 is essential: .modal-body is a COLUMN flex container, so
       without it the photo box is treated as a shrinkable item and gets squashed
       toward zero whenever the modal's content is taller than the body (which it
       always is). overflow:hidden then clipped it to a thin strip. min-height is
       a belt-and-braces guarantee that it can never collapse again. */
    aspect-ratio: 4 / 3;
    min-height: 200px;
    flex-shrink: 0;
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--bg-inset);
}

.modal-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.modal-price-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
}

.modal-price {
    font-size: 26px;
    font-weight: 700;
    color: var(--text);
}

.modal-details-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 12px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px;
}

.modal-detail-item {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.modal-detail-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
}

.modal-detail-value {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text);
}

.modal-description {
    font-size: 13px;
    line-height: 1.6;
    color: var(--text-muted);
    max-height: 120px;
    overflow-y: auto;
    background: var(--bg);
    padding: 12px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
}

.modal-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-top: 1px solid var(--border);
    background: var(--bg-elevated);
    gap: 10px;
    flex-wrap: wrap;
    flex-shrink: 0;
    position: sticky;
    bottom: 0;
    z-index: 5;
}

.modal-team-select {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
}

.modal-team-select select {
    padding: 6px 10px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--bg-elevated);
    color: var(--text);
    font-family: inherit;
    font-size: 13px;
}

/* Card hover cursor pointer */
.listing-card {
    cursor: pointer;
}

/* Additional Button Variants */
.btn--success {
    background: #10b981;
    color: #ffffff;
    border-color: #059669;
}
.btn--success:hover {
    background: #059669;
}

.btn--outline {
    background: transparent;
    border: 1px solid var(--border-strong);
    color: var(--text);
}
.btn--outline:hover {
    background: var(--bg-hover);
    border-color: var(--text-muted);
}

/* Modal form controls */
.modal input,
.modal select,
.modal textarea,
.modal-dialog input,
.modal-dialog select,
.modal-dialog textarea {
    width: 100%;
    padding: 9px 12px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--bg);
    color: var(--text);
    font-family: inherit;
    font-size: 14px;
    box-sizing: border-box;
}

.modal input:focus,
.modal select:focus,
.modal textarea:focus,
.modal-dialog input:focus,
.modal-dialog select:focus,
.modal-dialog textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 12px;
}

.form-group label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
}

/* Mobile responsive adjustments for modals.
   On a phone a centered desktop dialog is hard to reach and hard to dismiss,
   so it becomes a bottom sheet: full width, anchored to the bottom, with a
   large always-visible close target. */
@media (max-width: 640px) {
    .modal-backdrop {
        padding: 0;
        align-items: flex-end;
    }
    .modal {
        width: 100%;
        max-width: 100%;
        max-height: 94dvh;
        max-height: 94vh;
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    }
    .modal-header {
        padding: 14px 16px;
        position: sticky;
        top: 0;
        background: var(--bg-elevated);
        z-index: 6;
        border-bottom: 1px solid var(--border);
    }
    .modal-body {
        padding: 16px;
        gap: 14px;
    }
    .modal-footer {
        padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
    }

    /* A close button you can actually hit with a thumb, and cannot miss. */
    .modal-close {
        width: 44px;
        height: 44px;
        font-size: 28px;
        padding: 0;
        border-radius: 10px;
        background: var(--bg-inset);
        border: 1px solid var(--border);
    }
    .modal-close:hover {
        background: var(--bg-inset);
    }

    /* Footer buttons stretch so the primary action is a full-width target. */
    .modal-footer .btn {
        flex: 1;
        min-height: 44px;
    }
}

/* ==================================================================== */
/*  Performance & Sales Metrics Filter Buttons & Timeline Chart         */
/* ==================================================================== */

.metrics-filter-btn {
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 550;
    padding: 5px 12px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.metrics-filter-btn:hover {
    color: var(--text);
    background: var(--bg-hover);
}

.metrics-filter-btn.is-active {
    color: #fff !important;
    background: var(--accent) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.metrics-chart-card {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px 20px 14px 20px;
    margin-bottom: 20px;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

.metrics-chart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 12px;
}

.metrics-chart-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 650;
    color: var(--text);
}

.chart-subtitle {
    font-size: 12px;
    font-weight: 450;
    color: var(--text-muted);
}

.metrics-chart-legend {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 500;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
}

.legend-dot--revenue {
    background: #3b82f6;
    box-shadow: 0 0 6px rgba(59, 130, 246, 0.4);
}

.legend-dot--profit {
    background: #10b981;
    box-shadow: 0 0 6px rgba(16, 185, 129, 0.4);
}

.metrics-chart-wrapper {
    position: relative;
    width: 100%;
    min-height: 200px;
    height: 220px;
}

.metrics-chart-svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* Floating interactive chart tooltip */
.chart-tooltip {
    position: absolute;
    z-index: 20;
    pointer-events: none;
    background: var(--bg-elevated);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 12px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
    transform: translate(-50%, -100%);
    margin-top: -10px;
    transition: opacity 0.12s ease;
    white-space: nowrap;
}

.chart-tooltip-date {
    font-weight: 650;
    color: var(--text);
    margin-bottom: 4px;
    font-size: 11.5px;
    border-bottom: 1px solid var(--border);
    padding-bottom: 3px;
}

.chart-tooltip-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin: 2px 0;
}

.chart-tooltip-label {
    color: var(--text-muted);
}

.chart-tooltip-val {
    font-weight: 600;
}

.chart-empty-state {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: var(--bg-surface);
    z-index: 5;
    padding: 20px;
}

.chart-empty-icon {
    font-size: 28px;
    margin-bottom: 6px;
    opacity: 0.6;
}

.chart-empty-title {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text);
    margin: 0 0 4px 0;
}

.chart-empty-text {
    font-size: 12px;
    color: var(--text-muted);
    margin: 0;
    max-width: 360px;
}