/* Bento Grid theme swatch — based on ggprompts.com/styles/bento-grid.html */

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

:root[data-theme="bento"] {
  --bg: #1c1c1e;
  --surface: #242426;
  --surface-raised: #2c2c2e;
  --border: rgba(255,255,255,0.08);
  --text: #f5f5f7;
  --text-muted: #8e8e93;
  --accent: #0a84ff;
  --accent-dim: #0a84ff26;
  --success: #30d158;
  --success-dim: #30d15826;
  --danger: #ff375f;
  --danger-dim: #ff375f26;
  --blocked: #5e5ce6;
  --blocked-dim: #5e5ce626;
  --radius: 16px;
  --mono: 'Inter', var(--mono);
  --display: 'Inter', sans-serif;
  --body: 'Inter', sans-serif;
}

[data-theme="bento"] .card,
[data-theme="bento"] .stat,
[data-theme="bento"] .day-entry-card,
[data-theme="bento"] .week-day-col,
[data-theme="bento"] dialog,
[data-theme="bento"] .calendar-day,
[data-theme="bento"] input,
[data-theme="bento"] select,
[data-theme="bento"] textarea {
  border-radius: var(--radius);
}
[data-theme="bento"] .day-entry-card { border-radius: 12px; }
[data-theme="bento"] .calendar-day { border-radius: 10px; }

[data-theme="bento"] .sidebar { background: var(--bg); border-right: 1px solid var(--border); }
[data-theme="bento"] .brand {
  font-family: var(--display);
  font-weight: 800;
  letter-spacing: -0.02em;
}
[data-theme="bento"] .brand .dot {
  background: linear-gradient(135deg, var(--accent), var(--blocked));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
[data-theme="bento"] .nav-link { border-radius: 10px; margin: 0 8px; }
[data-theme="bento"] .nav-link.active {
  background: linear-gradient(135deg, var(--accent-dim), var(--blocked-dim));
  color: var(--text);
}

[data-theme="bento"] .page-title { font-weight: 800; letter-spacing: -0.02em; }

[data-theme="bento"] .card,
[data-theme="bento"] .stat,
[data-theme="bento"] .week-day-col {
  border: 1px solid var(--border);
  box-shadow: 0 8px 24px -12px rgba(0,0,0,0.5);
}
[data-theme="bento"] .stat-value {
  font-weight: 800;
  background: linear-gradient(135deg, var(--accent), var(--blocked));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

[data-theme="bento"] .btn {
  border-radius: 999px;
  font-weight: 600;
  border-color: var(--border);
}
[data-theme="bento"] .btn:hover { border-color: var(--accent); }
[data-theme="bento"] .btn-primary {
  background: linear-gradient(135deg, var(--accent), var(--blocked));
  border-color: transparent;
  color: #fff;
}
[data-theme="bento"] .btn-danger { color: var(--danger); }

[data-theme="bento"] input,
[data-theme="bento"] select,
[data-theme="bento"] textarea {
  background: var(--surface);
  border-color: var(--border);
}
[data-theme="bento"] .btn:focus-visible,
[data-theme="bento"] a:focus-visible,
[data-theme="bento"] input:focus-visible,
[data-theme="bento"] select:focus-visible,
[data-theme="bento"] textarea:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-dim);
}

[data-theme="bento"] th {
  font-weight: 600;
  color: var(--text-muted);
  font-size: 12px;
}

[data-theme="bento"] .calendar-day.is-selected {
  background: linear-gradient(135deg, var(--accent), var(--blocked));
  color: #fff;
  font-weight: 700;
}

[data-theme="bento"] .ticket-key {
  background: var(--accent-dim);
  color: var(--accent);
  padding: 1px 6px;
  border-radius: 6px;
}