:root {
  --bg: #fafafa;
  --fg: #222;
  --muted: #777;
  --line: #e2e2e2;
  --accent: #2986cc;
  --lived: #c9c9c9;
  --square: #f0f0f0;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, "PT Sans", Segoe UI, Roboto, sans-serif;
  color: var(--fg);
  background: var(--bg);
}

.topbar {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 10px 18px;
  background: #fff;
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 10;
}
.topbar .brand { font-weight: 700; font-size: 18px; text-decoration: none; color: var(--fg); }
.topbar nav { display: flex; align-items: center; gap: 14px; }
.topbar nav a { text-decoration: none; color: var(--muted); font-size: 14px; }
.topbar nav a:hover { color: var(--accent); }
.nav-user { font-size: 13px; color: var(--muted); margin-left: auto; }
.logout-form { margin: 0; }
.logout-form button {
  border: 1px solid var(--line); background: #fff; color: var(--muted);
  font-size: 13px; padding: 4px 10px; border-radius: 6px; cursor: pointer;
}
.logout-form button:hover { color: var(--accent); border-color: var(--accent); }

/* --- Login page --- */
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; }
.login-card {
  width: 320px; max-width: 90vw; background: #fff; border: 1px solid var(--line);
  border-radius: 10px; padding: 28px 24px; display: flex; flex-direction: column;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}
.login-card h1 { font-size: 20px; margin: 0 0 18px; text-align: center; }
.login-card label { font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.login-card input[type="text"], .login-card input[type="password"] {
  padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px;
  margin-bottom: 14px; font-size: 15px; width: 100%;
}
.login-card button {
  padding: 9px 14px; border: 0; border-radius: 6px; background: var(--accent);
  color: #fff; font-size: 15px; cursor: pointer; margin-top: 4px;
}
.login-error { color: #c0392b; font-size: 13px; margin: 0 0 14px; text-align: center; }

/* --- Two-factor wizard (login / setup / backup tokens) --- */
.login-card.two-factor { align-items: stretch; }
.login-card.two-factor .brand {
  text-decoration: none; color: var(--fg); font-weight: 700; font-size: 18px;
  text-align: center; margin-bottom: 16px;
}
.login-card.two-factor h1 { font-size: 19px; margin: 0 0 12px; }
.login-card.two-factor p { font-size: 14px; color: var(--fg); margin: 0 0 12px; }
.login-card.two-factor label { font-size: 12px; color: var(--muted); margin-bottom: 4px; display: block; }
.login-card.two-factor input[type="text"],
.login-card.two-factor input[type="password"],
.login-card.two-factor input[type="number"] {
  padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px;
  margin-bottom: 14px; font-size: 15px; width: 100%;
}
.login-card.two-factor img { display: block; margin: 6px auto 14px; }   /* QR code */
.login-card.two-factor ul { padding-left: 18px; }
.login-card.two-factor button,
.login-card.two-factor .btn, .login-card.two-factor a.btn {
  display: inline-block; padding: 9px 14px; border: 0; border-radius: 6px;
  background: var(--accent); color: #fff; font-size: 15px; cursor: pointer;
  text-decoration: none; margin: 2px 6px 2px 0;
}
.login-card.two-factor .btn-secondary, .login-card.two-factor a.btn-secondary {
  background: #fff; color: var(--muted); border: 1px solid var(--line);
}
.login-card.two-factor .errorlist { color: #c0392b; font-size: 13px; list-style: none; padding: 0; }

.content { padding: 18px 24px; width: 100%; }

.messages { list-style: none; padding: 0; }
.messages li { padding: 8px 12px; border-radius: 6px; margin-bottom: 6px; }
.messages .success { background: #e3f6e3; }
.messages .error { background: #fde0e0; }

/* --- Stats / filters --- */
.stats { display: flex; gap: 24px; margin-bottom: 16px; flex-wrap: wrap; }
.stat { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 10px 16px; }
.stat .num { font-size: 22px; font-weight: 700; }
.stat .label { font-size: 12px; color: var(--muted); }

.filters { display: flex; gap: 12px; align-items: end; flex-wrap: wrap; margin-bottom: 18px; }
.filters label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 2px; }
.filters input, .filters select { padding: 5px 8px; border: 1px solid var(--line); border-radius: 6px; }
.filters button { padding: 6px 14px; border: 0; border-radius: 6px; background: var(--accent); color: #fff; cursor: pointer; }
.tabs a { padding: 5px 12px; border: 1px solid var(--line); border-radius: 6px; text-decoration: none; color: var(--muted); margin-right: 6px; }
.tabs a.active { background: var(--accent); color: #fff; border-color: var(--accent); }

/* --- Layout: calendar + sidebar --- */
.cal-layout { display: flex; gap: 18px; align-items: flex-start; }
.cal-main { flex: 1; min-width: 0; }
.cal-side { width: 300px; flex: none; position: sticky; top: 64px; }

/* --- Calendar grid (old-style big squares) --- */
.cal-group { margin-bottom: 14px; }
.group-title { text-align: left; margin: 4px 0 8px; position: relative; }
.group-title span {
  display: inline-block; background: var(--bg); padding-right: 10px;
  font-size: 13px; color: var(--muted); position: relative; z-index: 1;
}
.group-title::after {
  content: ""; position: absolute; left: 0; right: 0; top: 50%;
  height: 2px; background: var(--line);
}
.cal-row { display: flex; flex-wrap: wrap; gap: 6px; }

/* Seasons / months flow as compact square-blocks side-by-side (old style);
   years stay full-width rows. */
.calendar.mode-seasons,
.calendar.mode-months {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 8px 22px;
}
.calendar.mode-seasons .cal-group { width: 254px; min-height: 270px; }   /* 4 cols */
.calendar.mode-months  .cal-group { width: 192px; min-height: 150px; }   /* 3 cols */

.square {
  position: relative;
  width: 56px; height: 56px;
  background: var(--square);
  border: 1px solid #e3e3e3;
  border-radius: 5px;
  overflow: hidden;
  cursor: default;
}
.square.lived { background: #7f7f7f; border-color: #6f6f6f; }
.square.has-events { cursor: pointer; border-color: #777; }
.square.has-events:hover { opacity: 0.75; }
.square.current { outline: 2px solid var(--accent); outline-offset: 1px; }
.square.has-important { box-shadow: 0 0 0 2px #e0c200; }
.star { color: #e0a000; }

/* faint background-status tint (long-term periods) */
.square .sq-bg { position: absolute; inset: 0; opacity: 0.28; }
.sq-popover .is-bg { color: var(--muted); }

/* stacked event-color bars inside a square */
.square .overlays { position: absolute; inset: 0; display: flex; flex-direction: column; }
.square .overlay { width: 100%; }
.square .count {
  position: absolute; top: 2px; right: 2px;
  min-width: 16px; height: 16px; padding: 0 2px;
  background: #fff; color: #333; border-radius: 8px;
  font-size: 10px; font-weight: 700; line-height: 16px; text-align: center;
  z-index: 1;
}

/* --- Bird's-eye "life in weeks" --- */
.bird-head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 12px; }
.cat-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 16px; }
.cat-filter-label { font-size: 12px; color: var(--muted); margin-right: 4px; }
.cat-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border: 1px solid var(--line); border-radius: 999px;
  font-size: 13px; text-decoration: none; color: var(--fg); background: #fff;
}
.cat-chip:hover { border-color: var(--muted); }
.cat-chip.off { opacity: 0.5; text-decoration: line-through; background: #f3f3f3; }
.cat-clear { font-size: 12px; color: var(--accent); text-decoration: none; margin-left: 4px; }
.cat-clear:hover { text-decoration: underline; }
.bird .bird-row { display: flex; align-items: center; gap: 8px; margin-bottom: 2px; }
.bird .bird-year { width: 40px; flex: none; text-align: right; font-size: 9px; color: var(--muted); }
.bird .cal-row { gap: 2px; flex-wrap: nowrap; }
.bird .square {
  width: 11px; height: 11px; border-radius: 2px; border-width: 1px;
}
.bird .square.current { outline-width: 2px; }
.bird .square.has-important { box-shadow: 0 0 0 1px #e0c200; }
.bird .square .count { display: none; }   /* too small for a badge */
@media (max-width: 820px) {
  .bird .square { width: 9px; height: 9px; }
  .bird .bird-year { width: 30px; }
}

/* --- Month view (classic day calendar) --- */
.month-bar { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
/* Both the day grid and the bar overlay use zero gaps + cell borders, so a
   column is exactly 1/7 of the width in each — guaranteeing the bars line up. */
.month-grid-head {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
  border: 1px solid var(--line); border-bottom: 0;
}
.month-weekday { padding: 8px; text-align: center; font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; }
.month-weekday + .month-weekday { border-left: 1px solid var(--line); }

.month-week { position: relative; border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
.month-week-cells { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }

/* lane bars overlaid across the week, aligned to the day columns */
.month-bars {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); grid-auto-rows: 18px; row-gap: 2px;
  padding-top: 26px;
}
.month-bar-ev {
  pointer-events: auto; height: 18px; line-height: 16px; margin: 0 3px;
  font-size: 11px; color: #fff; border: 0; border-radius: 5px; padding: 0 7px;
  text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  cursor: pointer; box-shadow: 0 1px 1px rgba(0,0,0,.2);
}
.month-bar-ev.open-l { border-top-left-radius: 0; border-bottom-left-radius: 0; margin-left: 0; }
.month-bar-ev.open-r { border-top-right-radius: 0; border-bottom-right-radius: 0; margin-right: 0; }
.month-bar-ev:hover { filter: brightness(1.08); }
.month-bar-reserve { height: calc(var(--lanes, 0) * 20px); flex: none; }

.month-cell { background: #fff; min-height: 110px; padding: 4px 6px; display: flex; flex-direction: column; position: relative; border-bottom: 1px solid var(--line); }
.month-cell + .month-cell { border-left: 1px solid var(--line); }
.month-bg { position: absolute; inset: 0; opacity: 0.16; z-index: 0; pointer-events: none; }
.month-daynum, .month-events { position: relative; z-index: 1; }
.month-cell.out { background: #fafafa; }
.month-cell.out .month-daynum a { color: #bbb; }
.month-cell.today { background: #fff8e6; box-shadow: inset 0 0 0 2px var(--accent); }
.month-daynum { display: flex; justify-content: space-between; align-items: center; font-size: 13px; font-weight: 600; }
.month-daynum a { text-decoration: none; color: var(--fg); }
.month-daynum a:hover { color: var(--accent); }
.month-daynum-right { display: inline-flex; align-items: center; gap: 4px; }
.month-note { color: var(--accent); font-size: 12px; }
.month-add {
  width: 18px; height: 18px; line-height: 15px; text-align: center; padding: 0;
  border: 1px solid var(--accent); border-radius: 50%; background: #fff; color: var(--accent);
  font-size: 14px; cursor: pointer; opacity: 0; transition: opacity .12s;
}
.month-cell:hover .month-add, .month-add:focus { opacity: 1; }
.month-add:hover { background: var(--accent); color: #fff; }
.month-events { margin-top: 4px; display: flex; flex-direction: column; gap: 2px; overflow: hidden; }
.month-ev {
  font-size: 12px; position: relative; padding-left: 14px; padding-right: 16px;
  display: flex; align-items: center;
}
.month-ev .dot { position: absolute; left: 0; top: 4px; width: 8px; height: 8px; }
.month-ev-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.month-ev-edit {
  position: absolute; right: 0; top: 0; width: 16px; height: 16px; line-height: 1; padding: 0;
  border: 0; background: none; cursor: pointer; color: var(--muted); font-size: 12px;
  opacity: 0; transition: opacity .12s;
}
.month-ev:hover .month-ev-edit, .month-ev-edit:focus { opacity: 1; }
.month-ev-edit:hover { color: var(--accent); }

/* edit drawer: fetched form fills the drawer height */
#modal-event-edit .edit-body { display: flex; flex-direction: column; flex: 1; min-height: 0; }

@media (max-width: 700px) {
  .month-cell { min-height: 72px; }
  .month-ev { font-size: 10px; }
}

/* --- Years grid (matches old "show in years" view) --- */
.years-grid { display: flex; flex-wrap: wrap; }
.year-square {
  position: relative;
  width: 80px; height: 80px;
  margin: 6px;
  padding: 8px;
  border: 1px solid transparent;
  background: #f4f4f4; /* future years */
}
.year-square.lived { background: #fbe0d6; border: 1px solid #e0b8aa; }  /* lived, no events: bleak coral */
.year-square.lived.clickable { background: coral; border: 1px solid #777; }  /* lived, with events */
.year-square.current { background: coral; border: 1px solid #777; }
.year-square.clickable { cursor: pointer; }
.year-square.clickable:hover { opacity: 0.6; }
.year-square .square-events-count {
  position: absolute; top: 8px; left: 8px;
  width: 24px; height: 24px; line-height: 24px; text-align: center;
  background: #fff; border-radius: 50%;
  font-size: 11px; font-weight: 700;
}
.year-square .year-square-year-number {
  position: absolute; bottom: 4px; right: 4px;
  background: #fff; padding: 1px 3px;
  height: 15px; line-height: 15px; font-size: 10px;
}

/* --- Sidebar action buttons --- */
.side-actions { display: flex; gap: 8px; margin-bottom: 14px; }
.action-btn {
  flex: 1; padding: 9px 12px; border: 0; border-radius: 8px;
  background: var(--accent); color: #fff; font-size: 14px; font-weight: 600; cursor: pointer;
}
.action-btn:hover { opacity: 0.9; }
.action-btn.secondary { background: #6aa84f; }
.btn-ghost { padding: 9px 14px; border: 1px solid var(--line); border-radius: 8px; background: #fff; cursor: pointer; }

/* --- Modal --- */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(0,0,0,0.4);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 6vh 16px; overflow: auto;
}
.modal-backdrop[hidden] { display: none; }
.modal {
  width: 100%; max-width: 620px;
  background: #fff; border-radius: 12px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.3);
  padding: 24px 28px;
}
.modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.modal-head h3 { margin: 0; }
.modal-close { border: 0; background: none; font-size: 24px; line-height: 1; cursor: pointer; color: var(--muted); }
.modal label { display: block; font-size: 12px; color: var(--muted); margin: 12px 0 4px; }
.modal label.check { display: flex; align-items: center; gap: 6px; margin-top: 26px; font-size: 14px; color: var(--fg); }
.modal input[type=text], .modal input[type=date], .modal textarea, .modal select {
  width: 100%; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; font: inherit;
}
.modal input[type=color] { width: 48px; height: 38px; padding: 2px; border: 1px solid var(--line); border-radius: 8px; }
.modal .row { display: flex; gap: 12px; align-items: flex-start; }
.modal .row > div { flex: 1; }
.modal-foot { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }

/* --- Event drawer: full-height side panel, two columns --- */
.drawer-backdrop { align-items: stretch; justify-content: flex-end; padding: 0; }
.modal.drawer {
  max-width: min(960px, 96vw); width: min(960px, 96vw);
  height: 100vh; max-height: 100vh;
  border-radius: 0; padding: 0;
  display: flex; flex-direction: column;
  box-shadow: -12px 0 40px rgba(0,0,0,0.3);
  animation: drawer-in .22s ease;
}
@keyframes drawer-in { from { transform: translateX(40px); opacity: .5; } to { transform: none; opacity: 1; } }
.drawer .modal-head { padding: 16px 24px; margin: 0; border-bottom: 1px solid var(--line); }
.drawer-form { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.drawer-cols { display: flex; flex: 1; min-height: 0; }
.drawer-left { width: 380px; flex: none; padding: 18px 24px; overflow: auto; border-right: 1px solid var(--line); }
.drawer-right { flex: 1; min-width: 0; display: flex; flex-direction: column; padding: 18px 24px; }
.drawer-right > label { margin-top: 0; }
.drawer-right textarea { flex: 1; resize: none; min-height: 200px; }
.drawer .modal-foot { padding: 14px 24px; margin: 0; border-top: 1px solid var(--line); }
@media (max-width: 720px) {
  .modal.drawer { width: 100vw; max-width: 100vw; }
  .drawer-cols { flex-direction: column; overflow: auto; }
  .drawer-left { width: auto; border-right: 0; border-bottom: 1px solid var(--line); }
  .drawer-right textarea { min-height: 160px; }
}


/* --- Sidebar: info block --- */
.infoblock { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 12px; margin-bottom: 14px; }
.ib-head { font-size: 14px; margin-bottom: 8px; }
.ib-head strong { font-size: 18px; }
.ib-bar { display: flex; height: 14px; background: #e9e9e9; border-radius: 7px; overflow: hidden; }
.ib-fill { height: 100%; background: #6aa84f; }      /* lived awake */
.ib-future { height: 100%; background: #cfe3c2; }    /* available awake */
.ib-sleep { height: 100%; background: #9a9a9a; }     /* sleep (past + future) */
.ib-legend { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); margin-top: 6px; }
.ib-legend span::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 4px; vertical-align: middle; }
.ib-leg-awake::before { background: #6aa84f; }
.ib-leg-free::before { background: #cfe3c2; }
.ib-leg-sleep::before { background: #9a9a9a; }

/* --- Sidebar: events feed --- */
.feed { background: #fff; border: 1px solid var(--line); border-radius: 8px; }
.feed-head { padding: 10px 12px; border-bottom: 1px solid var(--line); font-weight: 600; }
.feed-search {
  width: 100%; padding: 8px 12px; border: 0; border-bottom: 1px solid var(--line);
  font: inherit; background: #fff; outline: none;
}
.feed-search:focus { background: #f7fbff; }
.feed-list { list-style: none; margin: 0; padding: 0; max-height: 70vh; overflow: auto; }
.feed-list li { padding: 8px 12px; border-bottom: 1px solid #f0f0f0; font-size: 15px; position: relative; padding-left: 26px; }
.feed-list li.feed-month {
  padding: 6px 12px; position: sticky; top: 0;
  background: #f3f3f3; color: var(--muted); font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; border-bottom: 1px solid var(--line);
}
.feed-list .dot { position: absolute; left: 12px; top: 11px; }
.feed-date { font-size: 11px; color: var(--muted); }
.feed-list a { text-decoration: none; color: var(--fg); }
.feed-list a:hover { color: var(--accent); }

.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; border: 1px solid rgba(0,0,0,.15); }

/* --- Popover --- */
.sq-popover {
  position: fixed; z-index: 50; min-width: 220px; max-width: 280px;
  background: #fff; border: 1px solid #ccc; border-radius: 8px;
  box-shadow: 0 14px 28px rgba(0,0,0,0.22), 0 10px 10px rgba(0,0,0,0.18);
  padding: 10px 12px;
}
.sq-popover .pop-head { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--muted); margin-bottom: 6px; }
.sq-popover .pop-close { border: 0; background: none; font-size: 18px; line-height: 1; cursor: pointer; color: var(--muted); }
/* date-grouped tree */
.sq-popover .pop-tree { list-style: none; margin: 0; padding: 0; max-height: 280px; overflow: auto; }
.sq-popover .pop-day-group { margin-bottom: 8px; }
.sq-popover .pop-date {
  display: block; font-size: 13px; font-weight: 700; color: var(--accent);
  text-decoration: none; margin-bottom: 3px;
}
.sq-popover .pop-date:hover { text-decoration: underline; }
.sq-popover .pop-day-group ul { list-style: none; margin: 0; padding: 0 0 0 12px; border-left: 2px solid var(--line); }
.sq-popover .pop-day-group ul li { padding: 3px 0 3px 18px; position: relative; font-size: 15px; }
.sq-popover .pop-day-group ul .dot { position: absolute; left: 0; top: 5px; }
.day-events { list-style: none; padding: 0; margin: 0; }
.day-events li { padding: 4px 0; }
.day-note { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); }
.sq-popover .pop-day { display: inline-block; margin-top: 8px; font-size: 13px; text-decoration: none; color: var(--accent); }

@media (max-width: 860px) {
  .cal-layout { flex-direction: column; }
  .cal-side { width: 100%; position: static; }
}

/* --- Generic tables / cards --- */
table { border-collapse: collapse; width: 100%; background: #fff; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); font-size: 14px; }
th { color: var(--muted); font-weight: 600; }
.swatch { display: inline-block; width: 13px; height: 13px; border: 1px solid #999; border-radius: 3px; vertical-align: middle; margin-right: 6px; }
.chip { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 12px; margin: 1px; color: #333; }
.card { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 14px; margin-bottom: 12px; }
h1 { font-size: 22px; }
.muted { color: var(--muted); }