/*
    THE TIME-OF-USE GRID'S OWN STYLESHEET.

    Everything Components/Shared/TouScheduleGrid.razor needs and nothing else.

    864 CELLS, EDITED BY CLICKING, so every cell is a real button with a title. A div with a click
    handler is invisible to a keyboard and to a screen reader, and this is the control somebody sets
    a tariff with.

    THE GRID SCROLLS INSIDE ITS OWN WRAPPER. Twenty-four hours across is wider than a panel on any
    screen the product supports, and a page that scrolls sideways instead is the defect the wrapper
    exists to stop.

    WHAT IT DOES NOT OWN. .sv-btn, .sv-badge and .sv-empty are utilities and stay in utilities.css.
*/

.sv-tou {
  display: grid;
  gap: var(--sv-space-3);
}

.sv-tou__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sv-space-3);
  flex-wrap: wrap;
}

.sv-tou__daytypes {
  display: flex;
  gap: var(--sv-space-1);
}

.sv-tou__daytype {
  font: 500 11px/1 var(--sv-font-sans);
  padding: 7px 12px;
  border: 1px solid var(--sv-border);
  border-radius: var(--sv-radius-control);
  background: transparent;
  color: var(--sv-text-secondary);
  cursor: pointer;
}

.sv-tou__daytype--active {
  border-color: var(--sv-accent);
  color: var(--sv-accent);
}

.sv-tou__count {
  font-size: 11px;
  color: var(--sv-text-tertiary);
}

.sv-tou__empty {
  margin: 0;
  font: 400 12px/1.6 var(--sv-font-sans);
  color: var(--sv-accent);
}

/* Wide content scrolls inside its own container - the page body never scrolls
   sideways. Twenty-four hourly columns do not fit a narrow window. */
.sv-tou__grid-wrap {
  overflow-x: auto;
}

.sv-tou__grid {
  border-collapse: collapse;
}

.sv-tou__corner {
  width: 44px;
}

.sv-tou__hour {
  font: 400 10px/1 var(--sv-font-mono);
  color: var(--sv-text-tertiary);
  padding: 0 0 4px;
  text-align: center;
  font-weight: 400;
}

.sv-tou__month {
  padding: 0 6px 0 0;
  text-align: right;
  font-weight: 400;
}

.sv-tou__month-toggle {
  font: 400 11px/1 var(--sv-font-mono);
  color: var(--sv-text-secondary);
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
}

.sv-tou__cell {
  display: block;
  width: 17px;
  height: 15px;
  margin: 1px;
  padding: 0;
  border: 1px solid var(--sv-border-subtle);
  border-radius: 2px;
  background: transparent;
  cursor: pointer;
}

/* The module blue, not the accent. These cells are DATA - a grid of amber would
   put the product's one accent colour on 864 squares. */
.sv-tou__cell--on {
  background: var(--sv-module-edge);
  border-color: var(--sv-module-edge);
}