/* tanin-calendar — TANINUX calendar
 *
 * The bulk of the look comes from tanin-libadwaita (Fuji monochrome recolour of
 * GTK4/libadwaita). This sheet adds the month grid: weekday header, day cells
 * (with today / other-month states), and the small per-event colour chips.
 *
 * Fuji palette:
 *   bg      #0f0f0f   bg_alt  #191919
 *   fg      #f0f0f0   muted   #8a8a8a   accent  #a39ec4
 *
 * Per-event/calendar background colours are injected at runtime (see
 * _color_dot in tanin-calendar); the .event-dot rule below is the shape /
 * fallback so a dot is visible even without a calendar colour from EDS.
 */

/* --------------------------------------------------------------- strip --- */
/* The masthead strip below the header bar: prev/next nav on the left, the big
 * month name (bold) on the left and the big year (lighter/muted) on the right.
 */
.cal-strip {
  background-color: #0f0f0f;
  border-bottom: 1px solid alpha(#f0f0f0, 0.07);
}

/* Inner box of the clamped strip carries the padding so the clamp can keep the
 * content aligned with the (equally clamped) grid below. */
.cal-strip-inner {
  padding: 8px 8px 12px 8px;
}

.cal-strip .month-title {
  font-size: 1.9em;
  font-weight: 800;
  color: #f0f0f0;
  margin-left: 8px;
}

.cal-strip .day-subtitle {
  font-size: 1.05em;
  font-weight: 500;
  color: #8a8a8a;
  margin-left: 8px;
}

.cal-strip .year-title {
  font-size: 1.9em;
  font-weight: 300;
  color: #8a8a8a;
}

.cal-strip .cal-nav button {
  min-width: 30px;
  min-height: 30px;
  padding: 2px;
  color: #f0f0f0;
}

.cal-strip .cal-nav button:hover {
  background-color: #242424;
}

/* ------------------------------------------------------------------ dots --- */
.event-dot {
  min-width: 10px;
  min-height: 10px;
  border-radius: 9999px;
  /* fallback: the dim UI foreground, so colourless calendars still show a dot */
  background-color: alpha(@window_fg_color, 0.35);
}

.chip-dot {
  min-width: 8px;
  min-height: 8px;
}

/* ----------------------------------------------------------- month grid --- */
.month-grid {
  background-color: #0f0f0f;
  padding: 0;
}

/* Weekday header (Mon…Sun). */
.weekday-header {
  color: #8a8a8a;
  font-weight: bold;
  font-size: 0.85em;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 8px 6px;
  background-color: #191919;
}

/* One day cell. The 1px outline forms the grid's hairlines without doubling. */
.day-cell {
  background-color: #0f0f0f;
  border: 1px solid alpha(#f0f0f0, 0.08);
  padding: 4px 5px;
  min-height: 88px;
}

/* Days outside the current month are dimmed. */
.day-cell.other-month {
  background-color: #0d0d0d;
}

.day-cell.other-month .day-number {
  color: alpha(#8a8a8a, 0.55);
}

/* Today's cell: accent ring + subtle tinted background. */
.day-cell.today {
  background-color: alpha(#a39ec4, 0.10);
  border: 1px solid #a39ec4;
}

.day-cell.today .day-number {
  color: #a39ec4;
  font-weight: bold;
}

/* The SELECTED cell (distinct from today): a brighter fill + inset ring so the
 * user can tell which day's events the bottom agenda is showing. */
.day-cell.selected {
  background-color: #242424;
  border: 1px solid alpha(#f0f0f0, 0.30);
}

.day-cell.selected.today {
  background-color: alpha(#a39ec4, 0.18);
  border: 1px solid #a39ec4;
}

.day-cell.selected .day-number {
  color: #f0f0f0;
  font-weight: bold;
}

/* Day number, top-left. */
.day-number {
  color: #f0f0f0;
  font-size: 0.9em;
  padding: 1px 2px;
  margin-bottom: 2px;
}

/* ---------------------------------------------------------- event chips --- */
.event-chip {
  background-color: #191919;
  border-radius: 5px;
  padding: 1px 5px;
  min-height: 0;
  margin: 0;
}

.event-chip:hover {
  background-color: #232323;
}

.chip-label {
  color: #f0f0f0;
  font-size: 0.82em;
}

/* The muted "+N more" line when a day overflows its chip budget. */
.more-label {
  color: #8a8a8a;
  font-size: 0.78em;
  padding: 0 4px;
}

/* ------------------------------------------------------------- day view --- */
.day-agenda {
  padding: 18px 16px 24px 16px;
}

.day-agenda .agenda-heading {
  color: #f0f0f0;
  font-size: 1.25em;
  font-weight: 700;
  margin-bottom: 6px;
}

.day-agenda .agenda-empty {
  color: #8a8a8a;
  font-size: 0.95em;
  padding: 6px 2px;
}

.agenda-row {
  background-color: #191919;
  border-radius: 8px;
  padding: 8px 12px;
  min-height: 0;
  margin: 0;
}

.agenda-row:hover {
  background-color: #242424;
}

.agenda-row .agenda-time {
  color: #8a8a8a;
  font-size: 0.88em;
  font-variant-numeric: tabular-nums;
}

.agenda-row .agenda-title {
  color: #f0f0f0;
  font-size: 0.98em;
  font-weight: 500;
}

.agenda-row .agenda-location {
  color: #8a8a8a;
  font-size: 0.82em;
}

/* ------------------------------------------------------------ week view --- */
.week-grid {
  background-color: #0f0f0f;
}

.week-column {
  background-color: #0f0f0f;
  border-left: 1px solid alpha(#f0f0f0, 0.07);
  padding: 4px 5px 10px 5px;
}

.week-column:first-child {
  border-left: none;
}

.week-column.today {
  background-color: alpha(#a39ec4, 0.08);
}

.week-column.selected {
  background-color: #1d1d1d;
}

.week-column.selected .week-col-header {
  border-bottom-color: alpha(#f0f0f0, 0.30);
}

.week-column.selected .week-col-header .week-col-date {
  color: #f0f0f0;
}

.week-col-header:hover {
  background-color: alpha(#f0f0f0, 0.04);
}

.week-col-header {
  padding: 6px 2px 8px 2px;
  margin-bottom: 2px;
  border-bottom: 1px solid alpha(#f0f0f0, 0.07);
}

.week-col-header .week-col-name {
  color: #8a8a8a;
  font-size: 0.78em;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.week-col-header .week-col-date {
  color: #f0f0f0;
  font-size: 1.25em;
  font-weight: 600;
}

.week-column.today .week-col-header .week-col-date {
  color: #a39ec4;
  font-weight: bold;
}

.week-column.today .week-col-header {
  border-bottom-color: #a39ec4;
}

/* ------------------------------------------------------ grid clamp -------- */
/* The Adw.Clamp wrapping the month/week grid keeps the content centred on wide
 * windows. A faint side gutter is fine; just give the grid a little breathing
 * room so cells don't kiss the clamp edge. */
.grid-clamp {
  padding: 0 8px 8px 8px;
}

/* --------------------------------------------- bottom selected agenda ----- */
/* The always-visible bottom section listing the SELECTED day's events. Sits
 * under the grid with a clear separator so it reads as its own panel. */
.selected-agenda {
  background-color: #0d0d0d;
  border-top: 1px solid alpha(#f0f0f0, 0.10);
}

.selected-agenda-scroller {
  background-color: transparent;
}

.selected-agenda-inner {
  padding: 12px 12px 16px 12px;
}

.selected-agenda .selected-heading {
  color: #f0f0f0;
  font-size: 1.05em;
  font-weight: 700;
  margin-bottom: 4px;
}

.selected-agenda .selected-empty {
  color: #8a8a8a;
  font-size: 0.92em;
  padding: 2px 2px;
}

/* ============================================================ time grid === */
/* Day / Week time-grid views: a pinned header + all-day strip above a
 * vertically-scrolling hour grid. Fuji palette throughout, GNOME-clean. */

/* --- pinned header row (weekday + date), stays above the scroller -------- */
.timegrid-header {
  background-color: #0f0f0f;
  border-bottom: 1px solid alpha(#f0f0f0, 0.10);
}

.timegrid-corner {
  background-color: #0f0f0f;
}

.timegrid-col-header {
  padding: 6px 4px 7px 4px;
  border-left: 1px solid alpha(#f0f0f0, 0.06);
}

.timegrid-col-header:hover {
  background-color: alpha(#f0f0f0, 0.04);
}

.timegrid-col-header .timegrid-col-name {
  color: #8a8a8a;
  font-size: 0.78em;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.timegrid-col-header .timegrid-col-date {
  color: #f0f0f0;
  font-size: 1.25em;
  font-weight: 600;
}

.timegrid-col-header.today .timegrid-col-name,
.timegrid-col-header.today .timegrid-col-date {
  color: #a39ec4;
  font-weight: bold;
}

.timegrid-col-header.selected {
  background-color: #1d1d1d;
}

/* --- thin all-day strip --------------------------------------------------- */
.allday-row {
  background-color: #0d0d0d;
  border-bottom: 1px solid alpha(#f0f0f0, 0.10);
  min-height: 30px;
}

.allday-axis {
  color: #8a8a8a;
  font-size: 0.7em;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding-right: 8px;
}

.allday-cell {
  border-left: 1px solid alpha(#f0f0f0, 0.06);
  padding: 2px 4px;
}

.allday-cell.today {
  background-color: alpha(#a39ec4, 0.08);
}

.allday-chip {
  background-color: #191919;
  border-left: 3px solid #8a8a8a;
  border-radius: 4px;
  padding: 0 6px;
  min-height: 0;
  margin: 1px 0;
}

.allday-chip:hover {
  background-color: #232323;
}

.allday-chip-label {
  color: #f0f0f0;
  font-size: 0.8em;
}

/* --- scrolling hour grid -------------------------------------------------- */
.timegrid-body {
  background-color: #0f0f0f;
}

/* The left hour axis with "08:00" labels. */
.time-axis {
  background-color: #0f0f0f;
  border-right: 1px solid alpha(#f0f0f0, 0.08);
}

.time-axis .hour-label {
  color: #8a8a8a;
  font-size: 0.72em;
  font-variant-numeric: tabular-nums;
  padding: 1px 6px 0 0;
}

/* One day's column holding the hour lines and positioned event blocks. */
.day-column {
  background-color: #0f0f0f;
  border-left: 1px solid alpha(#f0f0f0, 0.06);
}

.day-column.today {
  background-color: alpha(#a39ec4, 0.05);
}

/* Hairline separators: full opacity on the hour, fainter on the half-hour. */
.day-column .hour-line {
  background-color: alpha(#f0f0f0, 0.09);
}

.day-column .half-line {
  background-color: alpha(#f0f0f0, 0.04);
}

/* A positioned timed-event block (rounded, calendar-colour tinted). */
.event-block {
  background-color: alpha(#a39ec4, 0.18);
  border-left: 3px solid #a39ec4;
  border-radius: 5px;
  padding: 2px 6px;
  min-height: 0;
  margin: 0;
}

.event-block:hover {
  background-color: alpha(#a39ec4, 0.30);
}

.event-block .event-block-time {
  color: #f0f0f0;
  font-size: 0.72em;
  font-variant-numeric: tabular-nums;
  opacity: 0.85;
}

.event-block .event-block-title {
  color: #f0f0f0;
  font-size: 0.82em;
  font-weight: 600;
}

/* The accent "now" line on today's column. */
.now-line {
  background-color: #a39ec4;
}

/* The translucent drag-to-create selection rectangle. */
.drag-selection {
  background-color: alpha(#a39ec4, 0.25);
  border: 1px solid #a39ec4;
  border-radius: 4px;
}

/* ----------------------------------------------------- context menus --- */
/* Right-click popovers (event block: Delete/Details; time grid / month cell:
 * New event). A compact column of flat, left-aligned menu rows. */
.context-menu {
  padding: 4px;
  min-width: 140px;
}

.context-menu-item {
  padding: 6px 12px;
  border-radius: 6px;
  color: #f0f0f0;
  font-weight: 500;
}

.context-menu-item:hover {
  background-color: #242424;
}

/* Destructive (Delete) row reads in a warm red, brighter on hover. */
.context-menu-item.destructive {
  color: #e06c75;
}

.context-menu-item.destructive:hover {
  background-color: alpha(#e06c75, 0.18);
  color: #e06c75;
}