/*
    The Nexus design system, as tokens.
    Taken from the Capmap frontend where this system is already in use.
    Reference the properties. Do not retype hex codes into a stylesheet.
*/

:root {
  /* surfaces, darkest first */
  --bg-root: #020617;
  --bg-primary: #0f172a;
  --bg-secondary: #1e293b;
  --bg-tertiary: #334155;

  --border-subtle: #1e293b;
  --border-strong: #6b7a91;

  /* text */
  --text-primary: #f1f5f9;
  --text-secondary: #cbd5e1;
  --text-muted: #94a3b8;
  --text-faint: #64748b;
  --text-inverse: #0f172a;

  /* primary accent - indigo */
  --accent: #6366f1;
  --accent-strong: #4f46e5;
  --accent-soft: #a5b4fc;
  --accent-faint: #c7d2fe;

  /* semantic */
  --ok: #10b981;
  --ok-soft: #6ee7b7;
  --warn: #f59e0b;
  --warn-soft: #fcd34d;
  --danger: #f43f5e;
  --danger-soft: #fda4af;
  --info: #06b6d4;

  /* type and shape */
  --font-sans: 'Inter', system-ui, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  --text-xs: 0.6875rem;
  --text-sm: 0.75rem;
  --text-md: 0.8125rem;
  --text-base: 0.875rem;
  --text-lg: 1rem;
  --text-xl: 1.25rem;
  --text-input-min: 16px;

  --leading-tight: 1.25;
  --leading-body: 1.55;

  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  --space-unit: 4px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-8: 48px;

  --ground: radial-gradient(900px 520px at 12% -8%, rgb(99 102 241 / 0.07), transparent 62%),
            radial-gradient(760px 480px at 96% 108%, rgb(6 182 212 / 0.06), transparent 58%),
            var(--bg-root);

  --glass-bg: rgb(30 41 59 / 0.72);
  --glass-border: rgb(255 255 255 / 0.10);
  --glass-blur: blur(20px) saturate(140%);
  --glass-sheen: inset 0 1px 0 rgb(255 255 255 / 0.06);

  --focus-ring: 0 0 0 2px var(--bg-root), 0 0 0 4px var(--accent);

  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.40);
  --shadow-md: 0 4px 12px 0 rgb(0 0 0 / 0.45);
  --shadow-lg: 0 12px 32px 0 rgb(0 0 0 / 0.55);

  --logo-url: url("https://assets.my-nexus.work/nexus-logo.svg");
}

/* reset */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--font-sans);
  background: var(--ground);
  background-attachment: fixed;
  color: var(--text-primary);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  min-height: 100vh;
}

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--bg-primary); }
::-webkit-scrollbar-thumb { background: var(--bg-tertiary); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--border-strong); }

/* layout */
.app { max-width: 1280px; margin: 0 auto; padding: var(--space-6) var(--space-5); }

/* header */
.app-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4); margin-bottom: var(--space-6);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
}
.app-header h1 { font-size: var(--text-xl); font-weight: 700; letter-spacing: -0.02em; }
.app-header .sub { color: var(--text-muted); font-size: var(--text-sm); margin-top: 2px; }

/* nav tabs */
.nav { display: flex; gap: var(--space-1); margin-bottom: var(--space-5); flex-wrap: wrap; }
.nav button {
  background: transparent; border: none; color: var(--text-muted);
  padding: var(--space-2) var(--space-4); border-radius: var(--radius-sm);
  font-family: var(--font-sans); font-size: var(--text-base); font-weight: 500;
  cursor: pointer; transition: all 0.15s ease;
}
.nav button:hover { color: var(--text-primary); background: var(--bg-secondary); }
.nav button.active { color: var(--accent-soft); background: rgb(99 102 241 / 0.12); }

/* cards */
.card {
  background: var(--bg-primary); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md); padding: var(--space-5);
  box-shadow: var(--shadow-sm);
}
.card h2 { font-size: var(--text-lg); font-weight: 600; margin-bottom: var(--space-3); }
.card h3 { font-size: var(--text-base); font-weight: 600; margin-bottom: var(--space-2); color: var(--text-secondary); }

.grid { display: grid; gap: var(--space-4); }
.grid-2 { grid-template-columns: 1fr 1fr; }
.grid-3 { grid-template-columns: 1fr 1fr 1fr; }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 768px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

/* buttons */
.btn {
  background: var(--accent); color: #fff; border: none;
  border-radius: var(--radius-sm); padding: var(--space-3) var(--space-4);
  font-family: var(--font-sans); font-size: var(--text-base); font-weight: 500;
  cursor: pointer; transition: background 0.15s ease;
}
.btn:hover { background: var(--accent-strong); }
.btn:focus-visible { box-shadow: var(--focus-ring); outline: none; }
.btn-secondary {
  background: transparent; color: var(--text-secondary);
  border: 1px solid var(--border-strong);
}
.btn-secondary:hover { background: var(--bg-secondary); color: var(--text-primary); }
.btn-sm { padding: var(--space-2) var(--space-3); font-size: var(--text-sm); }
.btn-danger { background: var(--danger); }
.btn-danger:hover { background: #e11d48; }
.btn-ok { background: var(--ok); }
.btn-ok:hover { background: #059669; }

/* inputs */
input, select, textarea {
  background: var(--bg-root); color: var(--text-primary);
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-3); font-size: var(--text-input-min);
  font-family: var(--font-sans); width: 100%;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--accent); outline: none; box-shadow: var(--focus-ring);
}
input::placeholder { color: var(--text-muted); }
label { display: block; font-size: var(--text-sm); color: var(--text-secondary); margin-bottom: var(--space-1); font-weight: 500; }
.field { margin-bottom: var(--space-3); }
.field-row { display: flex; gap: var(--space-3); align-items: flex-end; flex-wrap: wrap; }
.field-row .field { flex: 1; min-width: 140px; margin-bottom: 0; }

/* badges */
.badge {
  display: inline-flex; align-items: center; padding: 2px var(--space-3);
  border-radius: var(--radius-pill); font-size: var(--text-xs); font-weight: 500;
}
.badge-indigo { background: rgb(99 102 241 / 0.15); color: var(--accent-soft); border: 1px solid rgb(99 102 241 / 0.25); }
.badge-ok { background: rgb(16 185 129 / 0.15); color: var(--ok-soft); border: 1px solid rgb(16 185 129 / 0.25); }
.badge-warn { background: rgb(245 158 11 / 0.15); color: var(--warn-soft); border: 1px solid rgb(245 158 11 / 0.25); }
.badge-danger { background: rgb(244 63 94 / 0.15); color: var(--danger-soft); border: 1px solid rgb(244 63 94 / 0.25); }
.badge-muted { background: var(--bg-secondary); color: var(--text-muted); border: 1px solid var(--border-subtle); }

/* tables */
table { width: 100%; border-collapse: collapse; }
th { text-align: left; color: var(--text-muted); font-weight: 500; font-size: var(--text-sm); text-transform: uppercase; letter-spacing: 0.04em; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border-subtle); }
td { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border-subtle); color: var(--text-primary); }
tr:hover td { background: var(--bg-secondary); }

/* calendar */
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; background: var(--border-subtle); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); overflow: hidden; }
.cal-day { background: var(--bg-primary); min-height: 110px; padding: var(--space-2); display: flex; flex-direction: column; gap: var(--space-1); }
.cal-day.outside { background: var(--bg-root); opacity: 0.5; }
.cal-day.today { box-shadow: inset 0 0 0 2px var(--accent); }
.cal-day .day-num { font-size: var(--text-sm); color: var(--text-muted); font-weight: 500; }
.cal-day.today .day-num { color: var(--accent-soft); font-weight: 700; }
.cal-event { font-size: var(--text-xs); padding: 2px var(--space-2); border-radius: var(--radius-sm); cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-event.task { background: rgb(99 102 241 / 0.18); color: var(--accent-soft); }
.cal-event.task.done { text-decoration: line-through; opacity: 0.5; }
.cal-event.event { background: rgb(6 182 212 / 0.18); color: #67e8f9; }
.cal-event.working { background: rgb(245 158 11 / 0.18); color: var(--warn-soft); }
.cal-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); margin-bottom: var(--space-2); }
.cal-weekdays div { text-align: center; font-size: var(--text-xs); color: var(--text-muted); font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; padding: var(--space-2); }

/* member chips */
.member-chip { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); }
.member-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }

/* stat tiles */
.stat { display: flex; flex-direction: column; gap: var(--space-1); }
.stat .label { font-size: var(--text-sm); color: var(--text-muted); }
.stat .value { font-size: var(--text-xl); font-weight: 700; }
.stat .value.ok { color: var(--ok-soft); }
.stat .value.danger { color: var(--danger-soft); }

/* empty state */
.empty { text-align: center; padding: var(--space-8) var(--space-4); color: var(--text-muted); }
.empty .big { font-size: var(--text-lg); margin-bottom: var(--space-2); }

/* loading */
.nexus-loading { display: grid; place-items: center; gap: 12px; min-height: 120px; color: var(--text-muted); font-size: 13px; }
.nexus-loading::before { content: ""; width: 44px; height: 44px; background: var(--logo-url) center / contain no-repeat; animation: nexus-pulse 1.4s ease-in-out infinite; }
@keyframes nexus-pulse { 0%, 100% { opacity: .35; transform: scale(.94); } 50% { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .nexus-loading::before { animation: none; opacity: .7; } }

/* modal */
.modal-bg { position: fixed; inset: 0; background: rgb(2 6 23 / 0.85); display: flex; align-items: center; justify-content: center; z-index: 100; padding: var(--space-4); }
.modal { background: var(--bg-primary); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: var(--space-5); max-width: 32rem; width: 100%; max-height: 85vh; overflow-y: auto; box-shadow: var(--shadow-lg); }
.modal h2 { margin-bottom: var(--space-4); }

/* utility */
.row { display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; }
.row.between { justify-content: space-between; }
.muted { color: var(--text-muted); }
.secondary { color: var(--text-secondary); }
.mono { font-family: var(--font-mono); }
.hidden { display: none !important; }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mb-3 { margin-bottom: var(--space-3); }
.text-sm { font-size: var(--text-sm); }
.text-xs { font-size: var(--text-xs); }