/*
 * 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.
 */

.inline-actions form {
  margin: 0;
}

.navbar-burger span {
  background-color: white !important;
}

.matrix-cell {
  width: 1.2rem;
  height: 1.2rem;
  display: inline-block;
  border-radius: 3px;
}
.matrix-cell.played { background-color: hsl(171, 100%, 41%); }
.matrix-cell.paid { background-color: hsl(44, 100%, 55%); }
.matrix-cell.absent { background-color: hsl(0, 0%, 86%); }
td.matrix { white-space: nowrap; }
td.matrix .matrix-cell { margin-right: 2px; }
td.matrix .matrix-cell:last-child { margin-right: 0; }

@media print {
  body {
    font-size: 10pt;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .navbar, .buttons {
    display: none;
  }

  .section {
    padding: 0.5rem;
  }

  .box {
    box-shadow: none;
    border: 1px solid #ddd;
    padding: 0.75rem;
    break-inside: avoid;
  }

  .title.is-5 {
    font-size: 12pt;
  }

  .table {
    font-size: 9pt;
  }

  .tag {
    font-size: 8pt;
    padding: 0.15em 0.4em;
    height: auto;
  }

  .matrix-cell {
    width: 0.7rem !important;
    height: 0.7rem !important;
  }

  .columns {
    display: flex !important;
  }

  .column .box {
    padding: 0.5rem;
  }

  .column .title {
    font-size: 16pt;
  }

  .column .heading {
    font-size: 7pt;
  }
}