/* Base */
body { font-family: system-ui, sans-serif; margin: 16px; }
header { margin-bottom: 16px; }
a { text-decoration: none; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 8px; border-bottom: 1px solid #ddd; vertical-align: top; }
h1, h2 { margin: 12px 0; }

/* Calendar grid (month/week) */
.cal {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
  align-items: start;
  grid-auto-rows: auto;
}

/* Week view: match all columns to tallest */
.cal.week { 
  grid-template-columns: repeat(7, 1fr);
  align-items: stretch;  /* stretch all items to same height */
  grid-auto-rows: 1fr;   /* equal row heights */
}

.cal-head {
  font-weight: 600; text-align: center; padding: 8px;
  border-bottom: 1px solid #ddd; display: flex; justify-content: space-between; align-items: center;
}

.cal-cell {
  border: 1px solid #e5e5e5;
  padding: 8px;
  border-radius: 10px;
  background: #fff;
}

/* Month: fixed-height cells with internal scroll */
.cal.month .cal-cell {
  height: 180px;                 /* adjust 160–220 if you want */
  position: relative;
  display: flex;
  flex-direction: column;
}
/* keep month compact when listing few jobs */
.cal:not(.week):not(.month) .cal-cell { min-height: 110px; }

/* Week: uniform height columns */
.cal.week .cal-cell { 
  min-height: 0;
  height: 100%;  /* fill available height in grid */
  display: flex;
  flex-direction: column;
}

/* Month internals: date strip fixed, body scrolls */
.cal.month .cal-date { flex: 0 0 auto; }
.cal.month .cal-body {
  flex: 1 1 auto;
  overflow: auto;                /* scroll inside cell */
  padding-top: 4px;
}

/* Week internals: date strip fixed, body grows */
.cal.week .cal-date { flex: 0 0 auto; }
.cal.week .cal-body {
  flex: 1 1 auto;
  padding-top: 4px;
}

/* Click-to-day overlay for month cells */
.cal.month .cal-cell > * { position: relative; z-index: 2; }
.cal.month .cal-cell .cell-hit {
  position: absolute; inset: 0;
  z-index: 1;                    /* behind content so links still work */
  background: transparent;
  cursor: pointer;
}

.cal-cell.muted { background: #fafafa; color: #888; }
.cal-cell.today { border-color: #4a90e2; box-shadow: 0 0 0 2px rgba(74,144,226,.15) inset; }

.cal-date { display:flex; justify-content:space-between; align-items:center; font-weight:600; margin-bottom:6px; }
.cal-date .new { font-weight:700; }

/* Job items */
.job { font-size: 12px; margin: 6px 0; line-height: 1.25; }
.job .time { font-variant-numeric: tabular-nums; color:#444; margin-right: 6px; }
.job .ttl { font-weight: 600; }
.job .sub { color:#666; }
.empty { color:#999; font-size:12px; }

/* Buttons / tags */
.btn { border:1px solid #ddd; padding:4px 8px; border-radius:6px; }
.tag { display:inline-block; padding:2px 6px; border-radius:999px; font-size:11px; margin-right:6px; border:1px solid #999; }
.tag.TUS { border-color:#7D4; background:#F6FFF6; }
.tag.SAT { border-color:#48C; background:#F3F8FF; }
.tag.CAL { border-color:#C84; background:#FFF7F0; }

/* ======================= TODAY PAGE ======================= */
.today-wrap {
  min-height: calc(100vh - 80px);       /* full screen minus header */
  display: flex;
  justify-content: center;               /* center column */
  align-items: flex-start;               /* start at top */
  padding: 8px;
  background: #f6f7f9;                   /* subtle background to emphasize the card */
}

.today-card {
  width: 100%;
  max-width: 980px;                      /* centered column width */
  background: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(0,0,0,.04);
  padding: 16px;
}

.today-header {
  display:flex; justify-content:space-between; align-items:center; gap: 12px;
  border-bottom: 1px solid #eee; padding-bottom: 8px; margin-bottom: 12px;
}
.today-actions .btn { margin-left: 6px; }

.today-list { list-style: none; margin: 0; padding: 0; }
.today-item {
  border: 1px solid #eee;
  border-radius: 10px;
  padding: 10px;
  margin: 10px 0;
  background: #fff;
}

.row-main { display: grid; grid-template-columns: 90px 1fr auto auto; gap: 10px; align-items: start; }
.row-main .time { font-variant-numeric: tabular-nums; color:#333; }
.row-main .title .notes { color:#555; font-size: 0.95em; margin-top: 4px; }
.row-main .title .meta { color:#666; font-size: 0.9em; margin-top: 2px; }
.row-main .techs { display:flex; flex-wrap: wrap; gap:6px; justify-content:flex-end; }
.row-main .actions { white-space: nowrap; text-align: right; }

.chip { display:inline-block; padding:2px 8px; border:1px solid #ddd; border-radius:999px; font-size:12px; }
.chip.mute { color:#777; background:#fafafa; }

.row-tags { margin-top: 8px; }

@media (max-width: 900px) {
  .row-main { grid-template-columns: 70px 1fr; }
  .row-main .techs, .row-main .actions { grid-column: 1 / -1; text-align: left; }
}