/* themes/spreadsheet.css - Spreadsheet — a white sheet, thin grid lines, petrol blue-green */
/* Modelled on the spreadsheet a trainer runs her sessions from (2026-09-13): cells
   that touch, one grid line between them, a tinted row for each round, a highlighted cell for where
   she is. Colours are NOT the sheet's: its amber and yellow would recall the sandbox's orange marks.
   Petrol sits between blue and green, the two colours named first worldwide, without blue's lean to
   one sex (YouGov: blue 40 % of men against 24 % of women in the US). Every contrast below was
   measured against the theme's own backgrounds.

   A theme is a stylesheet, not a palette (docs/ARCHITECTURE.md#themes-and-styling): the tokens set
   the colours, the rules under them draw the grid. This file loads after every module stylesheet.
   It never restyles the app header — the sandbox marks it, and a theme that won there would hide
   which workspace the trainer is in. */
html.spreadsheet-theme,
body.spreadsheet-theme {
  --bg-color: #edf3f4;
  /* A sheet has no light falling on it. */
  --bg-gradient: linear-gradient(#edf3f4, #edf3f4);
  --card-bg: rgba(255, 255, 255, 1);
  --card-border: rgba(26, 37, 40, 0.18);
  --timer-warn-peak-color: color-mix(in srgb, #f59e0b 35%, var(--card-bg));
  --text-main: #1a2528;
  --text-muted: #46565b; /* 7.66:1 on a cell, 6.83:1 on the field */
  --border-color: #c8d3d6; /* the grid line */
  --input-bg: #ffffff;
  --primary: #0e7490; /* petrol — white text on it 5.36:1 */
  --primary-hover: #155e75;
  --primary-light: rgba(14, 116, 144, 0.1); /* the selected cell, #e3f3f6 over white */
  --primary-gradient: linear-gradient(#0e7490, #0e7490);
  --on-primary: #ffffff;
  --secondary: #4c5fd5; /* indigo, 5.38:1 on a cell */
  --secondary-hover: #3b4bc0;
  --secondary-light: rgba(76, 95, 213, 0.1);
  --accent-cyan: #0e7490;
  --danger: #c5221f; /* 5.80:1 */
  --danger-hover: #a51d1a;
  --danger-light: rgba(197, 34, 31, 0.1);
  --success: #1e7e34; /* 5.14:1 */
  --success-hover: #17692b;
  /* Yellow-700 rather than an orange, so the overtime alert says "caution" without borrowing the
     sandbox's hue. 4.92:1. */
  --warning: #a16207;
  --temporal-past: #6b46c1; /* 6.42:1 */
  --session-dot-0: #b45309;
  --session-dot-1: #0369a1;
  --session-dot-2: #be185d;
  --session-dot-3: #4d7c0f;
  --temporal-future: #4c5fd5;
  --cloud-icon-color: #155e75;
  --cloud-arrows-color: #4ade80;
  --box-shadow: none;
  /* A cell has corners. */
  --border-radius-lg: 2px;
  --border-radius-md: 2px;
  --border-radius-sm: 2px;
  --btn-radius: 2px;
}

/* --- The grid --- */

/* The clipboard's deck: rows of one table, not a tilted stack. Each collapsed card shows its whole
   row, and the -1px lets neighbours share one grid line. That costs 8px per card against the
   stacked deck (--deck-collapsed-overlap), which is the price of reading the plan as a table. */
html.spreadsheet-theme .exercise-deck-card {
  border-radius: 0;
  transition: background 0.2s;
}
html.spreadsheet-theme .exercise-deck-card:not(.in-focus),
html.spreadsheet-theme .exercise-deck-card:not(.in-focus):hover {
  margin-bottom: -1px;
  transform: none;
  box-shadow: none;
}
/* The card in focus is the selected cell: the tint from --primary-light and a 2px edge (its own
   border plus one inset line), in the row where it stands rather than lifted out of the table. An
   opened past card is selected the same way, in its own colour. */
html.spreadsheet-theme .exercise-deck-card.in-focus,
html.spreadsheet-theme .exercise-deck-card.past-session.past-expanded {
  margin: 0 0 -1px;
  animation: none;
}
html.spreadsheet-theme .exercise-deck-card.in-focus {
  box-shadow: inset 0 0 0 1px var(--primary);
}
html.spreadsheet-theme .exercise-deck-card.past-session.past-expanded {
  box-shadow: inset 0 0 0 1px var(--temporal-past);
}

/* Blocks of the plan are set apart by an empty strip, as the trainer's sheet leaves an empty row
   between sections. A circuit is one block; an exercise or a rest outside a circuit is a block of
   its own. Every card in the deck is one of those since 2026-09-30, when the past session left it,
   so this no longer has to exclude past cards.
   It was a 2px dark border until 2026-09-14: Simon found it drowned the active card, whose
   own mark is a line too. With thin lines everywhere else, the active card is the one heavy edge.
   4px, measured on a 390px phone against 3px and 6px: a circuit reads as its own block already at
   3px, because its grey name row starts it, but an exercise outside a circuit has no such row and
   the strip is all that separates it. */
html.spreadsheet-theme .exercise-deck-card {
  margin-bottom: 4px;
}
/* The active card and the open card: a 2px petrol edge, the only heavy line on the sheet. */
html.spreadsheet-theme .exercise-deck-card.is-active {
  outline-width: 2px;
  outline-offset: -2px;
}
/* Rows inside a circuit are cells of the block, divided by the thin grid line. */
html.spreadsheet-theme .circuit-card .circuit-ex-list {
  margin-top: 0;
  gap: 0;
}
html.spreadsheet-theme .circuit-card .circuit-ex-row {
  margin: 0 -10px;
  padding: 4px 10px;
  border-top: 1px solid var(--border-color);
}
/* The circuit's name and round count are one merged cell across the block, in the grey of the
   sheet's "3x" rows. The negative margins reach the card's padding, so the fill meets the border. */
html.spreadsheet-theme .circuit-card .deck-card-compact {
  margin: -8px -10px 0;
  padding: 6px 10px;
  background: #edf1f2;
}

/* The session's name, date and place are the merged title cell at the top of the sheet. */
html.spreadsheet-theme .active-session-overlay .session-title-bar {
  background: #d7ecef;
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
}

/* One tab per client, like the sheet tabs along the bottom of a workbook: flat cells side by side,
   and the client being shown carries a coloured bar under the name. */
html.spreadsheet-theme .client-tab-btn.client-tab-participant,
html.spreadsheet-theme .client-tab-btn.client-tab-participant.active {
  border-radius: 0;
  border: 1px solid var(--border-color);
  border-bottom-width: 3px;
  background: #ffffff;
  color: var(--text-muted);
  box-shadow: none;
}
html.spreadsheet-theme .client-tab-btn.client-tab-participant.active {
  border-bottom-color: var(--primary);
  color: var(--primary);
}
/* The component paints the active tab's initials white for its solid petrol tab; on a white tab
   they need a petrol disc of their own. */
html.spreadsheet-theme .client-tab-btn .client-tab-avatar.active {
  background: var(--primary);
  color: #ffffff;
}

/* A circuit's round count is the grey "3x" row of the sheet, not a pill. */
html.spreadsheet-theme .circuit-round-badge {
  border-radius: 0;
  color: var(--text-main);
  background: #edf1f2;
  border-color: var(--border-color);
}

/* Session list: rows of the day's table. The coloured left edge stays; it says which state the
   session is in. */
html.spreadsheet-theme .sessions-day-group .stack-list {
  gap: 0;
}
html.spreadsheet-theme .session-card {
  margin-bottom: -1px;
  border-radius: 0;
}
/* "Overdue" is a pale yellow cell, not a solid bar: the bar's dark text needs a light fill, and a
   solid warm band down the list would read as the sandbox's orange. The edge keeps --warning. */
html.spreadsheet-theme .session-live-bar.overtime,
html.spreadsheet-theme .session-live-bar.upcoming.overtime,
html.spreadsheet-theme #overlay-session-timer.overtime {
  background: color-mix(in srgb, var(--warning) 18%, #ffffff);
}

/* Pills become cells. Left round on purpose: the sandbox pill, which is the sandbox's own mark, and
   the drag handles, which are shaped like what they do. */
html.spreadsheet-theme .badge,
html.spreadsheet-theme .chip,
html.spreadsheet-theme .client-tab-btn,
html.spreadsheet-theme .sessions-today-btn,
html.spreadsheet-theme .sessions-day-group-today-tag,
html.spreadsheet-theme .floating-action-btn,
html.spreadsheet-theme .notification-count-pill,
html.spreadsheet-theme #overlay-session-timer {
  border-radius: 2px;
}
html.spreadsheet-theme .session-card:hover {
  transform: none;
}

/* Side-by-side plan columns are columns of one sheet. */
html.spreadsheet-theme .plan-columns {
  gap: 0;
}
html.spreadsheet-theme .plan-column + .plan-column {
  border-left-width: 0;
}