:root {
  --bg:#020617;
  --bg-soft:#020617;
  --card:#020617;
  --border:#1e293b;
  --text:#e5e7eb;
  --muted:#94a3b8;
  --green:#22c55e;
  --red:#ef4444;
  --blue:#38bdf8;
  --rest: #93c5fd;

  /* Seletor de Dia de Descanso (tema escuro) */
  --select-bg: #071226;
  --select-text: #e5e7eb;
  --select-border: #1f2b3a;
  --select-muted: #94a3b8;
  --select-focus: rgba(56, 189, 248, 0.12);
}

body.light {
  --bg:#f8fafc;
  --bg-soft:#f8fafc;
  --card:#ffffff;
  --border:#cbd5e1;
  --text:#020617;
  --muted:#475569;
  --green:#16a34a;
  --red:#dc2626;
  --blue:#2563eb;
  --rest: #60a5fa;

  /* Seletor de Dia de Descanso (tema claro) */
  --select-bg: #ffffff;
  --select-text: #020617;
  --select-border: #cbd5e1;
  --select-muted: #64748b;
  --select-focus: rgba(37, 99, 235, 0.12);
}

/* override da cor da seta para tema claro (hex codificado) */
body.light .settings select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%2364748b' d='M1 1l5 5 5-5'/></svg>");
}

body {
  margin:0;
  font-family:Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
  display:flex;
  flex-direction: column;
  justify-content:center;
  min-height:100vh;
}

body:not(.light) {
  background: radial-gradient(circle at top, var(--bg-soft), #000);
}

.container {
  width:75%;
  max-width:780px;
  margin: auto;
  padding:20px;
  border-radius:14px;
  background:var(--card);
  border:1px solid var(--border);
}

header {
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:16px;
}

.header-text h2 {
  margin:0;
  font-size:20px;
}

.subtitle {
  margin-top:6px;
  font-size:14px;
  color:var(--muted);
  max-width:520px;
}

.theme-toggle {
  border:1px solid var(--border);
  background:none;
  color:var(--muted);
  padding:6px 10px;
  border-radius:8px;
  cursor:pointer;
}

.stats {
  display:flex;
  gap:20px;
  margin:20px 0;
}

/* Settings (seletor de descanso) - posicionamento próximo às estatísticas */
.settings {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 12px 0;
}

.stat {
  flex:1;
  padding:16px;
  border-radius:12px;
  border:1px solid var(--border);
}

.label {
  font-size:11px;
  color:var(--muted);
  letter-spacing:.05em;
  margin-bottom:6px;
}

/* Rótulo menor e mais suave para "Dia de descanso" */
.settings label {
  font-size: 12px;
  color: var(--select-muted);
  font-weight: 500;
  letter-spacing: 0.02em;
  margin: 0;
}

.value {
  font-size:34px;
  font-weight:bold;
  line-height:1;
}

.suffix {
  font-size:13px;
  color:var(--muted);
}

.current .value { color:var(--green); }
.record .value { color:var(--blue); }

/* Seletor arredondado compacto + seta SVG por tema */
.settings select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: 10px;
  padding: 6px 36px 6px 12px; /* espaço à direita para a seta */
  background-color: var(--select-bg);
  color: var(--select-text);
  border: 1px solid var(--select-border);
  font-size: 14px;
  cursor: pointer;
  min-width: 105px;
  height: 30px;
  transition: box-shadow .15s ease, transform .08s ease;
  outline: none;

  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%2394a3b8' d='M1 1l5 5 5-5'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px 8px;
}

/* foco: mantemos o destaque suave */
.settings select:focus {
  box-shadow: 0 6px 18px var(--select-focus);
  transform: translateY(-1px);
}

/* Ajuste visual quando desabilitado */
.settings select:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.history {
  display:grid;
  gap:4px;
  margin:18px 0;
}

/* DAY: centraliza o ícone e define tamanho/peso; escondemos texto bruto */
.day {
  height:22px;
  border-radius:4px;
  background:var(--border);
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:0; /* escondemos caracteres emoji/texto para usar ::before */
  color:var(--text);
}

/* cores já existentes mantidas; icon será desenhado via ::before */
.day.studied { background:var(--green); }
.day.missed { background:var(--red); }
.day.rest { background: var(--rest); }
.day.today { outline:2px solid var(--blue); }

/* base do pseudo-ícone (discreto, monocromático) */
.day::before{
  content: "";
  display:block;
  width:12px;
  height:12px;
  background-repeat:no-repeat;
  background-size:12px 12px;
  opacity:0.95;
  filter: none;
}

/* Check simples (studied) - stroke branco, fino */
.day.studied::before{
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M2.5 6.2 L4.7 8.4 L9.5 3.6' fill='none' stroke='%23ffffff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}

/* X simples (missed) - stroke branco, fino */
.day.missed::before{
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M3 3 L9 9 M9 3 L3 9' fill='none' stroke='%23ffffff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}

/* Descanso: pequeno traço central (mais suave) */
.day.rest::before{
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M3 6.1h6' fill='none' stroke='%23071b2b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' opacity='0.9'/></svg>");
}

/* no tema claro, ajustamos o traço do descanso para cor mais escura */
body.light .day.rest::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M3 6.1h6' fill='none' stroke='%2306303f' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' opacity='0.95'/></svg>");
}

/* Tooltip on hover */
.day:hover::after {
  content: attr(data-date);
  position:absolute;
  bottom:30px;
  left:50%;
  transform:translateX(-50%);
  background:var(--card);
  color:var(--text);
  border:1px solid var(--border);
  padding:4px 6px;
  font-size:11px;
  border-radius:6px;
  white-space:nowrap;
  z-index:10;
  pointer-events:none;
}

.controls {
  display:flex;
  gap:16px;
  align-items:center;
}

button {
  min-height:44px;
  padding:10px 18px;
  border-radius:10px;
  border:none;
  background:var(--green);
  color:#022c22;
  font-size:15px;
  cursor:pointer;
}

button:disabled {
  opacity:.6;
  cursor:not-allowed;
}

.hint {
  font-size:13px;
  color:var(--muted);
}

/* RESPONSIVIDADE */
@media (max-width: 900px) {
  .stats { flex-direction:column; }
}

@media (max-width: 600px) {
  header { flex-direction:column; align-items:flex-start; }
  .theme-toggle { align-self:flex-end; }

  .controls {
    flex-direction:column;
    align-items:stretch;
  }

  .hint { text-align:center; }

  /* Pequeno ajuste responsivo para o seletor */
  .settings { gap: 8px; }
  .settings select { min-width: 120px; font-size: 13px; padding: 7px 10px; }
}

.footer {
  margin-top: 16px;
  padding-bottom: 12px;
  font-size: 11px;
  color: var(--muted);
  text-align: center;
  opacity: 0.8;
}

.footer a {
  color: var(--muted);
  filter: brightness(0.7);
  text-decoration: underline;
}

.footer a:hover {
  filter: brightness(0.4);
  text-decoration: underline;
}