/* ============================================================
   POMODEV — STANDALONE PAGES PREMIUM SKIN
   Covers dashboard.html and history.html: pages that ship their own
   local <style> blocks (loaded after this file), so overrides here
   need !important to reliably win regardless of link order.
   Reuses the same warm tokens app-premium.css defines on :root.
   ============================================================ */

/* ---------- shared page chrome ---------- */
body {
  font-family: var(--p-font, "Inter Tight", "Inter", sans-serif) !important;
  background-color: var(--ink-900, #0B0A09) !important;
  background-image: none !important;
  color: var(--bone, #F4EFE8) !important;
}

.dashboard-container, .history-container {
  position: relative;
  z-index: 1;
}

.dashboard-header, .history-header {
  padding-bottom: 20px !important;
  border-bottom: 1px solid var(--pline, rgba(244,239,232,.09)) !important;
  margin-bottom: 34px !important;
}
.dashboard-header h1, .history-header h1 {
  font-family: var(--p-font, "Inter Tight", sans-serif) !important;
  font-weight: 550 !important;
  font-size: clamp(24px, 3vw, 32px) !important;
  letter-spacing: -0.03em !important;
  color: var(--bone, #F4EFE8) !important;
  display: flex; align-items: center; gap: 12px;
}
.dashboard-header p, .history-header p {
  color: var(--muted, #8E8377) !important;
}

/* back-to-app link/button */
.dashboard-header a.btn, .history-header a {
  display: inline-flex !important; align-items: center; gap: 8px;
  height: 40px; padding: 0 18px !important;
  border-radius: 999px !important;
  border: 1px solid var(--pline-2, rgba(244,239,232,.17)) !important;
  background: var(--psurface, rgba(244,239,232,.03)) !important;
  color: var(--bone, #F4EFE8) !important;
  font-size: 13.5px !important; font-weight: 500 !important;
  text-decoration: none !important;
  transition: border-color .3s, background-color .3s, transform .3s cubic-bezier(.22,1,.36,1);
}
.dashboard-header a.btn:hover, .history-header a:hover {
  border-color: var(--primary, #DF4526) !important;
  background: var(--psurface-2, rgba(244,239,232,.05)) !important;
  transform: translateY(-2px);
}

/* ---------- stat cards (history.html) ---------- */
.stat-card {
  background: linear-gradient(168deg, var(--psurface-2, rgba(244,239,232,.05)), var(--psurface, rgba(244,239,232,.03))) !important;
  border: 1px solid var(--pline, rgba(244,239,232,.09)) !important;
  border-radius: 16px !important;
  backdrop-filter: none !important;
  transition: border-color .35s, transform .35s cubic-bezier(.22,1,.36,1);
}
.stat-card:hover { border-color: var(--pline-2, rgba(244,239,232,.17)) !important; transform: translateY(-2px); }
.stat-value {
  font-family: var(--p-font, "Inter Tight", sans-serif) !important;
  font-weight: 550 !important;
  color: var(--bone, #F4EFE8) !important;
  font-variant-numeric: tabular-nums;
}
.stat-label {
  color: var(--muted, #8E8377) !important;
  font-family: var(--p-mono, ui-monospace, monospace) !important;
  font-size: 10.5px !important; letter-spacing: .12em !important; text-transform: uppercase !important;
}

/* ---------- filters / search (history.html) ---------- */
.filter-btn {
  border: 1px solid var(--pline-2, rgba(244,239,232,.17)) !important;
  background: var(--psurface, rgba(244,239,232,.03)) !important;
  color: var(--muted, #8E8377) !important;
  border-radius: 999px !important;
  font-size: 13px !important;
  transition: border-color .3s, background-color .3s, color .3s, transform .3s cubic-bezier(.22,1,.36,1);
}
.filter-btn:hover { color: var(--bone, #F4EFE8) !important; transform: translateY(-1px); }
.filter-btn.active {
  background: var(--primary, #DF4526) !important;
  border-color: var(--primary, #DF4526) !important;
  color: #fff !important;
  box-shadow: 0 8px 20px -10px rgba(var(--primary-rgb, 223,69,38), .8);
}
.search-box {
  border: 1px solid var(--pline, rgba(244,239,232,.09)) !important;
  background: var(--psurface, rgba(244,239,232,.03)) !important;
  color: var(--bone, #F4EFE8) !important;
  border-radius: 12px !important;
  transition: border-color .3s, background-color .3s;
}
.search-box:focus {
  outline: none !important;
  border-color: color-mix(in srgb, var(--primary, #DF4526) 55%, transparent) !important;
  background: var(--psurface-2, rgba(244,239,232,.05)) !important;
}

/* ---------- history list ---------- */
.history-item {
  background: var(--psurface, rgba(244,239,232,.03)) !important;
  border: 1px solid var(--pline, rgba(244,239,232,.09)) !important;
  backdrop-filter: none !important;
  transition: border-color .3s, transform .3s cubic-bezier(.22,1,.36,1);
}
.history-item:hover { border-color: var(--pline-2, rgba(244,239,232,.17)) !important; transform: translateX(3px); }
.history-date { color: var(--bone, #F4EFE8) !important; }
.history-mode {
  font-family: var(--p-mono, ui-monospace, monospace) !important;
  font-size: 10.5px !important; letter-spacing: .06em;
  background: var(--psurface-2, rgba(244,239,232,.05)) !important;
  color: var(--muted, #8E8377) !important;
}
.history-mode.pomodoro { background: color-mix(in srgb, var(--primary, #DF4526) 18%, transparent) !important; color: var(--primary, #DF4526) !important; }
.history-mode.short { background: color-mix(in srgb, #7E8C63 22%, transparent) !important; color: #9CAE7E !important; }
.history-mode.long { background: color-mix(in srgb, #E8913C 20%, transparent) !important; color: #E8913C !important; }
.empty-state { color: var(--muted, #8E8377) !important; }

/* ---------- dashboard cards ---------- */
.dashboard-card {
  background: linear-gradient(168deg, var(--psurface-2, rgba(244,239,232,.05)), var(--psurface, rgba(244,239,232,.03))) !important;
  border: 1px solid var(--pline, rgba(244,239,232,.09)) !important;
  backdrop-filter: none !important;
  border-radius: 18px !important;
  transition: border-color .35s;
}
.dashboard-card:hover { border-color: var(--pline-2, rgba(244,239,232,.17)) !important; }
.card-title {
  font-family: var(--p-font, "Inter Tight", sans-serif) !important;
  font-weight: 550 !important; font-size: 15px !important;
  letter-spacing: -0.01em !important;
  color: var(--bone, #F4EFE8) !important;
}
.stat-big {
  font-family: var(--p-font, "Inter Tight", sans-serif) !important;
  font-weight: 550 !important;
  color: var(--primary, #DF4526) !important;
  font-variant-numeric: tabular-nums;
}

.quick-stats { gap: 12px !important; }
.quick-stat {
  background: var(--psurface, rgba(244,239,232,.03)) !important;
  border: 1px solid var(--pline, rgba(244,239,232,.09)) !important;
  border-radius: 14px !important;
  transition: border-color .35s, transform .35s cubic-bezier(.22,1,.36,1);
}
.quick-stat:hover { border-color: var(--pline-2, rgba(244,239,232,.17)) !important; transform: translateY(-2px); }
.quick-stat-value {
  font-family: var(--p-font, "Inter Tight", sans-serif) !important;
  font-weight: 550 !important;
  color: var(--primary, #DF4526) !important;
  font-variant-numeric: tabular-nums;
}
.quick-stat-label {
  color: var(--muted, #8E8377) !important;
  font-family: var(--p-mono, ui-monospace, monospace) !important;
  font-size: 9.5px !important; letter-spacing: .1em !important; text-transform: uppercase !important;
}

.insight-card {
  background: var(--psurface, rgba(244,239,232,.03)) !important;
  border-left: 3px solid var(--primary, #DF4526) !important;
  border-radius: 12px !important;
}
.insight-title { color: var(--bone, #F4EFE8) !important; }
.insight-text { color: var(--muted, #8E8377) !important; }

/* ---------- misc inline-styled bits both pages use ---------- */
[style*="color: rgba(255,255,255,0.6)"], [style*="color: rgba(255,255,255,0.5)"],
[style*="color: rgba(255,255,255,0.7)"] {
  color: var(--muted, #8E8377) !important;
}
[style*="border-bottom: 1px solid rgba(255,255,255,0.1)"] {
  border-bottom-color: var(--pline, rgba(244,239,232,.09)) !important;
}

::selection { background: var(--primary, #DF4526); color: #fff; }

@media (max-width: 640px) {
  .dashboard-header, .history-header { flex-direction: column; align-items: flex-start !important; }
}