/* Fasting Companion tracker widget styles, scoped under #tracker-widget.
   Colours and spacing come from tokens.css, so the widget follows the light/dark theme. */

#tracker-widget .app {
  padding: var(--s-4) 0 var(--s-12);
}

#tracker-widget .card {
  background: var(--surface);
  border: var(--bw) solid var(--border);
  border-radius: var(--radius);
  padding: var(--s-5);
  margin-bottom: var(--s-4);
}

#tracker-widget .card h2 {
  margin: 0 0 var(--s-2);
  font-size: var(--t-lg);
}

#tracker-widget .hint {
  font-size: var(--t-sm);
  color: var(--text-muted);
  margin: 0 0 var(--s-3);
}

#tracker-widget .storage-warning {
  background: var(--tint-warm);
  border: var(--bw) solid var(--brand-terracotta);
  color: var(--text);
  padding: var(--s-3);
  border-radius: var(--radius);
  font-size: var(--t-sm);
  margin-bottom: var(--s-4);
}

#tracker-widget .window-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
  gap: var(--s-2);
}

#tracker-widget .window-option {
  border: var(--bw) solid var(--border-strong);
  background: var(--bg);
  color: var(--heading);
  border-radius: var(--radius);
  padding: var(--s-3) var(--s-2);
  text-align: center;
  font: inherit;
  font-weight: 650;
  cursor: pointer;
  font-size: var(--t-sm);
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}

#tracker-widget .window-option:hover { border-color: var(--brand-terracotta); }

#tracker-widget .window-option.selected {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--on-accent);
}

#tracker-widget .timer-display {
  font-size: 2.4rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: center;
  color: var(--heading);
  margin: var(--s-2) 0;
  word-break: break-word;
}

#tracker-widget .session-meta {
  text-align: center;
  font-size: var(--t-sm);
  color: var(--text-muted);
  margin-bottom: var(--s-2);
  min-height: 1.2em;
}

#tracker-widget .button-row {
  justify-content: center;
  margin-top: var(--s-2);
}

#tracker-widget .btn { min-width: 120px; }
#tracker-widget .btn-small { min-width: auto; }
/* Edit / Save / Apply buttons carry no colour class: give them the neutral look, not the browser grey. */
#tracker-widget .btn:not(.btn-primary):not(.btn-secondary) {
  background: var(--surface-2);
  color: var(--heading);
  border-color: var(--border-strong);
}
#tracker-widget .btn:not(.btn-primary):not(.btn-secondary):hover { border-color: var(--text-subtle); }

#tracker-widget .active-extra,
#tracker-widget .import-row {
  margin-top: var(--s-4);
  border-top: var(--bw) solid var(--border);
  padding-top: var(--s-3);
}

#tracker-widget label {
  display: block;
  font-size: var(--t-sm);
  color: var(--heading);
  margin-bottom: var(--s-1);
  font-weight: 600;
}

#tracker-widget textarea,
#tracker-widget input[type="datetime-local"],
#tracker-widget input[type="time"],
#tracker-widget .history-editing select {
  width: 100%;
  font: inherit;
  font-size: var(--t-sm);
  padding: var(--s-2);
  border: var(--bw) solid var(--border-strong);
  border-radius: var(--radius);
  margin-bottom: var(--s-2);
  background: var(--bg);
  color: var(--text);
}

#tracker-widget .schedule-display,
#tracker-widget .import-success {
  background: var(--tint-sage);
  border: var(--bw) solid var(--tint-sage-border);
  color: var(--text);
  border-radius: var(--radius);
  padding: var(--s-3);
  font-size: var(--t-sm);
}

#tracker-widget .schedule-display { margin-top: var(--s-1); }
#tracker-widget .import-success { margin: var(--s-2) 0; }

#tracker-widget .correction-box { margin-top: var(--s-3); }

#tracker-widget .correction-box summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--heading);
  font-size: var(--t-sm);
}

#tracker-widget .correction-fields { margin-top: var(--s-2); }

#tracker-widget .field-error {
  background: var(--tint-danger);
  border: var(--bw) solid var(--brand-terracotta);
  color: var(--danger-text);
  padding: var(--s-2) var(--s-3);
  border-radius: var(--radius);
  font-size: var(--t-sm);
  margin: var(--s-2) 0;
}

#tracker-widget .history-list { margin-top: var(--s-2); }

#tracker-widget .history-item {
  border: var(--bw) solid var(--border);
  border-radius: var(--radius);
  padding: var(--s-3);
  margin-bottom: var(--s-2);
}

#tracker-widget .history-item .hwindow { font-weight: 700; color: var(--accent-text); }
#tracker-widget .history-item .htimes { font-size: var(--t-xs); color: var(--text-muted); }
#tracker-widget .history-item .hnote { font-size: var(--t-sm); color: var(--text); margin-top: var(--s-1); font-style: italic; }

#tracker-widget .hactions { display: flex; gap: var(--s-2); margin-top: var(--s-2); }
#tracker-widget .history-editing label { margin-top: var(--s-2); }
#tracker-widget .empty-state { color: var(--text-muted); font-size: var(--t-sm); }

#tracker-widget .import-row input[type="file"] {
  width: 100%;
  font: inherit;
  font-size: var(--t-sm);
  margin-bottom: var(--s-2);
  color: var(--text-muted);
}

#tracker-widget .import-row input[type="file"]::file-selector-button {
  font: inherit;
  font-weight: 650;
  margin-right: var(--s-3);
  padding: var(--s-2) var(--s-4);
  border: var(--bw) solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--heading);
  cursor: pointer;
}

@media (max-width: 400px) {
  #tracker-widget .timer-display { font-size: 1.9rem; }
  #tracker-widget .btn { width: 100%; }
}