/* ================================
   Liszt UI Layer
   ================================ */

:root {
  --liszt-accent: #770000;
  --liszt-soft: #f7f9fc;
  --liszt-border: rgba(0,0,0,.08);
}


/* Page background */

body {
  background: #fafbfc;
}


/* Main content container */

main.container {
  max-width: 1100px;
}


/* Soft cards used everywhere */

.card-soft {
  background: #fff;
  border: 1px solid var(--liszt-border);
  border-radius: 0rem;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
}


/* Session cards */

.session-card {
  border: 1px solid var(--liszt-border);
  border-radius: 0rem;
  transition: box-shadow .12s ease, transform .08s ease;
}

.session-card:hover {
  box-shadow: 0 3px 10px rgba(0,0,0,.08);
}


/* Session titles */

.session-title {
  font-weight: 600;
  font-size: 1.02rem;
}


/* Metadata text */

.meta {
  font-size: .88rem;
  color: #6c757d;
}


/* Program table improvements */

.program-table {
  border-radius: 0rem;
  overflow: hidden;
}

.program-table th {
  font-weight: 600;
  background: #f6f7f9;
}


/* Navbar polish */

.appbar {
  background: #ffffff;
}

.app-title {
  font-weight: 600;
  letter-spacing: .2px;
}

.app-subtitle {
  font-size: .9rem;
}


/* Badge adjustments */

.badge-soft {
  background: var(--liszt-soft);
  border: 1px solid var(--liszt-border);
  color: #444;
}


/* Links */

a {
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}


/* Participant and program links */

.session-meta a {
  color: inherit;
}

.session-meta a:hover {
  text-decoration: underline;
}


/* Mobile tightening */

@media (max-width: 768px) {

  main.container {
    padding-top: 1rem !important;
  }

  .card-body {
    padding: .9rem;
  }

  .session-title {
    font-size: .98rem;
  }

}
.session-card {
  scroll-margin-top: 9rem;
}

.session-card:target {
  border: 2px solid #0d6efd;
  box-shadow: 0 0 0 4px rgba(13,110,253,.15);
}

/* ================================
   Program Table Row Striping
   ================================ */

.program-table tbody tr:nth-child(even) td {
  background: #fbfcfe;
}

.program-table tbody tr:nth-child(odd) td {
  background: #ffffff;
}


/* Keep time column slightly emphasized */

.program-time {
  background: #f6f7f9 !important;
  font-weight: 600;
  border-right: 1px solid rgba(0,0,0,.08);
}


/* Empty cells */

.cell-empty {
  color: #c0c4c9;
  text-align: center;
}


/* Improve session box contrast inside striped rows */

.program-table .session-box {
  background: #ffffff;
  border-radius: .5rem;
}

/* =================================
   Mobile Program Layout
   ================================= */

@media (max-width: 768px) {

  .program-table {
    min-width: 0 !important;
    table-layout: auto;
  }

  .program-table thead {
    display: none;
  }

  .program-table tbody tr {
    display: block;
    border-bottom: 1px solid rgba(0,0,0,.08);
    margin-bottom: 1rem;
  }

  .program-table td {
    display: block;
    width: 100%;
    border: none !important;
  }

  /* time row */

  .program-time {
    font-weight: 600;
    font-size: .95rem;
    padding-top: .75rem;
    padding-bottom: .25rem;
    background: transparent !important;
  }

  /* session cells */

  .program-table td:not(.program-time) {
    padding-top: .25rem;
    padding-bottom: .5rem;
  }

  /* add room label above each session */

  .program-table td[data-room]::before {
    content: attr(data-room);
    display: block;
    font-size: .75rem;
    font-weight: 600;
    color: #6c757d;
    margin-bottom: .2rem;
    text-transform: uppercase;
    letter-spacing: .04em;
  }

  /* session box spacing */

  .session-box {
    margin-bottom: .4rem;
  }

}