/* Nebula design system
 * A restrained Indigo + Teal theme with a strict 4px spacing rhythm.
 */

:root {
  --nebula-space-1: 4px;
  --nebula-space-2: 8px;
  --nebula-space-3: 12px;
  --nebula-space-4: 16px;
  --nebula-space-5: 20px;
  --nebula-space-6: 24px;
  --nebula-space-8: 32px;
  --nebula-space-10: 40px;
  --nebula-space-12: 48px;
  --nebula-radius-sm: 6px;
  --nebula-radius-md: 10px;
  --nebula-radius-lg: 16px;
  --nebula-radius-pill: 999px;
}

.theme-settings-page { max-width: 1180px; }
.theme-options { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.nebula-preview {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 86% 8%, rgba(20, 184, 166, .52), transparent 42%),
    linear-gradient(145deg, #eef2ff, #f8fafc 58%, #ecfeff);
}
.nebula-preview::after {
  content: "";
  position: absolute;
  width: 86px;
  height: 86px;
  top: -46px;
  left: 18px;
  border: 14px solid rgba(79, 70, 229, .22);
  border-radius: 50%;
  transform: rotate(-18deg);
}
.nebula-preview i {
  position: relative;
  z-index: 1;
  border-radius: var(--nebula-radius-sm);
  background: linear-gradient(90deg, #4338ca, #6366f1 62%, #14b8a6);
  box-shadow: 0 4px 10px rgba(67, 56, 202, .24);
}
.nebula-preview b {
  position: relative;
  z-index: 1;
  border-color: rgba(99, 102, 241, .18);
  border-radius: var(--nebula-radius-md);
  background: rgba(255, 255, 255, .88);
  box-shadow: 0 6px 16px rgba(49, 46, 129, .1);
}

body[data-theme="nebula"] {
  --nebula-indigo-50: #eef2ff;
  --nebula-indigo-100: #e0e7ff;
  --nebula-indigo-200: #c7d2fe;
  --nebula-indigo-500: #6366f1;
  --nebula-indigo-600: #4f46e5;
  --nebula-indigo-700: #4338ca;
  --nebula-indigo-800: #3730a3;
  --nebula-teal-50: #f0fdfa;
  --nebula-teal-100: #ccfbf1;
  --nebula-teal-500: #14b8a6;
  --nebula-teal-600: #0d9488;
  --nebula-success: #15803d;
  --nebula-success-soft: #f0fdf4;
  --nebula-warning: #c2410c;
  --nebula-warning-soft: #fff7ed;
  --nebula-danger: #be123c;
  --nebula-danger-soft: #fff1f2;
  --nebula-info: #0284c7;
  --nebula-info-soft: #f0f9ff;
  --nebula-ink: #172033;
  --nebula-muted: #64748b;
  --nebula-line: #e2e8f0;
  --nebula-line-strong: #cbd5e1;
  --nebula-canvas: #f6f7fb;
  --nebula-surface: rgba(255, 255, 255, .92);
  --nebula-shadow-sm: 0 1px 2px rgba(15, 23, 42, .04), 0 4px 12px rgba(49, 46, 129, .04);
  --nebula-shadow-md: 0 2px 4px rgba(15, 23, 42, .04), 0 12px 28px rgba(49, 46, 129, .08);
  --nebula-shadow-lg: 0 8px 16px rgba(15, 23, 42, .05), 0 24px 56px rgba(49, 46, 129, .11);
  margin: 0;
  background:
    radial-gradient(circle at 8% -8%, rgba(99, 102, 241, .14), transparent 34rem),
    radial-gradient(circle at 96% 4%, rgba(20, 184, 166, .1), transparent 28rem),
    var(--nebula-canvas);
  background-attachment: fixed;
  color: var(--nebula-ink);
  font-family: Inter, "Noto Sans SC", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 14px;
  line-height: 1.6;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body[data-theme="nebula"] h1,
body[data-theme="nebula"] h2,
body[data-theme="nebula"] h3,
body[data-theme="nebula"] h4 {
  color: #1e1b4b;
  font-weight: 700;
  letter-spacing: -.025em;
}
body[data-theme="nebula"] h1 { font-size: 28px; line-height: 1.28; }
body[data-theme="nebula"] h2 { font-size: 22px; line-height: 1.36; }
body[data-theme="nebula"] h3 { font-size: 18px; line-height: 1.44; }
body[data-theme="nebula"] h4 { font-size: 16px; line-height: 1.5; }
body[data-theme="nebula"] p { line-height: 1.65; }
body[data-theme="nebula"] .hint,
body[data-theme="nebula"] .muted,
body[data-theme="nebula"] .label,
body[data-theme="nebula"] label { color: var(--nebula-muted); }

body[data-theme="nebula"] .topbar {
  min-height: 72px;
  width: min(calc(100% - 32px), 1520px);
  margin: 16px auto 0;
  padding: 12px 20px;
  border: 1px solid rgba(255, 255, 255, .8);
  border-radius: var(--nebula-radius-lg);
  background: rgba(255, 255, 255, .72);
  box-shadow: var(--nebula-shadow-md), inset 0 1px 0 rgba(255, 255, 255, .88);
  backdrop-filter: blur(20px) saturate(145%);
  -webkit-backdrop-filter: blur(20px) saturate(145%);
}
body[data-theme="nebula"] .topbar h1 {
  font-size: 21px;
  line-height: 1.35;
  background: linear-gradient(110deg, var(--nebula-indigo-800), var(--nebula-indigo-500) 58%, var(--nebula-teal-600));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
body[data-theme="nebula"] #entryHint { margin-top: 4px; color: var(--nebula-muted); font-size: 12px; }
body[data-theme="nebula"] main { max-width: 1520px; padding: 20px 16px 48px; }

body[data-theme="nebula"] .home-panel,
body[data-theme="nebula"] .panel {
  padding: 24px;
  border: 1px solid rgba(255, 255, 255, .86);
  border-radius: var(--nebula-radius-lg);
  background: var(--nebula-surface);
  box-shadow: var(--nebula-shadow-md);
}
body[data-theme="nebula"] .section-head,
body[data-theme="nebula"] .home-head { gap: 16px; margin-bottom: 16px; }
body[data-theme="nebula"] .home-identity,
body[data-theme="nebula"] .daily-work-summary {
  padding: 12px 16px;
  border: 1px solid var(--nebula-indigo-100);
  border-radius: var(--nebula-radius-md);
  background: linear-gradient(120deg, var(--nebula-indigo-50), var(--nebula-teal-50));
}
body[data-theme="nebula"] .identity-name { color: var(--nebula-indigo-800); }
body[data-theme="nebula"] .identity-tag {
  border-radius: var(--nebula-radius-pill);
  background: var(--nebula-indigo-100);
  color: var(--nebula-indigo-700);
}

body[data-theme="nebula"] button,
body[data-theme="nebula"] input,
body[data-theme="nebula"] select,
body[data-theme="nebula"] textarea,
body[data-theme="nebula"] .nav-tile,
body[data-theme="nebula"] .management-stat,
body[data-theme="nebula"] .daily-person-chip {
  transition: color 200ms ease, background-color 200ms ease, border-color 200ms ease, box-shadow 200ms ease, transform 200ms ease;
}
body[data-theme="nebula"] input,
body[data-theme="nebula"] select,
body[data-theme="nebula"] textarea {
  border-color: var(--nebula-line-strong);
  border-radius: var(--nebula-radius-md);
  background: rgba(255, 255, 255, .92);
  color: var(--nebula-ink);
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, .03);
}
body[data-theme="nebula"] input:hover,
body[data-theme="nebula"] select:hover,
body[data-theme="nebula"] textarea:hover { border-color: var(--nebula-indigo-200); }
body[data-theme="nebula"] input:focus,
body[data-theme="nebula"] select:focus,
body[data-theme="nebula"] textarea:focus {
  border-color: var(--nebula-indigo-500);
  outline: 3px solid rgba(99, 102, 241, .16);
  box-shadow: 0 0 0 1px rgba(99, 102, 241, .05), 0 8px 20px rgba(79, 70, 229, .09);
}
body[data-theme="nebula"] button { border-radius: var(--nebula-radius-md); }
body[data-theme="nebula"] button:not(.secondary):not(.nav-tile):not(.task-link):not(.danger-link):not(.daily-person-chip):not(.management-stat):not(.pill-action):not(.segment-button):not(.tag-toggle):not(.travel-amount-link):not(.workspace-nav-item):not(.liquid-list-item) {
  border-color: var(--nebula-indigo-600);
  background: linear-gradient(135deg, var(--nebula-indigo-600), var(--nebula-indigo-500));
  color: #fff;
  box-shadow: 0 6px 16px rgba(79, 70, 229, .22);
}
body[data-theme="nebula"] button:not(.secondary):not(.nav-tile):not(.task-link):not(.danger-link):not(.daily-person-chip):not(.management-stat):not(.pill-action):not(.segment-button):not(.tag-toggle):not(.travel-amount-link):not(.workspace-nav-item):not(.liquid-list-item):hover {
  border-color: var(--nebula-indigo-700);
  background: linear-gradient(135deg, var(--nebula-indigo-700), var(--nebula-indigo-600));
  box-shadow: 0 10px 24px rgba(79, 70, 229, .28);
  transform: translateY(-1px);
}
body[data-theme="nebula"] button.secondary {
  border-color: var(--nebula-line-strong);
  background: rgba(255, 255, 255, .82);
  color: #475569;
  box-shadow: var(--nebula-shadow-sm);
}
body[data-theme="nebula"] button.secondary:hover {
  border-color: var(--nebula-indigo-200);
  background: #fff;
  color: var(--nebula-indigo-700);
  transform: translateY(-1px);
}
body[data-theme="nebula"] button:focus-visible,
body[data-theme="nebula"] .nav-tile:focus-visible,
body[data-theme="nebula"] a:focus-visible { outline: 3px solid rgba(20, 184, 166, .24); outline-offset: 2px; }

body[data-theme="nebula"] .home-nav { gap: 12px; margin-top: 16px; }
body[data-theme="nebula"] .nav-tile {
  min-height: 52px;
  border: 1px solid var(--nebula-line);
  border-radius: var(--nebula-radius-md);
  background: rgba(255, 255, 255, .78);
  color: #475569;
  box-shadow: var(--nebula-shadow-sm);
}
body[data-theme="nebula"] .nav-tile:hover,
body[data-theme="nebula"] .nav-tile.active {
  border-color: var(--nebula-indigo-200);
  background: linear-gradient(120deg, var(--nebula-indigo-50), var(--nebula-teal-50));
  color: var(--nebula-indigo-700);
  box-shadow: 0 10px 24px rgba(79, 70, 229, .1);
  transform: translateY(-1px);
}
body[data-theme="nebula"] .sub-nav {
  gap: 8px;
  padding: 12px 0;
  border-color: var(--nebula-line);
  background: rgba(246, 247, 251, .86);
  backdrop-filter: blur(16px);
}

body[data-theme="nebula"] .metric-table-wrap,
body[data-theme="nebula"] .task-table-wrap,
body[data-theme="nebula"] .performance-table-wrap {
  overflow: auto;
  border: 1px solid var(--nebula-line);
  border-radius: var(--nebula-radius-md);
  background: rgba(255, 255, 255, .8);
  box-shadow: var(--nebula-shadow-sm);
}
body[data-theme="nebula"] table { border-collapse: separate; border-spacing: 0; font-variant-numeric: tabular-nums; }
body[data-theme="nebula"] th {
  border-bottom-color: var(--nebula-line-strong);
  background: #f8fafc;
  color: #475569;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .01em;
}
body[data-theme="nebula"] td { border-bottom-color: #edf0f5; }
body[data-theme="nebula"] tbody tr:nth-child(even) td { background: rgba(238, 242, 255, .28); }
body[data-theme="nebula"] tbody tr:hover td { background: rgba(224, 231, 255, .62); }
body[data-theme="nebula"] .metric-table td,
body[data-theme="nebula"] .management-stat strong,
body[data-theme="nebula"] .analytics-card strong,
body[data-theme="nebula"] .performance-score-card strong {
  color: var(--nebula-indigo-700);
  font-variant-numeric: tabular-nums;
}

body[data-theme="nebula"] .analytics-card,
body[data-theme="nebula"] .analytics-block,
body[data-theme="nebula"] .management-stat,
body[data-theme="nebula"] .management-filter-card,
body[data-theme="nebula"] .performance-score-card,
body[data-theme="nebula"] .performance-block,
body[data-theme="nebula"] .daily-task-card,
body[data-theme="nebula"] .daily-task-list-item,
body[data-theme="nebula"] .daily-report-view-item,
body[data-theme="nebula"] .task-key-facts > div,
body[data-theme="nebula"] .detail-stat,
body[data-theme="nebula"] .admin-settings-card {
  border: 1px solid rgba(226, 232, 240, .9);
  border-radius: var(--nebula-radius-md);
  background: rgba(255, 255, 255, .86);
  box-shadow: var(--nebula-shadow-sm);
}
body[data-theme="nebula"] .analytics-card,
body[data-theme="nebula"] .management-stat { padding: 16px; }
body[data-theme="nebula"] .analytics-card:nth-child(3n + 2) strong,
body[data-theme="nebula"] .management-stat:nth-child(3n + 2) strong { color: var(--nebula-teal-600); }
body[data-theme="nebula"] .management-stat:hover {
  border-color: var(--nebula-indigo-200);
  box-shadow: var(--nebula-shadow-md);
  transform: translateY(-1px);
}
body[data-theme="nebula"] .management-filters,
body[data-theme="nebula"] .management-pagination {
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--nebula-line);
  border-radius: var(--nebula-radius-md);
  background: rgba(248, 250, 252, .82);
}
body[data-theme="nebula"] .management-filter-card { padding: 12px; }
body[data-theme="nebula"] .management-filter-row { gap: 12px; }
body[data-theme="nebula"] .management-quick-actions { gap: 8px; margin-bottom: 16px; }
body[data-theme="nebula"] .pill-action,
body[data-theme="nebula"] .segment-button {
  border-color: var(--nebula-indigo-100);
  border-radius: var(--nebula-radius-pill);
  background: var(--nebula-indigo-50);
  color: var(--nebula-indigo-700);
}
body[data-theme="nebula"] .pill-action.active,
body[data-theme="nebula"] .segment-button.active {
  border-color: var(--nebula-indigo-200);
  background: linear-gradient(120deg, var(--nebula-indigo-100), var(--nebula-teal-100));
  color: var(--nebula-indigo-800);
}

body[data-theme="nebula"] .status-active,
body[data-theme="nebula"] .daily-status-badge.submitted,
body[data-theme="nebula"] .performance-status.done { background: var(--nebula-success-soft); color: var(--nebula-success); }
body[data-theme="nebula"] .status-paused,
body[data-theme="nebula"] .status-pending,
body[data-theme="nebula"] .daily-status-badge.pending,
body[data-theme="nebula"] .daily-admin-status-badge { background: var(--nebula-warning-soft); color: var(--nebula-warning); }
body[data-theme="nebula"] .status-handover { background: var(--nebula-info-soft); color: var(--nebula-info); }
body[data-theme="nebula"] .status-done,
body[data-theme="nebula"] .daily-admin-status-badge.is-complete { background: var(--nebula-success-soft); color: var(--nebula-success); }
body[data-theme="nebula"] .danger-link,
body[data-theme="nebula"] .admin-remove-button { border-color: #fecdd3; background: var(--nebula-danger-soft); color: var(--nebula-danger); }
body[data-theme="nebula"] .tag-toggle.on { border-color: #99f6e4; background: var(--nebula-teal-50); color: var(--nebula-teal-600); }

body[data-theme="nebula"] .daily-group { border-color: var(--nebula-line); border-radius: var(--nebula-radius-md); background: #f8fafc; }
body[data-theme="nebula"] .daily-person-chip { border-radius: var(--nebula-radius-sm); background: #fff; box-shadow: var(--nebula-shadow-sm); }
body[data-theme="nebula"] .daily-person-chip.is-missing { border-color: #fecdd3; border-left: 4px solid var(--nebula-danger); background: #fff; color: var(--nebula-ink); }
body[data-theme="nebula"] .daily-person-chip.is-partial { border-color: #fed7aa; border-left: 4px solid var(--nebula-warning); background: #fff; color: var(--nebula-ink); }
body[data-theme="nebula"] .daily-person-chip.is-complete { border-color: #bbf7d0; border-left: 4px solid var(--nebula-success); background: #fff; color: var(--nebula-ink); }
body[data-theme="nebula"] .daily-review-tag { border-radius: var(--nebula-radius-pill); }

body[data-theme="nebula"] .task-progress-track i { background: linear-gradient(90deg, var(--nebula-indigo-600), var(--nebula-teal-500)); }
body[data-theme="nebula"] .modal-overlay,
body[data-theme="nebula"] .app-dialog-overlay { background: rgba(30, 27, 75, .32); backdrop-filter: blur(4px); }
body[data-theme="nebula"] .task-detail-modal,
body[data-theme="nebula"] .daily-missing-modal,
body[data-theme="nebula"] .home-highlight-modal,
body[data-theme="nebula"] .app-dialog {
  border-color: rgba(199, 210, 254, .72);
  border-radius: var(--nebula-radius-lg);
  box-shadow: var(--nebula-shadow-lg);
}

body.daily-reply-page[data-theme="nebula"] {
  background:
    radial-gradient(circle at 10% -8%, rgba(99, 102, 241, .14), transparent 28rem),
    var(--nebula-canvas);
  color: var(--nebula-ink);
  font-family: Inter, "Noto Sans SC", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
body.daily-reply-page[data-theme="nebula"] .card {
  border: 1px solid rgba(255, 255, 255, .86);
  border-radius: var(--nebula-radius-lg);
  background: var(--nebula-surface);
  box-shadow: var(--nebula-shadow-md);
}
body.daily-reply-page[data-theme="nebula"] .report,
body.daily-reply-page[data-theme="nebula"] .entry,
body.daily-reply-page[data-theme="nebula"] .metric {
  border-radius: var(--nebula-radius-md);
  background: linear-gradient(120deg, #f8fafc, var(--nebula-indigo-50));
}
body.daily-reply-page[data-theme="nebula"] .comment { border-left-color: var(--nebula-teal-500); background: var(--nebula-teal-50); }
body.daily-reply-page[data-theme="nebula"] a { color: var(--nebula-indigo-600); }

@media (max-width: 900px) {
  body[data-theme="nebula"] .topbar { width: calc(100% - 16px); margin-top: 8px; padding: 12px 16px; }
  body[data-theme="nebula"] main { padding: 12px 8px 32px; }
  body[data-theme="nebula"] .home-panel,
  body[data-theme="nebula"] .panel { padding: 16px; }
  body[data-theme="nebula"] h1 { font-size: 24px; }
  body[data-theme="nebula"] h2 { font-size: 20px; }
  body[data-theme="nebula"] h3 { font-size: 17px; }
  body[data-theme="nebula"] .management-filters { gap: 8px; padding: 12px; }
  body[data-theme="nebula"] .management-filter-card { padding: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  body[data-theme="nebula"] *,
  body[data-theme="nebula"] *::before,
  body[data-theme="nebula"] *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}