/* ═══════════════════════════════════════════════════════════════════
   Price Tracking Page  (.ptrack-page)
   ═══════════════════════════════════════════════════════════════════ */

.ptrack-page {
    max-width: 1100px;
    margin: 0 auto;
    padding: 7.5rem 1rem 3rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* ── Back link ── */
.ptrack-back-link {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    font-size: .875rem;
    font-weight: 600;
    color: var(--primary);
    text-decoration: none;
    opacity: .85;
    transition: opacity .15s;
}
.ptrack-back-link:hover { opacity: 1; }
.ptrack-back-link .material-symbols-outlined { font-size: 1.1rem; }

/* ── Title row ── */
.ptrack-title-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}
.ptrack-section-label {
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--primary);
    margin: 0 0 .25rem;
}
.ptrack-title {
    font-size: 1.6rem;
    font-weight: 700;
    margin: 0;
    color: var(--on-surface);
    letter-spacing: -.01em;
}

/* ── Main 2-col layout ── */
.ptrack-layout {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 1.5rem;
    align-items: start;
}
@media (max-width: 800px) {
    .ptrack-layout { grid-template-columns: 1fr; }
}

/* ── Big stat card ── */
.ptrack-stat-card {
    background: var(--surface-container-low);
    border: 1px solid var(--outline-variant);
    border-radius: 1rem;
    padding: 1.25rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: .25rem;
    margin-bottom: 1.25rem;
}
.ptrack-stat-label {
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--on-surface-variant);
}
.ptrack-stat-value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--on-surface);
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}
.ptrack-stat-currency {
    font-size: 1.1rem;
    font-weight: 400;
    color: var(--on-surface-variant);
    margin-left: .2rem;
}
.ptrack-trend-label {
    font-size: .85rem;
    font-weight: 600;
    margin-top: .125rem;
}
.ptrack-trend-up   { color: #2e7d32; }
.ptrack-trend-down { color: var(--error, #b00020); }

/* ── Chart card ── */
.ptrack-chart-card {
    background: var(--surface-container-low);
    border: 1px solid var(--outline-variant);
    border-radius: 1rem;
    overflow: hidden;
}
.ptrack-chart-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--outline-variant);
}
.ptrack-chart-title {
    font-size: .95rem;
    font-weight: 700;
    margin: 0;
    color: var(--on-surface);
}
.ptrack-time-buttons { display: flex; gap: .25rem; }
.ptrack-time-btn {
    padding: .25rem .7rem;
    border: 1px solid var(--outline-variant);
    border-radius: .375rem;
    background: none;
    color: var(--on-surface-variant);
    font-size: .8rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
}
.ptrack-time-btn:hover {
    background: var(--surface-container);
    color: var(--on-surface);
}
.ptrack-time-btn-active {
    background: var(--primary);
    color: var(--on-primary);
    border-color: var(--primary);
}
.ptrack-time-btn-active:hover {
    background: var(--primary);
    color: var(--on-primary);
}
.ptrack-chart-container {
    padding: 1.25rem;
    position: relative;
    height: 280px;
}

.ptrack-no-chart {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    padding: 3rem 1rem;
    color: var(--on-surface-variant);
    text-align: center;
}

/* ── Sidebar ── */
.ptrack-sidebar {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.ptrack-sidebar-card {
    background: var(--surface-container-low);
    border: 1px solid var(--outline-variant);
    border-radius: 1rem;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}
.ptrack-sidebar-card-header {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--on-surface-variant);
}
.ptrack-icon-accent { color: var(--primary); font-size: 1.1rem; }
.ptrack-best-price {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--on-surface);
    margin: 0;
    font-variant-numeric: tabular-nums;
}
.ptrack-best-detail {
    font-size: .82rem;
    color: var(--on-surface-variant);
    margin: 0;
}

.ptrack-stats-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
    gap: .75rem;
}
.ptrack-stats-cell {
    background: var(--surface-container-low);
    border: 1px solid var(--outline-variant);
    border-radius: .75rem;
    padding: .75rem;
    display: flex;
    flex-direction: column;
    gap: .2rem;
}
.ptrack-stats-label {
    font-size: .67rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--on-surface-variant);
}
.ptrack-stats-val {
    font-size: .9rem;
    font-weight: 700;
    color: var(--on-surface);
    font-variant-numeric: tabular-nums;
}
.ptrack-trend-up-val   { color: #2e7d32; }
.ptrack-trend-down-val { color: var(--error, #b00020); }

/* ── History table section ── */
.ptrack-history-section {
    background: var(--surface-container-low);
    border: 1px solid var(--outline-variant);
    border-radius: 1rem;
    overflow: hidden;
}
.ptrack-history-header {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: 1rem 1.25rem;
    font-weight: 700;
    font-size: .95rem;
    color: var(--on-surface);
    border-bottom: 1px solid var(--outline-variant);
}
.ptrack-history-header .material-symbols-outlined {
    font-size: 1.2rem;
    color: var(--primary);
}
.ptrack-history-count {
    padding: .4rem 1.25rem;
    font-size: .8rem;
    color: var(--on-surface-variant);
    border-bottom: 1px solid var(--outline-variant);
}
.ptrack-store-link {
    color: var(--primary);
    text-decoration: none;
    font-weight: 600;
}
.ptrack-store-link:hover { text-decoration: underline; }
.ptrack-price-cell { font-weight: 600; }

/* ── Dark mode ── */
[data-theme="dark"] .ptrack-stat-card,
[data-theme="dark"] .ptrack-chart-card,
[data-theme="dark"] .ptrack-sidebar-card,
[data-theme="dark"] .ptrack-stats-cell,
[data-theme="dark"] .ptrack-history-section {
    background: var(--surface-container);
    border-color: var(--outline-variant);
}