@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');

/* ═══════════════════════════════════════════════════════════════════════
   VEILFORM — AMBER CRT TERMINAL THEME
   Cassette punk · Aliens console aesthetic
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Variables ─────────────────────────────────────────────────────────── */
:root {
  --bg:           #050400;
  --bg-soft:      #0c0b00;
  --bg-1:         #060500;
  --bg-2:         #0d0b00;
  --bg-3:         #141200;

  --panel:        rgba(28,24,0,0.82);
  --panel-strong: rgba(32,28,0,0.90);
  --panel-border: rgba(255,208,60,0.45);

  --text:         #ffd060;
  --muted:        #d09020;
  --muted-2:      #a06c10;

  --gold:         #ffd060;
  --gold-2:       #cc9a20;
  --gold-soft:    rgba(255,208,60,0.16);
  --gold-softer:  rgba(255,208,60,0.08);

  --input-bg:     rgba(255,208,60,0.05);
  --input-border: rgba(255,208,60,0.30);

  --button:       #ffd060;
  --button-text:  #050400;

  --ok:           #39ff14;
  --warn:         #ff8c00;
  --danger:       #ff3300;
  --success:      #39ff14;

  /* Calendar category colours */
  --cat-event:    #ffd060;
  --cat-meeting:  #ff9a20;
  --cat-release:  #39ff14;
  --cat-holiday:  #ff3300;
  --cat-personal: #d09020;

  --glow:        0 0 8px rgba(255,208,60,0.80);
  --glow-strong: 0 0 14px rgba(255,208,60,1.0), 0 0 30px rgba(255,208,60,0.50);
  --card-glow:   0 0 20px rgba(255,208,60,0.12);

  --font:   'VT323', 'Courier New', Courier, monospace;
  --radius: 0px;
}

/* ── CRT scan lines ─────────────────────────────────────────────────────── */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    transparent      0px,
    transparent      2px,
    rgba(0,0,0,0.18) 2px,
    rgba(0,0,0,0.18) 4px
  );
}

/* ── Reset & base ───────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
  font-family: var(--font);
  font-size: 18px;
  background: var(--bg);
  color: var(--text);
  overflow-x: hidden;
}

/* ── Kill old ambient effects ───────────────────────────────────────────── */
.nebula     { display: none !important; }
#star-field { display: none !important; }
.stars      { display: none !important; }

/* ── Topbar ─────────────────────────────────────────────────────────────── */
.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 20px;
  border-bottom: 1px solid var(--panel-border);
  background: rgba(3,2,0,0.98);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* ── Logo ───────────────────────────────────────────────────────────────── */
.logo,
.tb-logo {
  font-family: var(--font);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text);
  text-shadow: var(--glow);
  text-decoration: none;
  /* kill gradient-clip text */
  background: none;
  -webkit-background-clip: unset;
  background-clip: unset;
  -webkit-text-fill-color: var(--text);
}

/* ── Topbar layout helpers ──────────────────────────────────────────────── */
.topbar-right,
.topbar-center,
.topbar-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.topbar-center { justify-content: center; flex: 1; min-width: 0; }

/* ── Clock ──────────────────────────────────────────────────────────────── */
.clock,
#liveClock {
  font-family: var(--font);
  font-size: 20px;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.06em;
  padding: 4px 10px;
  border: 1px solid var(--panel-border);
  border-radius: 0;
  background: transparent;
}

/* ── User pill & avatar ─────────────────────────────────────────────────── */
.user-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px;
  border: 1px solid var(--panel-border);
  border-radius: 0;
  background: transparent;
  font-family: var(--font);
  font-size: 18px;
  color: var(--muted);
}

.avatar {
  width: 22px;
  height: 22px;
  border-radius: 0;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 16px;
  background: var(--gold);
  color: var(--bg);
}

/* ── All button variants ────────────────────────────────────────────────── */
.btn-link,
.btn-ghost,
.topbar-btn,
.logout-btn {
  appearance: none;
  text-decoration: none;
  border: 1px solid var(--panel-border);
  color: var(--muted);
  background: transparent;
  padding: 5px 12px;
  font-family: var(--font);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.1s, background 0.1s, text-shadow 0.1s, border-color 0.1s;
  display: inline-block;
  border-radius: 0;
}
.btn-link:hover,
.btn-ghost:hover,
.topbar-btn:hover,
.logout-btn:hover {
  background: var(--gold-soft);
  color: var(--text);
  text-shadow: var(--glow);
  border-color: var(--gold);
}

/* ── Panels ─────────────────────────────────────────────────────────────── */
.panel {
  border: 1px solid var(--panel-border);
  background: var(--panel-strong);
  border-radius: 0;
  padding: 16px;
}
.panel h2 {
  margin: 0 0 12px;
  font-size: 16px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  font-family: var(--font);
}

/* ── Activity items ─────────────────────────────────────────────────────── */
.activity { display: grid; gap: 6px; }
.activity-item {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  padding: 8px 10px;
  border: 1px solid var(--panel-border);
  background: var(--gold-softer);
  border-radius: 0;
}
.activity-item strong { font-size: 18px; color: var(--text); }
.activity-item span   { font-size: 16px; color: var(--muted); }

/* ── Form elements ──────────────────────────────────────────────────────── */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="date"],
input[type="time"],
input[type="search"],
textarea,
select {
  font-family: var(--font);
  font-size: 18px;
  background: var(--input-bg);
  color: var(--text);
  border: 1px solid var(--input-border);
  border-radius: 0;
  padding: 8px 12px;
  outline: none;
  transition: border-color 0.1s, box-shadow 0.1s;
}
input::placeholder,
textarea::placeholder { color: var(--muted-2); }

input:focus,
textarea:focus,
select:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 1px var(--gold), var(--glow);
}

/* ── Submit / primary button ────────────────────────────────────────────── */
.submit {
  font-family: var(--font);
  border-radius: 0;
  border: 1px solid var(--gold);
  background: transparent;
  color: var(--text);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: none;
  transition: background 0.1s, text-shadow 0.1s, box-shadow 0.1s;
}
.submit:hover {
  background: var(--gold-soft);
  text-shadow: var(--glow);
  box-shadow: var(--glow);
  transform: none;
  filter: none;
}

/* ── Chip / filter pills ────────────────────────────────────────────────── */
.chip {
  appearance: none;
  border: 1px solid var(--panel-border);
  background: transparent;
  color: var(--muted);
  padding: 5px 12px;
  border-radius: 0;
  font-family: var(--font);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  cursor: pointer;
  transition: 0.1s;
}
.chip:hover,
.chip.active {
  color: var(--text);
  background: var(--gold-soft);
  border-color: var(--gold);
  text-shadow: var(--glow);
}

/* ── Status messages ────────────────────────────────────────────────────── */
.status        { font-size: 18px; color: var(--muted); font-family: var(--font); }
.status.error  { color: var(--danger); text-shadow: 0 0 6px rgba(255,34,0,0.5); }
.status.success { color: var(--ok);    text-shadow: 0 0 6px rgba(57,255,20,0.5); }

/* ── Scrollbar ──────────────────────────────────────────────────────────── */
::-webkit-scrollbar       { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--muted-2); border-radius: 0; }
::-webkit-scrollbar-thumb:hover { background: var(--muted); }

/* ── Dashboard: tool cards ──────────────────────────────────────────────── */
.card {
  border: 1px solid var(--panel-border);
  background: var(--panel);
  border-radius: 0;
  box-shadow: none;
}
.card:hover {
  border-color: var(--gold);
  box-shadow: 0 0 18px rgba(255,176,0,0.14);
  transform: translateY(-2px);
}
.icon {
  border: 1px solid var(--panel-border);
  background: var(--gold-softer);
  border-radius: 0;
}
.icon svg  { stroke: var(--gold); }
.card h3   { color: var(--text); font-family: var(--font); font-size: 18px; }
.card p    { color: var(--muted); font-size: 18px; }
.dot       { background: var(--gold); border-radius: 0; box-shadow: var(--glow); }
.badge     { font-size: 16px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.badge.core    { background: rgba(57,255,20,0.08);  color: var(--ok);   border: 1px solid rgba(57,255,20,0.25);   border-radius: 0; }
.badge.wellness{ background: rgba(255,140,0,0.08);  color: var(--warn); border: 1px solid rgba(255,140,0,0.25);   border-radius: 0; }

/* ── Dashboard: overview widgets ───────────────────────────────────────── */
.ov-card {
  border: 1px solid var(--panel-border);
  background: var(--panel-strong);
  border-radius: 0;
}
.ov-card:hover {
  border-color: var(--gold);
  box-shadow: 0 0 18px rgba(255,176,0,0.10);
}
.ov-badge       { background: var(--gold-softer); border: 1px solid var(--panel-border); border-radius: 0; color: var(--text); font-size: 16px; }
.ov-label       { font-size: 16px; }
.ov-event-date  { color: var(--text); font-size: 16px; }
.ov-event-title { color: var(--text); font-size: 18px; }
.ov-empty       { color: var(--muted-2); font-size: 18px; }
.ov-grocery-item{ color: var(--text); font-size: 18px; }
.ov-grocery-item::before { background: var(--muted-2); border-radius: 0; }
.ov-more           { color: var(--muted-2); font-size: 18px; }
.ov-tracker-task   { color: var(--text); font-size: 20px; }
.ov-tracker-project{ color: var(--muted); font-size: 18px; }
.ov-tracker-time   { color: var(--gold); }
.ov-today-val      { color: var(--gold); }
.ov-today-sub      { color: var(--muted); font-size: 18px; }
.live-dot          { background: var(--ok); box-shadow: 0 0 6px rgba(57,255,20,0.7); border-radius: 0; }

/* ── Command palette ────────────────────────────────────────────────────── */
.vf-cmdk-overlay {
  backdrop-filter: none;
  background: rgba(3,2,0,0.88);
}
.vf-cmdk {
  border: 1px solid var(--panel-border);
  border-radius: 0;
  background: rgba(5,4,0,0.99);
  color: var(--text);
  font-family: var(--font);
  box-shadow: 0 0 32px rgba(255,176,0,0.10);
}
.vf-cmdk-head {
  border-bottom: 1px solid var(--panel-border);
  background: transparent;
}
.vf-cmdk-input {
  border: 1px solid var(--panel-border);
  border-radius: 0;
  background: var(--gold-softer);
  color: var(--text);
  font-family: var(--font);
}
.vf-cmdk-input:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 1px var(--gold), var(--glow);
}
.vf-cmdk-item {
  border: 1px solid var(--panel-border);
  border-radius: 0;
  background: transparent;
}
.vf-cmdk-item:hover,
.vf-cmdk-item.active {
  border-color: var(--gold);
  background: var(--gold-soft);
}
.vf-cmdk-title { color: var(--text); font-family: var(--font); }
.vf-cmdk-meta  { color: var(--muted); border: 1px solid var(--panel-border); border-radius: 0; font-family: var(--font); }
.vf-cmdk-empty { color: var(--muted); font-family: var(--font); }
.vf-cmdk-foot  { border-top: 1px solid var(--panel-border); color: var(--muted-2); font-family: var(--font); }

/* ── Login page ─────────────────────────────────────────────────────────── */
.login-card {
  border: 1px solid var(--panel-border);
  border-radius: 0;
  background: var(--panel);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: 0 0 40px rgba(255,176,0,0.08);
}
.login-card::before { display: none; }

h1 { color: var(--text); letter-spacing: 0.02em; }

.title-accent {
  background: none;
  -webkit-background-clip: unset;
  background-clip: unset;
  -webkit-text-fill-color: var(--text);
  color: var(--text);
  text-shadow: var(--glow-strong);
}

.card-top p { color: var(--muted); }

.password-toggle {
  font-family: var(--font);
  border-radius: 0;
  background: transparent;
  border: 1px solid var(--panel-border);
  color: var(--muted);
  font-size: 16px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.password-toggle:hover {
  background: var(--gold-soft);
  color: var(--text);
}

.check-box {
  border-radius: 0;
  border: 1px solid var(--panel-border);
  background: transparent;
  box-shadow: none;
}
.check-box::after {
  border-radius: 0;
  background: var(--gold);
  box-shadow: var(--glow);
}
.check input:checked + .check-box {
  border-color: var(--gold);
  background: var(--gold-softer);
  box-shadow: 0 0 0 3px var(--gold-softer);
}

/* Solar system — amber phosphor radar tint */
.solar-bg {
  filter: sepia(1) hue-rotate(-10deg) saturate(0.5) brightness(0.65);
}
.orbit { border-color: rgba(255,176,0,0.20); }

/* ── Gradient text → flat amber (all pages) ─────────────────────────────── */
.page-title span,
.hero h1 span {
  background: none;
  -webkit-background-clip: unset;
  background-clip: unset;
  -webkit-text-fill-color: var(--text);
  color: var(--text);
  text-shadow: var(--glow);
}

/* ── Board editor toolbar ────────────────────────────────────────────────── */
#toolbar {
  background: rgba(3,2,0,0.98);
  border-bottom: 1px solid var(--panel-border);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.tb-sep { background: var(--panel-border); }
#boardTitleInput {
  font-family: var(--font);
  color: var(--text);
  background: transparent;
  border-radius: 0;
}
#boardTitleInput:hover,
#boardTitleInput:focus { background: var(--gold-softer); }

/* ── Tab nav (time tracker) ─────────────────────────────────────────────── */
.tab-nav {
  border-bottom: 1px solid var(--panel-border);
  background: rgba(3,2,0,0.98);
  backdrop-filter: none;
}
.tab-btn {
  font-family: var(--font);
  font-size: 16px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom-color: transparent;
}
.tab-btn:hover  { color: var(--text); }
.tab-btn.active { color: var(--text); border-bottom-color: var(--gold); }

/* ── Login: preserve left-padding for inline icons ──────────────────────── */
.input-wrap input[type="text"],
.input-wrap input[type="password"],
.input-wrap input[type="email"] {
  padding: 14px 18px 14px 48px;
}

/* ── Board title input: keep borderless ─────────────────────────────────── */
#boardTitleInput {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}
#boardTitleInput:focus {
  border: none !important;
  box-shadow: none !important;
  background: var(--gold-softer) !important;
}

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .topbar { padding: 10px 14px; }
  .user-pill span { display: none; }
}