/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

.presence-maybe {
  background: repeating-linear-gradient(
    45deg,
    #ccc,
    #ccc 10px,
    #fff 10px,
    #fff 20px
  );
}

.presence-yes {
  background: #9f9;
}

.presence-no {
  background: #f99;
}
.presence-unanswered {
  background: #FF9
}

.section-saxs {
  background-color: #c5ffaf;
}
.section-trompettes {
  background-color: #afffce;
}
.section-percu {
  background-color: #afdbff;
}
.section-bones {
  background-color: #efafff;
}
.section-danseuses {
  background-color: #ffeeaf;
}
.section-saksin {
  background-color: #efba56;
}
.section-poulettes {
  background-color: #ffeeaf;
}
.section-clarinettes {
  background-color: #ffcfcf;
}
.section-woks {
  background-color: #ffc8a0;
}

/* Table view */
.table-view-wrapper { overflow: auto; max-height: 80vh; }
.table-view-wrapper table { border-collapse: separate; border-spacing: 0; }
.table-view-wrapper th.musician-name {
  writing-mode: vertical-lr;
  transform: rotate(180deg);
  white-space: nowrap;
  vertical-align: bottom;
  font-size: 0.75rem;
  padding: 0.5rem 0.25rem;
}
.table-view-wrapper td.event-info,
.table-view-wrapper th.event-header {
  position: sticky;
  left: 0;
  background: #fff;
  z-index: 1;
  min-width: 10rem;
  border-right: 2px solid #ddd;
}
.table-view-wrapper thead th {
  position: sticky;
  background: #fff;
  z-index: 2;
}
.table-view-wrapper .thead-sections th { top: 0; height: 2.5rem; }
.table-view-wrapper .thead-musicians th { top: 2.5rem; }
.table-view-wrapper th.event-header { z-index: 3; }
.table-view-wrapper td.presence-cell { text-align: center; vertical-align: middle; padding: 0; }
.table-view-wrapper td.presence-cell.is-interactive { cursor: pointer; }
.table-view-wrapper td.presence-cell.is-interactive:hover { filter: brightness(0.9); }
.table-view-wrapper .table-cell-button {
  background: none;
  border: none;
  width: 100%;
  height: 100%;
  padding: 0.25rem;
  cursor: pointer;
}
.table-view-wrapper .my-column { background-color: rgba(50, 115, 220, 0.12); }
.table-view-wrapper th.my-column { background-color: rgba(50, 115, 220, 0.2); font-weight: bold; }
.table-view-wrapper td.my-column.presence-yes { background: linear-gradient(rgba(50,115,220,0.15),rgba(50,115,220,0.15)), #9f9; }
.table-view-wrapper td.my-column.presence-no { background: linear-gradient(rgba(50,115,220,0.15),rgba(50,115,220,0.15)), #f99; }
.table-view-wrapper td.my-column.presence-maybe { background: linear-gradient(rgba(50,115,220,0.15),rgba(50,115,220,0.15)), repeating-linear-gradient(45deg, #ccc, #ccc 10px, #fff 10px, #fff 20px); }
.table-view-wrapper td.my-column.presence-unanswered { background: linear-gradient(rgba(50,115,220,0.15),rgba(50,115,220,0.15)), #FF9; }