/*
 * 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.
 */
/* app/assets/stylesheets/application.css */

/* Ohlone Green and Gold Theme */
body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background-color: #f9f9f9;
  color: #1a1a1a;
}

.navbar {
  background-color: #006341; /* Ohlone green */
}

.navbar a,
.navbar-brand {
  color: #ffffff !important;
}

.navbar .dropdown-menu {
  background-color: #004d31;
}

.navbar .dropdown-item:hover {
  background-color: #008c5f;
  color: #ffffff;
}

h1, h2, h3 {
  color: #006341;
}

.btn-primary {
  background-color: #006341;
  border-color: #006341;
}

.btn-primary:hover {
  background-color: #004d31;
  border-color: #004d31;
}

/* Seating chart -------------------------------------------------------- */

.seating-room {
  overflow-x: auto;
}

/* A row has to be as wide as the seats in it, not as wide as the screen.
   Left at the container's width, its overflowing children added nothing to the
   scrollable area, so on a phone the far columns were cut off with no way to
   reach them. min-width keeps the row filling the room when the seats do fit,
   which is what lets the centring below still apply. */
.seat-row {
  width: max-content;
  min-width: 100%;
  /* "safe" falls back to start alignment when the content overflows. Plain
     centring pushes the overflow out of BOTH edges, and nothing can scroll
     past the left one. */
  justify-content: safe center;
}

/* The FRONT OF ROOM bars are siblings of the rows inside the same scrolling
   box, so they need the same width or they stop at the edge of the screen
   while the room carries on past it. */
.seating-front {
  width: max-content;
  min-width: 100%;
}

.seating-front {
  text-align: center;
  letter-spacing: 0.25em;
  font-weight: 700;
  color: #006341;
  border-top: 3px solid #006341;
  border-bottom: 3px solid #006341;
  padding: 0.25rem 0;
}

.seat-cell {
  /* Wider as well as larger: at 1rem a 5.5rem cell holds about ten characters,
     which puts "Alexander R." back onto two lines and drags every row in the
     room to that height. The room scrolls sideways rather than the names
     shrinking. */
  width: 6.75rem;
  min-height: 3.25rem;
  padding: 0.25rem;
  border: 1px solid #ced4da;
  border-radius: 0.4rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  line-height: 1.1;
  text-align: center;
}

.seat-empty  { background-color: #f8f9fa; color: #adb5bd; }
.seat-taken  { background-color: #e7f3ee; border-color: #006341; color: #04301f; }
.seat-mine   { background-color: #006341; border-color: #006341; color: #ffffff; font-weight: 700; }

/* A student waiting for help. Loud on purpose: this is read from across the
   room, over the heads of everyone else. */
.seat-waiting {
  background-color: #dc3545;
  border-color: #dc3545;
  color: #ffffff;
  font-weight: 700;
}

/* Seated but not checked in today. Only applied once somebody has checked in,
   so an empty attendance record does not grey out the whole room.

   The background carries the signal, never the text. Fading the whole seat
   made the name hard to read, and reading names is what the chart is for in
   the courses where attendance is not taken at all. */
.seat-absent {
  background-color: #dce6f0;
  border-color: #4a6d8c;
  color: #16283a;
}

.seat-queue-number {
  display: inline-block;
  min-width: 1.4rem;
  border-radius: 50%;
  background-color: #ffffff;
  color: #dc3545;
  font-weight: 700;
}

/* A table is the physical desk two students share. Drawn as one surface with
   its seats butted together, so a pair reads as a table and not as two desks
   that happen to be near each other. */
.seat-table {
  display: flex;
  gap: 2px;
  padding: 3px;
  margin: 0 4px;
  border: 2px solid #6c757d;
  border-radius: 0.5rem;
  background-color: #ffffff;
}

/* The walkway. Empty on purpose; it is the gap that makes the room legible. */
.seat-aisle {
  width: 2.5rem;
  flex: 0 0 auto;
}

/* Legend swatch: the same colours as the seats, shrunk. */
.seat-key {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  vertical-align: -0.15rem;
  border: 1px solid #ced4da;
  border-radius: 0.2rem;
}

/* The seat being moved, and the seats offered as destinations. */
.seat-moving {
  background-color: #ffc107;
  border-color: #997404;
  color: #3d2c00;
  font-weight: 700;
}

.seat-target { cursor: pointer; }
.seat-target:hover { outline: 2px solid #006341; }

/* Instructor-only controls, kept small so a name is still the loudest thing
   in the seat. */
.seat-tools {
  display: flex;
  gap: 0.25rem;
  margin-top: 0.1rem;
}

.seat-tool {
  font-size: 0.62rem;
  line-height: 1;
  padding: 0;
  border: 0;
  background: none;
  color: #006341;
  text-decoration: underline;
}

.seat-tool-danger { color: #b02a37; }

.seat-button { border-width: 1px; }
.seat-button:hover { background-color: #e7f3ee; border-color: #006341; }

@media (max-width: 576px) {
  .seat-cell { width: 5rem; min-height: 2.75rem; font-size: 0.85rem; }
  .seat-table { margin: 0 2px; padding: 2px; }
  .seat-aisle { width: 1.25rem; }
}


/* Printing the seating chart ------------------------------------------- */

@media print {
  /* Chrome that is meaningless on paper. */
  nav.navbar,
  footer,
  .alert-dismissible,
  .no-print {
    display: none !important;
  }

  main.container {
    padding: 0 !important;
    max-width: none !important;
  }

  /* The room scrolls sideways on screen; on paper there is nowhere to scroll
     to, so it has to fit the page instead. */
  .seating-room {
    overflow: visible !important;
  }

  /* Smaller than on screen. A chart is read on paper at arm's length rather
     than from the back of a room, and eight seats across has to fit inside
     landscape margins. */
  .seat-cell {
    width: 4.6rem !important;
    min-height: 2.5rem !important;
    font-size: 0.7rem !important;
  }

  .seat-table { margin: 0 2px !important; padding: 2px !important; }
  .seat-aisle { width: 1.5rem !important; }

  /* Browsers drop background colours when printing, which would flatten
     seated, absent and waiting into the same empty box. */
  .seat-cell,
  .seat-key,
  .seating-front {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  /* A row split across two pages is unreadable. */
  .seat-row, .seat-table { page-break-inside: avoid; break-inside: avoid; }

  a[href]::after { content: ""; }  /* no URLs printed after every link */
}

@page { size: landscape; margin: 12mm; }