/* The look of the Rails app's qchsag.css and its red calendar theme, with
   the YUI grid replaced by a CSS grid: a header, a 160px menu beside the
   page, and a footer, 974px wide. */

* { box-sizing: border-box; }

body {
  margin: 0 auto;
  max-width: 974px;
  background-color: #fff;
  color: #333;
  font-family: verdana, arial, helvetica, sans-serif;
  font-size: 13px;
  line-height: 1.5em;
  display: grid;
  grid-template-columns: 160px 1fr;
  grid-template-areas: "hd hd" "side main" "ft ft";
}

table { border-collapse: collapse; }
th, td { border: none; padding: 0; }
h2, h3, h4 { margin: 0.5em 0; }
h2 { font-size: 138.5%; }
h3 { font-size: 123.1%; }

pre {
  background-color: #eee;
  padding: .7em;
  font-size: 85%;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

a { color: #000; }
a:visited { color: #666; }
a:hover { color: #fff; background-color: #000; }

.request, a.request:visited { color: #c00; }

#hd {
  grid-area: hd;
  background: #9c9;
  padding: 10px 0;
  border-bottom: 2px solid;
  font: small-caps 39px/39px "Times New Roman", serif;
  color: #282;
  text-align: center;
}

#side {
  grid-area: side;
  padding: 5px;
  color: #ddd;
  font-size: 85%;
  background-color: #141;
}
#side ul { list-style: none; margin: 1em 0; padding: 0; }
#side a, #side button.link { text-decoration: none; color: #ada; }
#side a:hover, #side button.link:hover { color: #fff; }
#side form { display: inline; }

button.link {
  border: none;
  background: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
}

#main {
  grid-area: main;
  background: white;
  padding: 5px;
  min-width: 0;
}

#notice, #alert {
  border: 2px solid red;
  padding: 1em;
  margin-bottom: 2em;
  background-color: #f0f0f0;
  font: bold smaller sans-serif;
}

#ft {
  grid-area: ft;
  display: flex;
  justify-content: space-between;
  background: #9c9;
  padding: 3px;
  border-top: 2px solid;
  font: small-caps 13px "Times New Roman", serif;
  color: #282;
}

.field { margin-bottom: 1em; }

/* The month calendar */

.year { text-align: center; }

.calendar { margin: auto; }
.calendar thead th { font-weight: normal; padding: 1em 0 0.7em; }
.calendar .month-name { font-size: 2em; }
.calendar .day-names th {
  font-size: 77%;
  padding: 0.6em 0 0.3em;
  background-color: #303030;
  color: white;
}

.calendar td {
  padding: 0.5em;
  border-right: 1px solid white;
  border-bottom: 1px dotted #bbb;
  text-align: center;
  vertical-align: top;
  font-size: 93%;
  min-width: 7em;
}
.calendar .other-month { color: #ccc; }
.calendar .weekend { background-color: #eee; }
.calendar .stat { background-color: #ddd; }
.calendar .mine { background-color: yellow; }
.calendar .today { background-color: #1e90ff; color: white; }

/* Lists: the changes, and availabilities, striped as tablesorter did */

table.list { margin: 0.5em 0 1em; }
table.list th {
  text-align: left;
  padding: 0.3em 0.6em;
  background-color: #e6eeee;
  border-bottom: 1px solid #ccc;
}
table.list td { padding: 0.2em 0.6em; }
table.list tbody tr:nth-child(even) { background-color: #f0f0f6; }

h5 { margin: 1em 0 0.3em; font-size: 100%; }

/* A change's comments and forms */

.comment .text p { margin: 0.3em 0 0.8em; }
.comment .text p:first-child { margin-top: 0; }
textarea { width: 100%; max-width: 40em; font: inherit; }
details { margin: 0.5em 0; }
summary { cursor: pointer; font-weight: bold; }
form ul { list-style: none; padding-left: 0; }

/* Availability: each rating coloured, best green to unavailable grey */

h2.title, .center { text-align: center; }
.availability td { min-width: 9em; }
.availability .rating-form { margin: 0.2em 0; }
.availability .ob { font-size: 85%; }
select.rating-top { background-color: #7c7; }
select.rating-preferred { background-color: #bdb; }
select.rating-available { background-color: #fff; }
select.rating-undesirable { background-color: #ec9; }
select.rating-unavailable { background-color: #bbb; }
form.failed select, form.failed input { outline: 2px solid red; }

/* Users, with the disabled struck out for admins */

.disabled-user .user-first-name, .disabled-user .user-last-name {
  text-decoration: line-through;
}
.actions a, .actions form { margin-right: 0.6em; }
.actions form { display: inline; }
.actions button.link { text-decoration: underline; }

/* The availabilities overview, which can be wider than the page */

.wide { overflow-x: auto; }
.weekly-cell form, .pref-cell form { margin: 0; white-space: nowrap; }
input.pref { width: 4.5em; }
.doctor-comments { white-space: pre-wrap; }

/* The profile */

#errors {
  border: 2px solid red;
  padding: 0.5em 1em;
  margin-bottom: 1em;
  background-color: #f0f0f0;
}
#errors p { font-weight: bold; margin: 0.3em 0; }
#password-alert {
  border: 2px solid red;
  padding: 0.5em 1em;
  background-color: #f0f0f0;
  font-weight: bold;
}
#password-section { margin-top: 2em; border-top: 1px solid #ccc; }

@media (max-width: 700px) {
  body {
    grid-template-columns: 1fr;
    grid-template-areas: "hd" "side" "main" "ft";
  }
  #hd { font-size: 24px; line-height: 28px; }
  #side ul { display: flex; flex-wrap: wrap; gap: 0 1em; margin: 0.5em 0; }
  .calendar td { min-width: 0; padding: 0.2em; }
  #main { overflow-x: auto; }
}