/* Chessabit full stylesheet */

/* 1. Base setup */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* Typography */
  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-md:   1.125rem;
  --text-lg:   1.25rem;
  --text-xl:   1.5rem;
  --text-2xl:  2rem;

  /* Colors – surfaces */
  --bg-base:           #0F1117;
  --bg-surface:        #1A1D27;
  --bg-surface-raised: #242837;
  --bg-input:          #1E2230;

  /* Colors – text */
  --text-primary:   #F0F0F5;
  --text-secondary: #9BA1B0;
  --text-muted:     #5C6370;
  --text-on-accent: #FFFFFF;

  /* Accent / status */
  --accent-primary: #5B9A5F;
  --accent-hover:   #4E8B52;
  --accent-muted:   #2D4A30;
  --accent-glow:    rgba(91,154,95,0.15);

  --color-success:  #4ADE80;
  --color-warning:  #FACC15;
  --color-error:    #F87171;
  --color-info:     #60A5FA;

  /* Borders */
  --border-default: rgba(255,255,255,0.08);
  --border-focus:   rgba(91,154,95,0.5);

  /* Spacing (4px grid) */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;

  /* Radius */
  --radius-sm:   0.25rem;
  --radius-md:   0.5rem;
  --radius-lg:   0.75rem;
  --radius-pill: 999px;
}

/* 2. Global reset */

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

html, body {
  margin: 0;
  padding: 0;
}

body.page {
  min-height: 100vh;
  background: radial-gradient(circle at top left, #151927 0%, #0F1117 40%, #050608 100%);
  color: var(--text-primary);
  font-family: var(--font-family);
  font-size: var(--text-base);
}

/* 3. Header and layout */

.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-8);
  flex-wrap: wrap;
  gap: var(--space-2);
}

@media (max-width: 600px) {
  html, body {
    overflow-x: hidden;
  }
  .page-header {
    flex-direction: column;
    align-items: flex-start;
    padding: var(--space-3) var(--space-4);
  }
  .app-title {
    font-size: 1.5rem !important;
  }
  .header-nav {
    gap: var(--space-1) var(--space-2);
    flex-wrap: wrap;
    width: 100%;
  }
  .header-link {
    font-size: var(--text-xs);
  }
  .today-card {
    padding: var(--space-4);
  }
}

.page-header-left {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.app-title {
  font-size: 2.5rem !important;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.header-nav {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.header-link {
  color: var(--text-secondary);
  text-decoration: none;
  font-size: var(--text-sm);
}

.header-link:hover {
  color: var(--text-primary);
}

.header-link-active {
  color: var(--text-primary);
}

.page-main {
  padding: var(--space-4);
  display: flex;
  justify-content: center;
}

/* 4. Cards / containers */

.settings-container,
.today-container,
.history-container,
.profile-container {
  width: 100%;
  max-width: 800px;
}

.settings-card,
.today-card,
.history-card,
.profile-card,
.card {
  background-color: var(--bg-surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-default);
  padding: var(--space-6);
  box-shadow: 0 24px 60px rgba(0,0,0,0.55);
}

/* Headings */

.settings-card h1,
.today-card h1,
.history-card h1,
.profile-card h1,
.today-heading {
  margin: 0 0 var(--space-4);
  font-size: var(--text-xl);
  letter-spacing: -0.02em;
}

/* 5. Settings page */

.settings-section {
  margin-top: var(--space-5);
}

.settings-label {
  display: block;
  font-size: var(--text-sm);
  font-weight: 600;
  margin-bottom: var(--space-1);
}

.settings-hint {
  margin: 0 0 var(--space-3);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

/* Inputs */

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="url"],
textarea {
  display: block;
  width: 100%;
  max-width: 260px;
  background-color: var(--bg-input);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-default);
  color: var(--text-primary);
  padding: 0.45rem 0.7rem;
  font-size: var(--text-sm);
  font-family: var(--font-family);
  margin-top: var(--space-1);
}

/* Override browser autofill styling */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--bg-input) inset;
  -webkit-text-fill-color: var(--text-primary);
  border: 1px solid var(--border-default);
}

textarea {
  max-width: 100%;
}

/* Dark theme for date inputs (best-effort across browsers) */
input[type="date"] {
  background-color: var(--surface-raised);
  color: var(--text-primary);
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  padding: 4px 8px;
  font-family: inherit;
}

/* Remove default white background in some browsers */
input[type="date"]::-webkit-datetime-edit,
input[type="date"]::-webkit-datetime-edit-fields-wrapper,
input[type="date"]::-webkit-datetime-edit-text,
input[type="date"]::-webkit-datetime-edit-month-field,
input[type="date"]::-webkit-datetime-edit-day-field,
input[type="date"]::-webkit-datetime-edit-year-field {
  background-color: transparent;
  color: var(--text-primary);
}

/* Calendar icon tint (WebKit) */
input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(0.8);
  opacity: 0.9;
}

/* Firefox fix */
@-moz-document url-prefix() {
  input[type="date"] {
    background-color: var(--surface-raised);
    color: var(--text-primary);
  }
}


input::placeholder,
textarea::placeholder {
  color: var(--text-muted);
}

input:focus,
textarea:focus {
  outline: none;
  border-color: var(--border-focus);
  box-shadow: 0 0 0 1px var(--border-focus);
}

/* Radio group */

.settings-radio-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.settings-radio {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.settings-radio input[type="radio"] {
  accent-color: var(--accent-primary);
}

/* Subcard */

.settings-subcard {
  margin-top: var(--space-2);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  background-color: var(--bg-surface-raised);
  border: 1px solid var(--border-default);
}

/* Recommended split chips */

.split-chip {
  display: inline-block;
  margin-right: var(--space-2);
  margin-bottom: var(--space-2);
  padding: 0.15rem 0.6rem;
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  background-color: var(--accent-muted);
  color: var(--text-on-accent);
}

/* Custom split */

.custom-split-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-3);
}

.custom-total-row {
  margin-top: var(--space-2);
  font-size: var(--text-xs);
}

.custom-total-bad {
  color: var(--color-error);
}

.custom-total-ok {
  color: var(--color-success);
}

/* Toggle row */

.settings-toggle-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
}

/* Notifications checkbox */

#notifications_enabled {
  accent-color: var(--accent-primary);
}

/* 6. Today page layout */

.today-card {
  padding: var(--space-6);
}

.today-heading {
  margin-bottom: var(--space-3);
}

/* NEW – streak pill row above date */

.top-streak-row {
  margin: 0 0 0.35rem;
  font-size: var(--text-sm);
}

.top-streak-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.7rem;
  border-radius: var(--radius-pill);
  background-color: rgba(248, 113, 113, 0.16);
  color: #F97373;
  font-size: var(--text-sm);
  font-weight: 600;
}

.top-streak-pill::before {
  content: "🔥";
  font-size: 0.95rem;
}

.date {
  margin: 0 0 0.5rem;
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.streak {
  margin: 0 0 0.5rem;
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.settings-link {
  margin: 0 0 var(--space-3);
  font-size: var(--text-sm);
}

/* Summary / focus */

.summary {
  font-size: var(--text-sm);
  margin-bottom: var(--space-2);
}

.focus {
  margin-top: var(--space-3);
  font-size: var(--text-sm);
}

.focus span {
  font-weight: 600;
}

/* Week strip */

.week-strip {
  margin-top: var(--space-3);
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
}

/* Base week day pill: outlined dark */
.week-day {
  min-width: 64px;
  padding: 0.35rem 0.5rem;
  border-radius: var(--radius-md);
  background-color: var(--bg-surface-raised);
  border: 1px solid var(--border-default);
  cursor: pointer;
}

.week-day-label {
  display: block;
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.week-day-topic {
  display: block;
  margin-top: 0.15rem;
  font-size: var(--text-xs);
}

/* Today only: green border + greenish background */
.week-day-today {
  border-color: var(--accent-primary);
  background-color: var(--accent-muted);
}

/* Selected other day: just green border */
.week-day-selected {
  border-color: var(--accent-primary);
}

/* Day detail */

.day-detail {
  margin-top: var(--space-3);
  padding-top: var(--space-2);
  border-top: 1px solid var(--border-default);
  font-size: var(--text-sm);
}

.day-detail-title {
  font-weight: 600;
  margin-bottom: 0.25rem;
}

.day-detail-row {
  display: flex;
  justify-content: space-between;
  font-size: var(--text-sm);
}

/* Blocks */

.block {
  margin-top: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  background-color: var(--bg-surface-raised);
  border: 1px solid var(--border-default);
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
}

.block.done {
  opacity: 0.6;
}

.block-title {
  font-weight: 600;
  margin-bottom: 0.15rem;
}

.block-minutes {
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.timer-display {
  margin-top: 0.35rem;
  font-family: 'SF Mono', Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
  font-size: var(--text-md);
}

.block-hint {
  margin-top: 0.5rem;
  font-size: var(--text-xs);
  color: var(--text-secondary);
}

/* Timer / action buttons container */

.actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-2);
}

.timer-buttons {
  display: flex;
  gap: var(--space-2);
}

/* 7. Global button styles – muted look */

button,
.btn-start,
.btn-pause,
.btn-reset,
.btn-complete,
.settings-save-button,
#routine-select-button,
#routine-delete-button,
#routine-edit-button {
  border-radius: var(--radius-pill);
  padding: 0.35rem 0.9rem;
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  border: 1px solid var(--border-default);
  background-color: #020617;
  color: var(--text-primary);
  transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.05s ease;
}

button:hover,
.btn-start:hover,
.btn-pause:hover,
.btn-reset:hover,
.btn-complete:hover,
.settings-save-button:hover,
#routine-select-button:hover,
#routine-delete-button:hover,
#routine-edit-button:hover {
  background-color: #111827;
  border-color: var(--accent-primary);
}

/* Start / Save / Select – muted green */

.btn-start,
.settings-save-button,
#routine-select-button {
  background-color: var(--accent-muted);
  color: var(--text-on-accent);
}

.btn-start:hover,
.settings-save-button:hover,
#routine-select-button:hover {
  background-color: var(--accent-primary);
}

/* Pause – muted yellow */

.btn-pause {
  background-color: #4a3b05;
  color: #facc15;
  border-color: #854d0e;
}

.btn-pause:hover {
  background-color: #854d0e;
}

/* Reset / Edit – neutral dark */

.btn-reset,
#routine-edit-button {
  background-color: #020617;
  color: var(--text-primary);
}

/* Complete – muted green success */

.btn-complete {
  background-color: #064e3b;
  color: #bbf7d0;
  border-color: #16a34a;
}

.btn-complete:hover {
  background-color: #047857;
}

/* Delete – muted red */

#routine-delete-button {
  background-color: #3f1414;
  color: #fecaca;
  border-color: #b91c1c;
}

#routine-delete-button:hover:not([disabled]) {
  background-color: #7f1d1d;
}

#routine-delete-button[disabled] {
  opacity: 0.5;
  cursor: default;
}

/* Rest note */

.rest-note {
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

/* Review note card */

.review-note-card {
  margin-top: var(--space-4);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  background-color: var(--bg-surface-raised);
  border: 1px solid var(--border-default);
}

.review-note-card h2 {
  margin: 0 0 var(--space-2);
  font-size: var(--text-md);
}

.review-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.review-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: var(--text-xs);
  padding: 0.15rem 0.5rem;
  border-radius: var(--radius-pill);
  background-color: var(--bg-input);
}

.review-note-hint {
  margin-top: 0.5rem;
  font-size: var(--text-xs);
  color: var(--text-secondary);
}

/* 8. Routine list */

.routine-list {
  list-style: disc;
  padding-left: 1.5rem;
  margin: 0;
}

.routine-list-item {
  margin-top: var(--space-3);
}

.routine-actions {
  margin-top: var(--space-2);
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

/* 9. History / profile basics */

.history-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: var(--space-3);
  font-size: var(--text-sm);
}

.history-table th,
.history-table td {
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--border-default);
}

.history-table th {
  text-align: left;
  color: var(--text-secondary);
  font-weight: 500;
}

/* Badges */

.badge-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.badge-item {
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  border: 1px solid var(--border-default);
  background-color: var(--bg-surface-raised);
  color: var(--text-primary);
}

/* Streak badges: purple */
.badge-streak {
  border-color: #8b5cf6;
  background-color: rgba(139, 92, 246, 0.12);
  color: #e5deff;
}

/* Minutes badges: green */
.badge-minutes {
  border-color: #22c55e;
  background-color: rgba(34, 197, 94, 0.12);
  color: #bbf7d0;
}

/* Topic badges: blue */
.badge-topic {
  border-color: #38bdf8;
  background-color: rgba(56, 189, 248, 0.12);
  color: #e0f2fe;
}

/* Style/meta badges: amber */
.badge-style {
  border-color: #f59e0b;
  background-color: rgba(245, 158, 11, 0.12);
  color: #fed7aa;
}

/* Today page badge banners */

.badge-unlocked-banner {
  margin-bottom: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  background: rgba(34, 197, 94, 0.16);
  border: 1px solid #22c55e;
  color: #ecfdf5;
  font-size: var(--text-sm);
}

.next-badge-hint {
  margin-bottom: var(--space-5);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

/* 10. Links */

a {
  color: var(--color-info);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}
.today-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}