/* ===================================
   MAIN APPLICATION STYLES
   Consolidates: app.css, home.css, census.css, maintenance.css
   Modern enhancements added while preserving all existing functionality
   =================================== */

/* ===================================
   BASE & TYPOGRAPHY
   =================================== */

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, Helvetica, sans-serif;
  line-height: 1.6;
  color: var(--text-color);
  background-color: var(--background-color);
  margin: 0;
  padding: 20px;
  padding-top: 80px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--text-color);
  font-weight: 600;
  line-height: 1.2;
  margin-top: 0;
}

h1 {
  font-size: 2rem;
}

h2 {
  font-size: 1.5rem;
}

h3 {
  font-size: 1.25rem;
}

h3.section-title,
h3.note-header,
h4.note-header {
  color: var(--modal-text-color);
}

p {
  margin-top: 0;
}

/* ===================================
   CONTAINERS & LAYOUTS
   =================================== */

.container {
  max-width: 1200px;
  margin: auto;
  background: var(--card-background);
  padding: var(--spacing-xl);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  position: relative;
}

.user-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--spacing-lg);
}

.user-info {
  flex: 1;
  min-width: 300px;
  margin-right: var(--spacing-lg);
}

/* Census cards reuse .user-info as their content wrapper; the generic
   min-width above (sized for the check-in panel) forces it wider than the
   ~280px grid card and pushes the name-row icons past the card edge.
   min-width: 0 restores the h3 flex-wrap containment. */
.user-entry .user-info {
  min-width: 0;
  margin-right: 0;
}

/* Home Navigation Grid */
.home-nav-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: var(--spacing-lg);
  margin-top: var(--spacing-xl);
}

.home-nav-grid .button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-lg);
  min-height: 80px;
  font-size: 1.1em;
  text-align: center;
  transition: all var(--transition-base);
}

.home-nav-grid .button i {
  font-size: 1.5em;
}

/* ===================================
   FORM ELEMENTS
   =================================== */

input[type='text'],
input[type='number'],
input[type='date'],
input[type='datetime-local'],
input[type='time'],
input[type='search'],
input[type='url'],
input[type='password'],
input[type='email'],
input[type='tel'],
select,
textarea {
  width: 100%;
  padding: 12px;
  margin-bottom: 10px;
  border: 2px solid var(--border-color);
  border-radius: var(--radius-md);
  box-sizing: border-box;
  font-size: 14px;
  font-family: inherit;
  transition: all var(--transition-fast);
  /* Fields follow the theme. These were `white` / `#333` — two literals that
     ignored all 28 themes, so every dark theme rendered a page of white boxes
     next to its themed selects (Preston, 2026-08-09). Same recipe as the
     existing .input-v2 in components.css: canvas inset on the card surface.

     Anywhere a surface is deliberately PINNED light in every theme (the
     check-in lookup modals, the Dashboard/census user-lookup summary), the pin
     re-declares --canvas/--text-color/--input-border on its own container, so
     fields inside it stay light without needing a rule of their own. */
  background: var(--canvas);
  color: var(--text-color);
}

/* Placeholders were the UA's grey, chosen against the white above.
   --text-muted, NOT --text-faint: the contrast gate caught text-faint failing
   the 3:1 bar on --canvas in all 14 light themes (it is the ~2.7:1 ink meant
   for disabled chrome, not for text you are being asked to read). */
input::placeholder,
textarea::placeholder {
  color: var(--text-muted);
  opacity: 1;
}

input[type='text']:focus,
input[type='number']:focus,
input[type='date']:focus,
input[type='password']:focus,
input[type='email']:focus,
input[type='tel']:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--brand);
  /* Was a hardcoded rgba(221,114,0,…) — the ORIGINAL orange accent, glowing
     orange on all 13 other accents. --focus-ring is per-theme. */
  box-shadow: var(--focus-ring);
}

input[type='text']#editBarcodeId {
  font-family: 'Courier New', Courier, monospace;
  letter-spacing: 1px;
}

input[readonly] {
  /* Was #f5f5f5 — a light grey that read as a WHITE box in dark themes. */
  background-color: var(--hover-bg);
  color: var(--text-secondary);
  cursor: not-allowed;
}

textarea {
  min-height: 100px;
  resize: vertical;
}

select {
  cursor: pointer;
  padding: 10px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23333' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

/* The #333 chevron above is invisible on dark surfaces — swap in a light one
   for every dark accent theme (and custom, which is dark-based). Repeat and
   position are restated here on purpose: page styles that set `background:`
   (shorthand) on selects reset repeat/position to initial, and since this rule
   outranks most of them on background-image, the chevron would tile across the
   control without its own no-repeat. */
[data-theme$='-dark'] select,
[data-theme='custom'] select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23a09992' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
}

.form-group {
  margin-bottom: var(--spacing-lg);
}

.form-group label {
  display: block;
  margin-bottom: var(--spacing-sm);
  /* --text-color, NOT --modal-text-color. --modal-text-color is pinned to a
     near-black (#292524) in EVERY theme on purpose, because the four
     print-coupled lookup modals are pinned light — but `.form-group` is a
     generic page structure, so on an ordinary dark page its labels rendered
     near-black on near-black at 1.04:1. The OASES Debug tool's three field
     labels were invisible. Surfaces that really are pinned light re-declare
     --text-color on their own container, so their labels still come out dark. */
  color: var(--text-color);
  font-weight: 500;
  font-size: 14px;
}

/* The newer .modal-v2 shells sit on a dark surface and use the theme-aware
   --text-color for their body. Legacy --modal-text-color (near-black, meant
   for the old light modals) renders form labels/hints dark-on-dark and nearly
   invisible there — scope those back to the readable body color. */
.modal-v2 .form-group label,
.modal-v2 details > summary {
  color: var(--text-color);
}

/* User Edit Modal Form Grid */
#editUserForm label {
  color: var(--modal-text-color);
  font-weight: 500;
  font-size: 14px;
  margin-bottom: var(--spacing-xs);
  display: block;
}

/* Form field wrapper for 2-column layout */
.form-field-group {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-md) var(--spacing-lg);
  margin-bottom: var(--spacing-md);
}

/* Form field wrapper for 3-column layout (ID fields) */
.form-field-group-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--spacing-md) var(--spacing-lg);
  margin-bottom: var(--spacing-md);
}

.form-field {
  display: flex;
  flex-direction: column;
}

.form-field label {
  margin-bottom: var(--spacing-xs);
}

/* Full-width field */
.form-field-full {
  grid-column: 1 / -1;
}

/* Section headers */
#editUserForm h3 {
  margin-top: var(--spacing-lg);
  margin-bottom: var(--spacing-md);
  grid-column: 1 / -1;
}

/* Full-width sections */
#editUserForm .form-group,
#editUserForm #staffFields,
#editUserForm #nonStaffFields,
#editUserForm #emergencyContactsField,
#editUserForm #staffApprovedSubjectsFields,
#editUserForm textarea {
  width: 100%;
}

#editUserForm > button[type='submit'],
#editUserForm > button[type='button'] {
  margin-top: var(--spacing-md);
}

/* Short field pairs stay TWO-UP on phones.
   ------------------------------------------------------------------
   These groups already pair the fields that belong together — First/Last
   name, Phone/Email, Birthday/Primary Lounge, School/Grad Year. Collapsing
   every one of them to a single column spent a whole ~70px row on a
   two-digit graduation year, and it is why the Create/Edit User modal
   measures 2,385px — about 2.8 phone screens for 20 fields.

   Keeping the pairs side by side gives each field ~155px, which is what the
   emergency-contact Phone field gets and reads fine. Labels above their
   input (never beside it) and free to wrap onto a second line: a wrapped
   label still costs far less than another full row.

   `.form-field-group-3` is the exception — three across at 390px would be
   ~110px each, so it pairs the first two and lets the third run full width.
   `.stack-on-mobile` opts an individual group back out. */
@media (max-width: 768px) {
  .form-field-group,
  .form-field-group-3 {
    grid-template-columns: 1fr 1fr;
    column-gap: 10px;
    align-items: start;
  }

  .form-field-group-3 > *:nth-child(3) {
    grid-column: 1 / -1;
  }

  .form-field-group.stack-on-mobile,
  .form-field-group-3.stack-on-mobile {
    grid-template-columns: 1fr;
  }

  /* A field can't be narrower than its own content or the group overflows. */
  .form-field-group > *,
  .form-field-group-3 > * {
    min-width: 0;
  }

  /* Text inputs fill their half of the pair — but NOT checkboxes or radios,
     which would stretch into a 166px-wide box (Auto-assign ID did exactly
     that, and overflowed its column). */
  .form-field-group input:not([type='checkbox']):not([type='radio']),
  .form-field-group select,
  .form-field-group-3 input:not([type='checkbox']):not([type='radio']),
  .form-field-group-3 select {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }
}

/* File upload wrapper */
.file-upload-wrapper {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

.selected-file-name {
  color: var(--text-color);
  font-size: 14px;
  font-style: italic;
  opacity: 0.8;
}

/* Full width button */
.btn-full-width {
  width: 100% !important;
  margin-top: var(--spacing-lg);
}

/* ===================================
   BUTTONS
   =================================== */

button,
.button {
  background-color: var(--primary-color);
  color: var(--text-color);
  padding: 12px 20px;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  margin-right: 10px;
  transition: all var(--transition-base);
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
  box-shadow: var(--shadow-sm);
}

button:hover,
.button:hover {
  background-color: var(--secondary-color);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

button:active,
.button:active {
  transform: translateY(0);
}

button i,
.button i {
  margin-right: 0;
}

/* Button Variants */
.btn-icon {
  padding: 8px 16px;
  border-radius: var(--radius-md);
  border: none;
  cursor: pointer;
  background-color: var(--primary-color);
  color: white;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all var(--transition-base);
  font-weight: 500;
}

.btn-icon:hover {
  background-color: var(--secondary-color);
  transform: translateY(-2px);
}

.btn-icon i {
  margin-right: 0;
}

.edit-btn {
  background-color: #ffc107;
  color: #000;
}

.edit-btn:hover {
  background-color: #b0870e;
}

.delete-btn {
  background-color: #dc3545;
  color: #fff;
}

.delete-btn:hover {
  background-color: #b30e1f;
}

.add-btn {
  background-color: #28a745;
  color: #fff;
}

.add-btn:hover {
  background-color: #1c7731;
}

.primary-btn {
  background-color: #4caf50;
  color: white;
  padding: 10px 15px;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
}

.secondary-btn {
  background-color: #607d8b;
  color: white;
  padding: 10px 15px;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
}

.danger-btn {
  background-color: #dc3545;
  color: white;
  padding: 10px 15px;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background-color var(--transition-base);
}

.danger-btn:hover {
  background-color: #bd2130;
}

.submit-btn {
  display: block;
  width: 100%;
  padding: 12px;
  background-color: var(--primary-color);
  color: white;
  border: none;
  border-radius: var(--radius-md);
  font-size: 16px;
  cursor: pointer;
  transition: all var(--transition-base);
  font-weight: 600;
}

.submit-btn:hover {
  background-color: var(--secondary-color);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.home-button,
.history-button {
  position: absolute;
  top: 20px;
  padding: 10px 15px;
  background-color: var(--primary-color);
  color: var(--text-color);
  text-decoration: none;
  border-radius: var(--radius-md);
  transition: all var(--transition-base);
  font-weight: 500;
}

.home-button {
  left: 20px;
}

.history-button {
  right: 20px;
}

.home-button:hover,
.history-button:hover {
  background-color: var(--secondary-color);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.profile-button {
  padding: 8px 16px;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: white;
  font-size: 14px;
  transition: all var(--transition-base);
}

.modal-buttons,
.user-action-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: var(--spacing-lg);
}

.user-action-buttons {
  justify-content: space-between;
}

.user-action-buttons button {
  flex: 0 1 auto;
}

/* ===================================
   USER CARDS & PROFILES
   =================================== */

.user-card {
  background-color: #f9f9f9;
  border-radius: var(--radius-lg);
  padding: var(--spacing-xl);
  box-shadow: var(--shadow-md);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
  margin-top: var(--spacing-lg);
  width: 100%;
  max-width: 100%;
  overflow: visible;
  box-sizing: border-box;
}

.user-header {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: var(--spacing-lg);
  width: 100%;
  margin-bottom: var(--spacing-lg);
}

.user-header-left {
  display: flex;
  flex-direction: column;
  gap: 15px;
  min-width: 120px;
}

.user-header-info {
  flex: 1;
  min-width: 0;
  overflow: visible;
  width: 100%;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.user-header-info h2 {
  margin-top: 0;
  margin-bottom: 10px;
  color: var(--modal-text-color);
}

.user-header-buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 120px;
}

.user-header-buttons button {
  width: 100%;
  padding: 8px;
  white-space: nowrap;
  margin: 0;
}

.user-image {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  box-shadow: var(--shadow-md);
}

.user-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.placeholder-image {
  width: 100%;
  height: 100%;
  background-color: #e0e0e0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #666;
  font-weight: 600;
}

.user-details-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
  color: var(--modal-text-color);
}

.user-detail {
  padding: var(--spacing-sm);
  background-color: rgba(255, 255, 255, 0.05);
  border-radius: var(--radius-md);
}

.user-detail strong {
  color: var(--primary-color);
}

.user-detail .barcode-id {
  font-family: 'Courier New', Courier, monospace;
  letter-spacing: 1px;
  background-color: var(--hover-bg);
  color: var(--text-color);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
}

.user-details {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-lg);
  background-color: #ffffff;
  color: var(--modal-text-color);
  padding: 8px;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.detail-column {
  flex: 1;
  min-width: 250px;
}

.user-info-columns {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
  margin-top: var(--spacing-lg);
}

.user-notes {
  width: 100%;
  color: var(--modal-text-color);
  background-color: #ffffff;
  padding: var(--spacing-md);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  overflow-wrap: break-word;
  word-wrap: break-word;
}

.note-content {
  white-space: normal;
  word-wrap: break-word;
  overflow-wrap: break-word;
  max-width: 100%;
  margin-bottom: 10px;
  line-height: 1.5;
}

.staff-education {
  flex: 1;
}

.staff-edu-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
  color: var(--modal-text-color);
}

.staff-edu-table th,
.staff-edu-table td {
  border: 1px solid var(--table-border-color);
  padding: 8px;
  text-align: left;
}

.staff-edu-table th {
  background-color: var(--card-background);
  font-weight: bold;
  color: var(--text-color);
}

.staff-edu-table tr:nth-child(even) {
  background-color: rgba(0, 0, 0, 0.05);
}

.user-status {
  margin-top: var(--spacing-lg);
  font-weight: bold;
}

/* ===================================
   SEARCH COMPONENTS
   =================================== */

#searchResults,
#hostSearchResults {
  margin-top: 10px;
}

#searchResults p {
  padding: 8px;
  margin: 0 0 5px 0;
  color: var(--text-color);
}

.search-results-scrollable {
  max-height: 150px;
  overflow-y: auto;
  background-color: var(--card-background);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
}

.search-result-item {
  padding: 10px;
  background-color: var(--background-color);
  border-bottom: 1px solid var(--border-color);
  cursor: pointer;
  transition: background-color var(--transition-fast);
}

.search-result-item:last-child {
  border-bottom: none;
}

.search-result-item:hover {
  background-color: var(--hover-bg);
}

.search-container {
  position: relative;
  display: inline-block;
  width: 100%;
  margin-bottom: var(--spacing-lg);
}

.search-container #hostSearchInput,
.search-container input {
  width: 100%;
  padding: 10px;
  margin-bottom: 10px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  box-sizing: border-box;
}

/* Custom scrollbar */
.search-results-scrollable::-webkit-scrollbar {
  width: 8px;
}

.search-results-scrollable::-webkit-scrollbar-track {
  background: var(--background-color);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.search-results-scrollable::-webkit-scrollbar-thumb {
  background: var(--primary-color);
  border-radius: var(--radius-md);
}

.search-results-scrollable::-webkit-scrollbar-thumb:hover {
  background: var(--secondary-color);
}

/* Host Selection Modal Specific Styles */
.host-selection-modal #hostSearchInput {
  background-color: var(--background-color);
  color: var(--text-color);
  border: 1px solid var(--input-border);
}

.host-selection-modal #hostSearchResults {
  color: var(--text-color);
}

.host-selection-modal .search-results-scrollable {
  background-color: var(--background-color);
  border-color: var(--input-border);
}

.host-selection-modal .search-result-item {
  background-color: var(--card-background);
  border-bottom: 1px solid var(--input-border);
  color: var(--text-color);
}

.host-selection-modal .search-result-item:hover {
  background-color: var(--secondary-color);
}

.host-selection-modal h2 {
  color: var(--text-color);
}

/* ===================================
   MODALS
   =================================== */

.modal {
  display: none;
  position: fixed;
  z-index: var(--z-modal);
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

.modal-content {
  background-color: #fefefe;
  margin: 5% auto;
  padding: var(--spacing-xl);
  border: none;
  width: 90%;
  max-width: 1000px;
  border-radius: var(--radius-xl);
  color: var(--modal-text-color);
  box-shadow: var(--shadow-xl);
  animation: scaleIn 0.3s ease-out;
  max-height: 85vh;
  overflow-y: auto;
}

.modal-content h1,
.modal-content h2,
.modal-content h3,
.modal-content h4,
.modal-content h5,
.modal-content h6 {
  color: var(--modal-text-color);
}

@keyframes scaleIn {
  from {
    transform: scale(0.9);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

.close {
  color: var(--text-muted);
  float: right;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
  transition: color var(--transition-fast);
}

.close:hover,
.close:focus {
  color: var(--text-color);
  text-decoration: none;
}

/* Lounge Update Form */
#loungeUpdateForm .form-group {
  margin-bottom: 15px;
}

#loungeUpdateForm input[readonly] {
  background-color: var(--hover-bg);
  color: var(--text-secondary);
  cursor: not-allowed;
}

#loungeUpdateForm textarea {
  width: 100%;
  min-height: 100px;
  padding: 10px;
  resize: vertical;
}

#addLoungeUpdateBtn {
  background-color: var(--primary-color);
  color: var(--text-color);
}

/* The icon inherits the button's text color, not the brand orange that
   .user-action-buttons button i applies — otherwise it's orange-on-orange. */
#addLoungeUpdateBtn i {
  color: inherit;
}

#addLoungeUpdateBtn:hover {
  background-color: var(--secondary-color);
}

/* ===================================
   MESSAGES & NOTIFICATIONS
   =================================== */

#message {
  margin-top: 10px;
  padding: 10px;
  border-radius: var(--radius-md);
}

.success,
.success-message {
  background-color: var(--success-bg);
  color: var(--secondary-color);
  padding: 15px;
  border-radius: var(--radius-md);
  border-left: 4px solid var(--success-color);
}

.error,
.error-message {
  background-color: var(--error-bg);
  color: #721c24;
  padding: 15px;
  border-radius: var(--radius-md);
  border-left: 4px solid var(--error-color);
}

.status-message {
  margin: var(--spacing-lg) 0;
  padding: 15px;
  border-radius: var(--radius-md);
  text-align: center;
  font-weight: bold;
}

.status-message.success {
  background-color: var(--success-color);
  color: white;
}

/* warning/info sit on translucent tint backgrounds close to the page
   surface, so ink with the theme text color (--modal-text-color is the
   light-locked dark ink and vanishes on dark themes). */
.status-message.warning {
  background-color: var(--warning-bg);
  color: var(--text-color);
  border: 1px solid var(--warning-color);
}

.status-message.error {
  background-color: var(--error-color);
  color: white;
}

.status-message.info {
  background-color: var(--info-bg);
  color: var(--text-color);
  border: 1px solid var(--info-color);
}

/* ===================================
   TOOLTIPS
   =================================== */

.info-tooltip {
  cursor: help;
  margin-left: 5px;
  position: relative;
}

.info-tooltip::before {
  content: attr(data-tooltip);
  position: absolute;
  top: 100%;
  right: 0;
  transform: translateY(5px);
  background-color: #333;
  color: #fff;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  white-space: normal;
  /* The tooltip anchors to the tiny info icon; without an explicit width it
     shrink-to-fits to the icon's width and wraps every word. Size it to its
     content, capped, and extend leftward from the icon (right: 0). */
  width: max-content;
  max-width: 280px;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--transition-base),
    visibility var(--transition-base);
  z-index: 1000;
  line-height: 1.4;
  font-size: 14px;
}

.info-tooltip:hover::before {
  opacity: 1;
  visibility: visible;
}

.icon-tooltip {
  position: relative;
  display: inline-block;
  margin-left: 5px;
}

.icon-tooltip .tooltiptext {
  visibility: hidden;
  width: auto;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: var(--radius-md);
  padding: 8px 12px;
  position: absolute; /* Changed from fixed to absolute */
  bottom: 125%; /* Position above the icon */
  left: 50%;
  transform: translateX(-50%); /* Center horizontally */
  z-index: 99999;
  opacity: 0;
  transition:
    opacity var(--transition-base),
    visibility var(--transition-base);
  white-space: nowrap;
  font-size: 14px;
  pointer-events: none;
}

.icon-tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

/* Add a small arrow pointing down */
.icon-tooltip .tooltiptext::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

/* Viewport clamping for ANY icon tooltip.
   These used to exist only for .emergency-contacts-tooltip, so every other
   tooltip — the approved-subjects list in particular, which can run to a dozen
   entries — kept its centered transform and ran off the left edge of the
   screen for cards near the viewport edge. The JS in census.html applies these
   classes to any .tooltiptext now. */
.icon-tooltip .tooltiptext.align-left {
  left: 0;
  right: auto;
  transform: translateX(0);
}

.icon-tooltip .tooltiptext.align-right {
  left: auto;
  right: 0;
  transform: translateX(0);
}

/* Long lists need to wrap and stay inside the viewport rather than sizing to
   their content. */
.approved-subjects-tooltip {
  width: max-content;
  max-width: min(420px, calc(100vw - 24px));
  white-space: normal;
  text-align: left;
}

/* Emergency Contacts Tooltip */
.emergency-contacts-tooltip {
  min-width: min(400px, calc(100vw - 24px)) !important;
  max-width: min(500px, calc(100vw - 24px)) !important;
  width: max-content !important;
  padding: 12px !important;
  text-align: left !important;
  white-space: normal !important;
  position: absolute !important;
  bottom: 125% !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 99999 !important;
}

/* When tooltip would overflow left, align to left edge of icon */
.emergency-contacts-tooltip.align-left {
  left: 0 !important;
  transform: translateX(0) !important;
}

/* When tooltip would overflow right, align to right edge of icon */
.emergency-contacts-tooltip.align-right {
  left: auto !important;
  right: 0 !important;
  transform: translateX(0) !important;
}

.emergency-contacts-tooltip .tooltip-header {
  font-weight: bold;
  font-size: 14px;
  margin-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  padding-bottom: 4px;
}

.emergency-contacts-tooltip .tooltip-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.emergency-contacts-tooltip .tooltip-table th {
  background-color: rgba(255, 255, 255, 0.1);
  padding: 6px 8px;
  text-align: left;
  font-weight: bold;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.emergency-contacts-tooltip .tooltip-table td {
  padding: 6px 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.emergency-contacts-tooltip .tooltip-table tr:last-child td {
  border-bottom: none;
}

.emergency-contacts-tooltip .tooltip-table tr:hover {
  background-color: rgba(255, 255, 255, 0.05);
}

/* Approved Subjects Tooltip */
.approved-subjects-tooltip {
  min-width: 250px !important;
  max-width: 350px !important;
  width: max-content !important;
  padding: 10px 12px !important;
  text-align: left !important;
  white-space: normal !important;
  line-height: 1.5 !important;
}

/* ===================================
   ICONS & BADGES
   =================================== */

.delete-x {
  color: red;
  font-size: 20px;
  font-weight: bold;
  cursor: pointer;
  display: inline-block;
  width: 20px;
  height: 20px;
  text-align: center;
  line-height: 20px;
  border-radius: 50%;
  transition: background-color var(--transition-base);
}

.delete-x:hover {
  background-color: rgba(255, 0, 0, 0.1);
}

.restricted-icons {
  background-color: red;
  color: white;
  padding: 5px 10px;
  border-radius: var(--radius-md);
  display: inline-block;
  margin-bottom: 10px;
  font-weight: 600;
}

.restricted-icons i {
  margin-right: 5px;
}

/* Check-In page: parent accounts have no lounge check-in — a quiet info
   line replaces the location buttons (see updateCheckInOutButtons). */
.parent-account-note {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  margin: var(--spacing-md) 0;
  font-size: 14px;
}

.restricted-warning {
  background-color: #ff0000;
  color: white;
  border: 3px solid #cc0000;
  padding: 15px;
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  margin: var(--spacing-lg) 0;
  box-shadow: var(--shadow-lg);
  border-radius: var(--radius-md);
}

.birthday-icons {
  font-size: 1.5em;
  padding: 5px 10px;
  border-radius: var(--radius-md);
  margin-left: 10px;
}

.birthday-icons i {
  margin-right: 5px;
  color: var(--text-secondary);
}

.fa-cake-candles {
  color: #ffd700;
}

.birthday-today {
  color: #ff4500;
}

.birthday-soon {
  color: #32cd32;
}

.birthday-recent {
  color: #1e90ff;
}

.pending-badge {
  background-color: var(--warning-color);
  color: var(--modal-text-color);
  padding: 3px 8px;
  border-radius: var(--radius-full);
  font-size: 0.8em;
  margin-left: 10px;
  font-weight: 600;
}

.notes-icon {
  cursor: pointer;
  position: relative;
}

.notes-content {
  position: absolute;
  /* Both sides of the pair are tokens: surface chip + theme ink. (The old
     fixed #f9f9f9 background inherited the theme's near-white ink in dark
     mode — unreadable. The census-table variant light-locks its own ink.) */
  background-color: var(--surface);
  color: var(--text-color);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  z-index: 10001;
  top: 100%;
  left: 0;
  width: 300px;
  max-height: 200px;
  overflow-y: auto;
  padding: 15px;
  font-size: 14px;
  line-height: 1.4;
  word-wrap: break-word;
  white-space: normal;
  font-family: Arial, Helvetica, sans-serif;
  box-shadow: var(--shadow-lg);
  visibility: hidden;
  opacity: 0;
  transition:
    opacity var(--transition-base),
    visibility var(--transition-base);
}

.notes-content p {
  margin-bottom: 10px;
}

.notes-content strong {
  font-weight: bold;
  display: inline-block;
  margin-right: 5px;
}

.notes-content .note-content {
  font-weight: normal;
  display: inline;
}

.notes-content.visible {
  visibility: visible;
  opacity: 1;
}

.notes-content.left {
  right: 100%;
  top: 0;
  margin-right: 10px;
  left: auto;
}

.notes-content.right {
  left: 100%;
  top: 0;
  margin-left: 10px;
}

/* ===================================
   TABLES
   =================================== */

.table-container {
  width: 100%;
  margin: 15px 0;
  overflow-x: auto;
  overflow-y: visible;
  max-width: 100%;
  box-sizing: border-box;
}

.notes-table {
  width: 100%;
  border-collapse: collapse;
  margin: 10px 0;
  table-layout: fixed;
}

.notes-table th,
.notes-table td {
  border: 1px solid var(--border-color);
  padding: 12px;
  font-size: 14px;
  text-align: left;
  position: relative;
  width: 33.33%;
  min-width: 200px;
}

.truncate-cell {
  max-width: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  position: relative;
  cursor: pointer;
}

.truncate-cell:hover::after {
  content: attr(data-full-text);
  position: absolute;
  left: 0;
  top: 100%;
  background-color: #333;
  color: #fff;
  padding: 8px 12px;
  border-radius: var(--radius-md);
  z-index: 1000;
  white-space: normal;
  min-width: 200px;
  max-width: 500px;
  word-wrap: break-word;
  box-shadow: var(--shadow-lg);
  font-size: 14px;
  line-height: 1.4;
}

.emergency-contacts {
  width: 100%;
  background-color: #ffffff;
  padding: var(--spacing-md);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.emergency-contacts h3 {
  color: var(--modal-text-color);
  margin-bottom: var(--spacing-md);
  font-size: 1.1rem;
  font-weight: 600;
}

.emergency-contacts-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  color: var(--modal-text-color);
}

.emergency-contacts-table th {
  background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
  color: white;
  padding: 12px 16px;
  text-align: left;
  font-weight: 600;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.emergency-contacts-table th:first-child {
  border-top-left-radius: var(--radius-md);
}

.emergency-contacts-table th:last-child {
  border-top-right-radius: var(--radius-md);
}

.emergency-contacts-table td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid #e5e7eb;
  color: var(--modal-text-color);
}

.emergency-contacts-table tr:last-child td:first-child {
  border-bottom-left-radius: var(--radius-md);
}

.emergency-contacts-table tr:last-child td:last-child {
  border-bottom-right-radius: var(--radius-md);
}

.emergency-contacts-table tr:last-child td {
  border-bottom: none;
}

.emergency-contacts-table tbody tr {
  transition: background-color 0.2s ease;
}

.emergency-contacts-table tbody tr:hover {
  background-color: var(--hover-bg);
}

/* ===================================
   CHECK IN / OUT & CENSUS PAGES
   =================================== */

#checkInOut {
  margin-top: var(--spacing-lg);
  padding: var(--spacing-xl);
  background-color: var(--background-color);
  border-radius: var(--radius-lg);
}

#checkInOut button {
  margin-top: 10px;
}

#userInfo {
  margin-top: var(--spacing-lg);
}

/* Census Summary Section */
#checkedInSummary {
  margin-bottom: var(--spacing-lg);
}

/* Stats Overview - Compact Cards */
.stats-overview {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  flex-wrap: wrap;
  margin-bottom: var(--spacing-md);
}

.stat-card {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  background: var(--card-background);
  padding: var(--spacing-md);
  border-radius: var(--radius-md);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
  min-width: 140px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
}

.stat-card-primary {
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  box-shadow: 0 4px 12px rgba(221, 114, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.stat-card-primary:hover {
  box-shadow: 0 6px 20px rgba(221, 114, 0, 0.5);
}

.stat-icon {
  font-size: 1.8em;
  color: rgba(255, 255, 255, 0.9);
  width: 45px;
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-md);
}

.stat-content {
  flex: 1;
}

.stat-value {
  font-size: 1.8em;
  font-weight: 700;
  color: var(--text-color);
  line-height: 1;
  margin-bottom: 2px;
}

.stat-label {
  font-size: 0.85em;
  color: rgba(255, 255, 255, 0.7);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.toggle-details-btn {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--card-background);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-md);
  color: var(--text-color);
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 0.9em;
  font-weight: 500;
  margin-left: auto;
}

.toggle-details-btn:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--primary-color);
}

.toggle-details-btn i {
  transition: transform 0.2s ease;
}

/* Location Breakdown Mini Cards */
.location-breakdown-cards {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-md);
  margin-bottom: var(--spacing-md);
}

.location-mini-card {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  background: var(--card-background);
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--radius-md);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
  transition: all 0.2s ease;
  border-left: 4px solid var(--primary-color);
  flex: 0 1 auto;
  min-width: 120px;
  /* A white wash reads as a hairline on dark and as nothing on light. */
  border: 1px solid var(--border-color-soft);
  border-left: 4px solid var(--primary-color);
}

.location-mini-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
  border-left-color: var(--secondary-color);
}

.location-mini-icon {
  font-size: 1.2em;
  color: var(--primary-color);
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Was the ORIGINAL orange literal, so this chip stayed orange under all 13
     other accents. */
  background: color-mix(in srgb, var(--brand) 12%, transparent);
  border-radius: var(--radius-sm);
}

.location-mini-content {
  flex: 1;
  min-width: 0;
}

.location-mini-value {
  font-size: 1.4em;
  font-weight: 700;
  color: var(--text-color);
  line-height: 1;
  margin-bottom: 2px;
}

.location-mini-label {
  font-size: 0.75em;
  /* Was rgba(255,255,255,0.7) — WHITE, on a card that is var(--card-background).
     Fine on a dark theme, invisible in light mode, which is exactly how Preston
     saw it: the count rendered and the location name did not (2026-08-10). The
     value above it already used --text-color; only the label was a literal. */
  color: var(--text-secondary);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.detailed-breakdown {
  margin-top: var(--spacing-md);
  padding-top: var(--spacing-md);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-lg);
}

#checkedInSummary table {
  font-size: 0.9em;
  margin: 10px 0;
}

#checkedInSummary td,
#checkedInSummary th {
  padding: 5px;
}

.summary-table {
  background: var(--card-background);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  width: 100%;
}

.summary-table caption {
  font-size: 1.1em;
  font-weight: 600;
  padding: var(--spacing-md);
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  color: white;
  text-align: left;
}

.summary-table tbody {
  display: table-row-group;
  width: 100%;
}

.summary-table tr:not(.breakdown-container) {
  display: flex;
  justify-content: space-between;
  padding: var(--spacing-sm) var(--spacing-md);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  transition: background-color var(--transition-fast);
}

.summary-table tr.breakdown-container {
  display: table-row;
  padding: 0;
  width: 100%;
}

.summary-table tr.breakdown-container.collapsed {
  display: none;
}

.summary-table tr:hover {
  background-color: rgba(255, 255, 255, 0.05);
}

.summary-table tr:last-child {
  border-bottom: none;
}

.summary-table td {
  color: var(--text-color);
  padding: 0;
}

.summary-table td:first-child {
  font-weight: 500;
}

.summary-table td:last-child {
  font-weight: 700;
  color: var(--primary-color);
  min-width: 50px;
  text-align: right;
}

/* Location breakdown styles */
.location-row {
  cursor: pointer;
}

.location-row:hover {
  background-color: var(--hover-bg);
}

.breakdown-icon {
  margin-right: 8px;
  font-size: 0.8em;
  transition: transform 0.2s ease;
}

.breakdown-container {
  background-color: rgba(0, 0, 0, 0.2);
}

.breakdown-container td {
  padding: 0 !important;
  width: 100%;
}

.breakdown-table {
  width: 100% !important;
  margin: 0;
  border-collapse: collapse;
  table-layout: fixed;
}

.breakdown-row td {
  color: var(--text-color);
  opacity: 0.9;
  font-size: 0.95em;
  padding: var(--spacing-xs) var(--spacing-md);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.breakdown-row td:first-child {
  width: 70%;
}

.breakdown-row td:last-child {
  width: 30%;
  text-align: right;
}

.breakdown-row:last-child td {
  border-bottom: none;
}

/* User Grid Layout */
.user-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr));
  gap: var(--spacing-lg);
}

#checkedInUsersList {
  margin-top: var(--spacing-lg);
  overflow: visible;
}

/* User Entry Cards */
.user-entry {
  position: relative;
  background-color: var(--surface);
  border: 1px solid var(--border-color-soft);
  padding: 15px;
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: all var(--transition-base);
  color: var(--text-color);
  overflow: visible; /* Always allow tooltips to show */
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 300px;
  box-shadow: var(--shadow-sm);
  box-sizing: border-box;
  z-index: 1;
}

.user-entry:hover {
  transform: translateY(-2px);
  border-color: var(--input-border);
  box-shadow: 0 6px 16px rgba(41, 37, 36, 0.08);
  z-index: 100;
}

.user-entry .user-image {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 15px;
  box-shadow: var(--shadow-md);
}

.user-entry .user-info {
  width: 100%;
  text-align: left;
  overflow-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
  align-self: flex-start;
}

.user-entry h3 {
  margin-top: 0;
  margin-bottom: 10px;
  color: var(--text-color);
  font-size: 1.1em;
  /* Flex+wrap so name and inline icons (notes, guest, contact) stay inside
     the card boundary on long names like "Sweep TestUser (safe to delete)".
     Without this, the icons followed the text run and overflowed the card. */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.user-entry h3 .user-name-text {
  flex: 1 1 auto;
  min-width: 0;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.user-entry h3 .user-name-icons {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.user-entry .user-icons {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.user-entry p {
  margin: 5px 0;
  color: var(--text-secondary);
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.user-entry p strong {
  color: var(--text-color);
}

.user-entry .check-in-time {
  font-size: 0.9em;
  color: var(--text-muted);
  margin-top: 5px;
}

/* Table View Mode */
.census-table-wrapper {
  width: 100%;
  overflow: visible;
}

/* Expand container for table view on census page */
body.table-view-active .container {
  max-width: 95% !important;
  width: 95% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Override user-grid layout when in table view mode */
body.table-view-active .user-grid {
  display: block !important;
}

.census-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  background: var(--card-background);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: visible;
}

/* Set percentage-based column widths for full-width table */
.census-table th:nth-child(1),
.census-table td:nth-child(1) {
  width: 22%;
} /* Name */
.census-table th:nth-child(2),
.census-table td:nth-child(2) {
  width: 18%;
} /* Icons */
.census-table th:nth-child(3),
.census-table td:nth-child(3) {
  width: 15%;
} /* Status */
.census-table th:nth-child(4),
.census-table td:nth-child(4) {
  width: 10%;
} /* Grade */
.census-table th:nth-child(5),
.census-table td:nth-child(5) {
  width: 18%;
} /* Location */
.census-table th:nth-child(6),
.census-table td:nth-child(6) {
  width: 17%;
} /* Checked In */

/* --primary-color is the BRIGHT accent; white on it measured 2.49:1 on the
   emerald theme. --brand-solid is the accessible fill, and --on-brand is the
   text tuned to sit on it. */
.census-table thead {
  background: var(--brand-solid);
  color: var(--on-brand);
}

.census-table th {
  padding: 12px 16px;
  text-align: left;
  font-weight: 600;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.census-table tbody {
  overflow: visible;
}

.census-table tbody tr {
  border-bottom: 1px solid var(--border-color);
  cursor: pointer;
  transition: background-color var(--transition-fast);
  overflow: visible;
}

.census-table tbody tr:hover {
  background-color: var(--hover-background);
}

.census-table tbody tr:last-child {
  border-bottom: none;
}

.census-table td {
  padding: 10px 16px;
  font-size: 14px;
  vertical-align: middle;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* Name column */
.census-table .user-name-cell {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.census-table .user-name-cell img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.census-table .user-name-cell .name-text {
  font-weight: 500;
  font-size: 14px;
}

/* Icons column */
.census-table .icons-cell {
  overflow: visible;
  position: relative;
}

.census-table .user-icons {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.census-table .user-icons i {
  font-size: 13px;
  cursor: pointer;
}

/* Ensure tooltips work in table view - match card view exactly */
.census-table .icon-tooltip {
  position: relative;
  display: inline-block;
}

.census-table .icon-tooltip .tooltiptext {
  visibility: hidden;
  width: auto;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 8px;
  padding: 8px 12px;
  position: absolute;
  bottom: 125%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 99999;
  opacity: 0;
  transition:
    opacity 0.2s,
    visibility 0.2s;
  white-space: nowrap;
  font-size: 14px;
  pointer-events: none;
}

.census-table .icon-tooltip .tooltiptext::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

.census-table .icon-tooltip:hover .tooltiptext,
.icon-tooltip .tooltiptext.tooltip-open {
  visibility: visible;
  opacity: 1;
}

/* Emergency contacts tooltip in table - needs wider width */
.census-table .icon-tooltip .emergency-contacts-tooltip {
  min-width: 300px;
  max-width: 450px;
  width: max-content;
  padding: 12px;
  text-align: left;
  white-space: normal;
}

/* Notes content tooltip in table view */
.census-table .notes-content {
  position: absolute;
  background-color: #f9f9f9;
  color: #333;
  border: 1px solid #ddd;
  border-radius: 8px;
  z-index: 99999;
  bottom: 100%;
  left: 0;
  top: auto;
  right: auto;
  width: 300px;
  max-height: 200px;
  overflow-y: auto;
  padding: 15px;
  font-size: 14px;
  line-height: 1.4;
  word-wrap: break-word;
  white-space: normal;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  visibility: hidden;
  opacity: 0;
  transition:
    opacity 0.2s,
    visibility 0.2s;
  margin-bottom: 10px;
}

.census-table .notes-content.visible {
  visibility: visible;
  opacity: 1;
}

.census-table .notes-content.left {
  right: 0;
  left: auto;
  bottom: 100%;
  top: auto;
}

.census-table .notes-content.right {
  left: 0;
  right: auto;
  bottom: 100%;
  top: auto;
}

.census-table .notes-content p {
  margin: 0 0 10px 0;
  color: #333;
}

.census-table .notes-content strong {
  color: #000;
}

/* Restricted styling */
.census-table .restricted-row {
  background-color: #fff5f5;
}

[data-theme$='-dark'] .census-table .restricted-row,
[data-theme='custom'] .census-table .restricted-row {
  background-color: rgba(244, 112, 103, 0.14);
}

.census-table .restricted-row:hover {
  background-color: #ffe0e0;
}

[data-theme$='-dark'] .census-table .restricted-row:hover,
[data-theme='custom'] .census-table .restricted-row:hover {
  background-color: rgba(244, 112, 103, 0.24);
}

.census-table .restricted-icons {
  display: inline-flex;
  gap: 4px;
  color: #dc3545;
}

/* Responsive table */
@media (max-width: 768px) {
  .census-table {
    font-size: 12px;
  }

  .census-table th,
  .census-table td {
    padding: 8px 10px;
  }

  .census-table .user-name-cell img {
    width: 28px;
    height: 28px;
  }
}

/* View Toggle Button */
.view-toggle-container {
  display: flex;
  align-items: center;
  gap: 10px;
}

.view-toggle-btn {
  /* Was a pinned light chip (#f5f5f5 / #ddd / #333) whose :hover below swaps in
     the THEMED --hover-bg — so in dark themes the pinned #333 ink landed on a
     dark fill and the label vanished on hover. Both states themed now. */
  background: var(--hover-bg);
  border: 1px solid var(--border-color-soft);
  border-radius: var(--radius-md);
  padding: 8px 12px;
  cursor: pointer;
  color: var(--text-color);
  font-size: 14px;
  transition: all var(--transition-fast);
  display: flex;
  align-items: center;
  gap: 6px;
}

.view-toggle-btn:hover {
  background: var(--card-background-hover);
  border-color: var(--border-color);
}

.view-toggle-btn.active {
  background: var(--primary-color);
  color: white;
  border-color: var(--primary-color);
}

/* Staff Type Badge */
.staff-type-badge {
  display: inline-block;
  background: #e3f2fd;
  color: #1565c0;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 12px;
  margin-left: 8px;
  font-weight: 500;
}

/* User Status Badges */
.status-badge {
  display: inline-block;
  font-size: 11px;
  padding: 3px 10px;
  border-radius: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.status-badge.member {
  background: #d4edda;
  color: #155724;
}

.status-badge.staff {
  background: #cce5ff;
  color: #004085;
}

.status-badge.client {
  background: #e2d5f1;
  color: #563d7c;
}

.status-badge.guest {
  background: #fff3cd;
  color: #856404;
}

.status-badge.day-pass {
  background: #d1ecf1;
  color: #0c5460;
}

.status-badge.summer-hold {
  background: #ffeeba;
  color: #856404;
}

.status-badge.promotional {
  background: #c3e6cb;
  color: #1e7e34;
}

.status-badge.not-customer {
  background: #e2e3e5;
  color: #383d41;
}

.status-badge.restricted {
  background: #f8d7da;
  color: #721c24;
}

/* Filter Styles */
.filter-icon {
  cursor: pointer;
  padding: 10px;
  font-size: 1.2em;
  transition: color var(--transition-fast);
}

.filter-icon:hover {
  color: var(--primary-color);
}

.filter-popup {
  display: none;
  position: absolute;
  right: 0;
  background-color: var(--surface);
  border: 1px solid var(--border-color);
  /* Widened so checkbox groups can flow into multiple columns instead of one
     tall scrolling column. */
  min-width: 360px;
  max-width: min(560px, calc(100vw - 32px));
  box-shadow: var(--shadow-xl);
  z-index: 1000;
  padding: 15px;
  border-radius: var(--radius-md);
  color: var(--text-color);
  /* Was 200px, which forced heavy scrolling; the multi-column layout keeps the
     content short so this rarely engages now. */
  max-height: 75vh;
  overflow-y: auto;
}

/* The heading previously inherited near-white from the global h2 rule while
   the popup was a light island → invisible. Now theme-token and no odd
   <ins> underline. */
.filter-popup h2 {
  color: var(--text-color);
  margin: 0 0 12px;
}

.filter-popup h2 ins {
  text-decoration: none;
}

.filter-popup.show {
  display: block;
}

.filter-content {
  max-height: 80vh;
}

.filter-group {
  margin-bottom: 15px;
}

/* Multi-column checkbox layout: lets Locations / User Statuses flow into 2
   columns so the popup stays short instead of one tall scrolling stack. */
.checkbox-group {
  columns: 2;
  column-gap: 18px;
}

.checkbox-group label {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 5px;
  cursor: pointer;
  /* Keep each checkbox row intact within a column. */
  break-inside: avoid;
}

#statusFilter {
  height: auto;
}

.header-container {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* ===================================
   MAINTENANCE CHECKLIST PAGES
   =================================== */

.location-selector {
  margin: var(--spacing-lg) 0;
  text-align: center;
}

.location-selector select {
  padding: 10px;
  width: 300px;
  border-radius: var(--radius-md);
  font-size: 16px;
}

.checklist-type {
  margin: var(--spacing-2xl) 0;
}

.checklist-buttons {
  display: flex;
  justify-content: center;
  gap: var(--spacing-lg);
  margin-top: 15px;
}

.checklist-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--spacing-xl);
  background-color: var(--primary-color);
  color: var(--text-color);
  border: none;
  border-radius: var(--radius-lg);
  cursor: pointer;
  width: 200px;
  font-size: 16px;
  transition: all var(--transition-base);
  box-shadow: var(--shadow-md);
  font-weight: 600;
}

.checklist-btn i {
  font-size: 36px;
  margin-bottom: 10px;
}

.checklist-btn:hover {
  background-color: var(--secondary-color);
  transform: translateY(-3px);
  box-shadow: var(--shadow-xl);
}

.previous-checklist {
  margin: var(--spacing-lg) 0;
  padding: var(--spacing-xl);
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-md);
}

.checklist-info {
  display: flex;
  justify-content: space-between;
  margin-bottom: 15px;
  border-bottom: 1px solid var(--divider-color);
  padding-bottom: 15px;
}

.checklist-info p {
  margin: 5px 0;
}

.checklist-item {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  padding: 10px;
  border-radius: var(--radius-md);
  transition: background-color var(--transition-base);
}

.checklist-item label {
  color: var(--modal-text-color);
  cursor: pointer;
}

.checklist-item:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

.checklist-item input[type='checkbox'] {
  margin-right: 10px;
  transform: scale(1.2);
  cursor: pointer;
}

.checklist-item.completed {
  background-color: var(--success-bg);
}

.checklist-item.completed label {
  color: var(--modal-text-color);
}

.checklist-item.incomplete {
  background-color: var(--error-bg);
}

.checklist-item.incomplete label {
  color: var(--modal-text-color);
}

#previous-checklist .checklist-item {
  pointer-events: none;
}

.read-only-checklist .checklist-item {
  padding: 15px;
  margin-bottom: 10px;
  border-radius: var(--radius-md);
}

.read-only-checklist .completed-task {
  background-color: var(--success-bg);
  color: #2e7d32;
}

.read-only-checklist .incomplete-task {
  background-color: var(--error-bg);
  color: #c62828;
}

.completed-task {
  color: #2e7d32;
}

.incomplete-task {
  color: #757575;
}

.notes-section {
  margin-top: var(--spacing-2xl);
  padding: 15px;
  background-color: #f5f5f5;
  border-radius: var(--radius-md);
  color: #1a1a1a;
}

.notes-section h4 {
  color: #1a1a1a;
  margin-top: 0;
  margin-bottom: 10px;
}

.completion-info {
  text-align: right;
  font-style: italic;
  margin-top: var(--spacing-lg);
  color: var(--text-secondary);
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: var(--spacing-lg);
}

.completed-checklist {
  background-color: var(--card-background);
  border-radius: var(--radius-md);
  padding: 15px;
  margin-bottom: 15px;
  border-left: 4px solid var(--success-color);
  color: var(--text-color);
}

.completed-checklist[data-status='pending'] {
  border-left: 4px solid var(--warning-color);
}

.checklist-header {
  margin-bottom: 10px;
}

#LocationPrompt {
  color: var(--text-color);
}

/* Staff Search */
.staff-search-container {
  position: relative;
  width: 100%;
}

.staff-search-results {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  max-height: 200px;
  overflow-y: auto;
  background-color: #fff;
  border: 1px solid var(--border-color);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  box-shadow: var(--shadow-lg);
  z-index: 10;
  display: none;
}

.staff-search-results.active {
  display: block;
}

.staff-result-item {
  padding: 10px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid var(--border-color);
  transition: background-color var(--transition-fast);
}

.staff-result-item:hover {
  background-color: var(--hover-bg);
}

.staff-result-item:last-child {
  border-bottom: none;
}

.staff-name {
  font-weight: bold;
}

.staff-id {
  color: var(--text-secondary);
  font-size: 0.9em;
  font-family: 'Courier New', Courier, monospace;
}

.numeric-match {
  font-weight: bold;
  color: #337ab7;
}

.no-results {
  padding: 10px;
  text-align: center;
  color: var(--text-secondary);
}

.input-error {
  border-color: var(--error-color) !important;
  /* Was #fff8f8 — a near-white pink, i.e. a white box in dark themes. */
  background-color: var(--error-bg);
}

.valid-staff {
  border-color: var(--success-color) !important;
  background-color: var(--success-bg);
}

.help-text {
  color: var(--text-secondary);
  font-size: 0.8rem;
  margin-top: 5px;
  display: block;
}

/* Confirmation Dialog */
.confirmation-dialog {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: white;
  padding: var(--spacing-xl);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  z-index: 1100;
  width: 90%;
  max-width: 400px;
  text-align: center;
}

.confirmation-dialog h3 {
  margin-top: 0;
  color: var(--error-color);
}

.confirmation-dialog p {
  margin: 15px 0;
  color: #1a1a1a;
}

.confirmation-buttons {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: var(--spacing-lg);
}

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1050;
}

.maintenance-button {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 60px;
  height: 60px;
  background-color: var(--primary-color);
  color: var(--text-color);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  text-decoration: none;
  box-shadow: var(--shadow-xl);
  transition: all var(--transition-base);
  z-index: 999;
}

.maintenance-button:hover {
  background-color: var(--secondary-color);
  transform: scale(1.1);
}

.maintenance-button i {
  pointer-events: none;
}

/* ===================================
   HOME PAGE SPECIFIC
   =================================== */

.logo {
  height: 100px;
  width: 150px;
  display: block;
  margin: 0 auto var(--spacing-lg);
  transition: transform var(--transition-base);
}

.logo:hover {
  transform: scale(1.05);
}

/* ===================================
   UTILITY CLASSES
   =================================== */

.hidden {
  display: none;
}

.text-center {
  text-align: center;
}

.mt-1 {
  margin-top: var(--spacing-sm);
}

.mt-2 {
  margin-top: var(--spacing-md);
}

.mt-3 {
  margin-top: var(--spacing-lg);
}

.mb-1 {
  margin-bottom: var(--spacing-sm);
}

.mb-2 {
  margin-bottom: var(--spacing-md);
}

.mb-3 {
  margin-bottom: var(--spacing-lg);
}

/* ===================================
   RESPONSIVE DESIGN
   =================================== */

@media (max-width: 768px) {
  body {
    padding: 10px;
    padding-top: 70px;
  }

  .container {
    padding: 15px;
  }

  h1 {
    font-size: 1.5em;
  }

  h2 {
    font-size: 1.3em;
  }

  .user-container {
    flex-direction: column;
  }

  .user-info,
  .user-image {
    width: 100%;
    margin-right: 0;
  }

  .user-info-columns {
    flex-direction: column;
  }

  .user-notes,
  .staff-education {
    width: 100%;
  }

  .user-header {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center;
  }

  .user-image {
    margin-right: 0;
    margin-bottom: 15px;
  }

  .user-details-grid {
    grid-template-columns: 1fr;
  }

  /* Buttons size to their CONTENT on mobile, not one full-width row each.
     This blanket rule used to force width:100% on every button on every
     staff page, so two short actions ("Find User" / "Create New User")
     each claimed a whole row and the check-in screen burned most of a
     phone viewport on buttons. Natural width lets them share a line;
     flex-wrap in their containers still stacks them when they genuinely
     don't fit.

     min-height keeps the tap target comfortable now that width no longer
     guarantees it. A button that genuinely wants the full width opts in
     via .btn-block, and buttons with their own width rule outside this
     media query (e.g. .submit-btn on the login form) are unaffected. */
  button,
  .button {
    width: auto;
    max-width: 100%;
    min-height: 44px;
    justify-content: center;
  }

  .btn-block,
  button.btn-block,
  .submit-btn {
    width: 100%;
  }

  .modal-content {
    width: 95%;
    margin: 10% auto;
    padding: 15px;
  }

  input[type='text'],
  input[type='number'],
  input[type='date'],
  input[type='password'],
  input[type='email'],
  select,
  textarea {
    font-size: 16px;
  }

  .search-container {
    width: 100%;
  }

  #searchInput {
    font-size: 16px;
  }

  .logo {
    height: 80px;
    width: 120px;
  }

  .emergency-contacts-table th,
  .emergency-contacts-table td,
  .notes-table th,
  .notes-table td {
    padding: 8px;
    font-size: 13px;
  }

  .modal-footer {
    flex-direction: column;
  }

  .modal-footer button {
    width: 100%;
  }

  /* Stats cards responsive */
  .stats-overview {
    flex-direction: column;
    align-items: stretch;
  }

  .stat-card {
    min-width: unset;
    width: 100%;
  }

  .toggle-details-btn {
    margin-left: 0;
    justify-content: center;
  }

  .location-breakdown-cards {
    flex-direction: column;
  }

  .location-mini-card {
    width: 100%;
    min-width: unset;
  }

  .detailed-breakdown {
    grid-template-columns: 1fr;
  }

  #checkedInSummary table {
    width: 100%;
  }

  .checklist-buttons {
    flex-direction: column;
    align-items: center;
  }

  .checklist-btn {
    width: 90%;
    max-width: 300px;
  }
}

/* Tablet responsiveness */
@media (max-width: 1024px) and (min-width: 769px) {
  .container {
    max-width: 90%;
  }

  .user-details-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ===================================
   ENHANCED MOBILE RESPONSIVENESS
   Fixes horizontal overflow and improves mobile usability
   =================================== */

/* Prevent horizontal overflow globally */
html,
body {
  overflow-x: hidden;
  max-width: 100vw;
}

/* Responsive table wrapper - ensures tables scroll horizontally within container */
.table-responsive {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: var(--spacing-md);
}

/* Small phone breakpoint (480px and below) */
@media (max-width: 480px) {
  body {
    padding: 8px;
    padding-top: 65px;
  }

  .container {
    padding: 10px;
    border-radius: var(--radius-md);
  }

  h1 {
    font-size: 1.25rem;
    word-wrap: break-word;
  }

  h2 {
    font-size: 1.1rem;
  }

  h3 {
    font-size: 1rem;
  }

  /* Compact buttons on very small screens */
  button,
  .button {
    padding: 10px 16px;
    font-size: 13px;
  }

  /* Reduce modal padding */
  .modal-content {
    padding: 12px;
    margin: 5% auto;
    width: 98%;
  }

  /* Compact user entry cards */
  .user-entry {
    min-height: 200px;
    padding: 12px;
  }

  .user-entry .user-image {
    width: 80px;
    height: 80px;
  }

  /* Smaller stat cards */
  .stat-card {
    padding: var(--spacing-md);
  }

  /* Compact form inputs */
  input[type='text'],
  input[type='number'],
  input[type='date'],
  input[type='password'],
  input[type='email'],
  select,
  textarea {
    padding: 10px;
  }

  /* Stack filter popups */
  .filter-popup {
    min-width: 90vw;
    left: 50%;
    transform: translateX(-50%);
  }

  /* Compact emergency contacts on very small screens */
  .emergency-contacts-table th,
  .emergency-contacts-table td {
    padding: 6px 8px;
    font-size: 12px;
  }

  /* User grid single column on very small screens */
  .user-grid {
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
  }

  /* Home nav grid */
  .home-nav-grid {
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
  }

  .home-nav-grid .button {
    min-height: 60px;
    padding: var(--spacing-md);
  }
}

/* Medium phone breakpoint - additional tweaks for 481-768px */
@media (max-width: 768px) {
  /* Force horizontal scroll containment */
  .container {
    max-width: 100%;
    overflow-x: hidden;
  }

  /* Prevent data tables from overflowing */
  .table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }

  /* Responsive notes table */
  .notes-table {
    table-layout: auto;
  }

  .notes-table th,
  .notes-table td {
    min-width: 100px;
    width: auto;
  }

  /* Census table mobile improvements */
  .census-table {
    font-size: 12px;
  }

  .census-table th,
  .census-table td {
    padding: 6px 8px;
  }

  /* Hide less important columns on mobile */
  .census-table th:nth-child(4),
  .census-table td:nth-child(4) {
    display: none; /* Hide Grade column on mobile */
  }

  .census-table .user-name-cell img {
    width: 32px;
    height: 32px;
  }

  .census-table .user-name-cell .name-text {
    font-size: 13px;
  }

  /* User entry cards - 2 per row on larger phones */
  .user-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Checklist items stack better */
  .checklist-info {
    flex-direction: column;
    gap: 10px;
  }

  /* Location selector full width */
  .location-selector select {
    width: 100%;
    max-width: 100%;
  }

  /* File upload actions stay on ONE line. They used to stack into a column,
     which spent two full rows on two short buttons; they fit side by side at
     320px. The chosen-file name is the only part that needs its own line, so
     it is the only thing that wraps. */
  .file-upload-wrapper {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-sm);
  }

  .file-upload-wrapper .selected-file-name {
    flex-basis: 100%;
  }

  /* Emergency contacts / Education — see .form-cards-on-mobile in
     components.css for the shared card. These are the per-table
     overrides: which short fields pair up two-per-row.

     Emergency contacts needs EXPLICIT grid areas because its DOM order is
     Name, Phone, Email, Relationship — auto-flow would drop Relationship
     below Email instead of beside Phone:

         [ Name .......................... ] [trash]
         [ Phone ........ ] [ Relationship ]
         [ Email ......................... ]

     Email stays full width: addresses are long and half a phone is not
     enough to read one. */
  #emergencyContactsTable td:nth-child(1) {
    grid-area: 1 / 1 / 2 / -1;
  }

  #emergencyContactsTable td:nth-child(2) {
    grid-area: 2 / 1 / 3 / 2;
  }

  #emergencyContactsTable td:nth-child(4) {
    grid-area: 2 / 2 / 3 / 3;
  }

  #emergencyContactsTable td:nth-child(3) {
    grid-area: 3 / 1 / 4 / -1;
  }

  /* "Specify relationship" appears under its select when Other is picked. */
  #emergencyContactsTable .emergencyContactOtherRelationship {
    margin-top: 8px;
  }

  /* Education: College leads the card, then the four short fields pair off
     in DOM order — [Degree | Major], [Minor | Grad Year]. No explicit areas
     needed, so auto-flow does the work. */
  #staffEduTable td:nth-child(2),
  #staffEduTable td:nth-child(3),
  #staffEduTable td:nth-child(4),
  #staffEduTable td:nth-child(5) {
    grid-column: span 1;
  }

  /* table-layout:fixed is a desktop measure; under the card layout it fights
     the grid. */
  #staffEduTable {
    table-layout: auto;
  }

  /* checkin.html carries its own `#staffEduTable td { padding: 4px 6px 4px 0 }`
     in a page <style> block, and ONE id outranks any number of classes — so
     the shared card rules lost both the reset and the room reserved for the
     pinned Edit/Delete pair, and those two buttons landed on top of the
     College input. Re-stated here at id+class specificity. */
  #staffEduTable.form-cards-on-mobile td {
    padding: 0;
  }

  #staffEduTable.form-cards-on-mobile td:first-child {
    padding-right: 124px;
  }

  /* User header improvements */
  .user-header-buttons {
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
  }

  .user-header-buttons button {
    flex: 1;
    min-width: 100px;
  }
}

/* Tablet and small laptop - intermediate breakpoint */
@media (max-width: 900px) and (min-width: 481px) {
  .user-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .contacts-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ===================================
   GLOBAL MOBILE TABLE CARD LAYOUT
   Tables convert to card layout on mobile for better readability
   =================================== */

@media (max-width: 768px) {
  /* Generic table to card conversion */
  .notes-table,
  .staff-edu-table {
    display: block;
  }

  .notes-table thead,
  .staff-edu-table thead {
    display: none;
  }

  .notes-table tbody,
  .staff-edu-table tbody {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .notes-table tr,
  .staff-edu-table tr {
    display: flex;
    flex-direction: column;
    background: var(--card-background);
    border-radius: var(--radius-md);
    padding: 12px;
    border-left: 3px solid var(--primary-color);
    margin-bottom: 0;
  }

  .notes-table td,
  .staff-edu-table td {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    width: 100%;
    min-width: 0;
  }

  .notes-table td:last-child,
  .staff-edu-table td:last-child {
    border-bottom: none;
  }

  .notes-table td::before,
  .staff-edu-table td::before {
    content: attr(data-label);
    font-weight: 600;
    color: var(--primary-color);
    font-size: 11px;
    text-transform: uppercase;
    flex-shrink: 0;
    margin-right: 10px;
  }

  /* Modal improvements */
  .modal-content {
    max-height: 94vh;
    overflow-y: auto;
  }
}

/* ===================================
   NAVBAR SPACING FIX
   Ensure content doesn't get hidden behind fixed navbar
   =================================== */

@media (max-width: 768px) {
  body {
    padding-top: 75px;
  }
}

@media (max-width: 480px) {
  body {
    padding-top: 70px;
  }
}

/* ===================================
   MAINTENANCE CHECKLIST MOBILE FIXES
   =================================== */

/* Add top margin to containers on pages with page-toggle-button (maintenance pages) */
body.has-page-toggle .container {
  margin-top: 70px;
}

@media (max-width: 768px) {
  body.has-page-toggle .container {
    margin-top: 60px;
  }
}

/* Checklist modal mobile improvements */
@media (max-width: 768px) {
  /* Make checklist modal fit better on mobile */
  #checklist-modal .modal-content {
    margin: 0;
    width: 100%;
    max-width: 100%;
    height: 100vh;
    max-height: 100vh;
    border-radius: 0;
    padding: 15px;
    padding-top: 50px;
    box-sizing: border-box;
  }

  /* Position close button better on full-screen modal */
  #checklist-modal .close {
    position: fixed;
    top: 10px;
    right: 15px;
    font-size: 32px;
    z-index: 1001;
    background: var(--card-background);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
  }

  /* Ensure modal title is visible */
  #checklist-modal #modal-title {
    font-size: 1.2rem;
    margin-top: 0;
    padding-right: 40px;
  }

  /* Compact checklist items on mobile */
  .checklist-item {
    padding: 8px;
    margin-bottom: 8px;
  }

  .checklist-item label {
    font-size: 14px;
    line-height: 1.4;
  }

  /* Modal footer buttons on mobile */
  #checklist-modal .modal-footer {
    position: sticky;
    bottom: 0;
    background: white;
    padding: 10px 0;
    margin: 0 -15px;
    padding-left: 15px;
    padding-right: 15px;
    border-top: 1px solid var(--border-color);
    z-index: 10;
    flex-wrap: wrap;
    gap: 8px;
  }

  #checklist-modal .modal-footer button {
    flex: 1;
    min-width: calc(50% - 4px);
    padding: 10px 8px;
    font-size: 13px;
  }

  /* Stack buttons on very narrow screens */
  @media (max-width: 360px) {
    #checklist-modal .modal-footer button {
      min-width: 100%;
    }
  }
}

/* Fix status badge wrapping - prevent "In Progress" from wrapping */
.pending-badge,
.status-badge {
  white-space: nowrap;
  flex-shrink: 0;
}

/* Completed checklist header on mobile */
@media (max-width: 768px) {
  .completed-checklist .checklist-header {
    flex-direction: column;
    gap: 10px;
    align-items: flex-start !important;
  }

  .completed-checklist .checklist-header h3 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
  }

  .completed-checklist .edit-btn {
    width: 100%;
    justify-content: center;
  }

  .checklist-info {
    flex-direction: column;
    gap: 5px;
  }
}

/* Location tabs mobile improvements */
@media (max-width: 768px) {
  .location-tabs {
    gap: 5px;
    margin-bottom: 20px;
  }

  .location-tab {
    padding: 10px 15px;
    font-size: 14px;
  }

  .location-tab i {
    display: none; /* Hide icons on mobile to save space */
  }
}

/* ===================================
   CENSUS PAGE MOBILE FIXES
   =================================== */

@media (max-width: 768px) {
  /* Location stats - horizontal scrolling instead of vertical stacking */
  .location-breakdown-cards {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 8px;
    margin: var(--spacing-sm) -10px;
    padding-left: 10px;
    padding-right: 10px;
    gap: 10px;
  }

  .location-mini-card {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 100px !important;
    max-width: 140px;
  }

  .location-mini-icon {
    width: 28px;
    height: 28px;
    font-size: 1em;
  }

  .location-mini-value {
    font-size: 1.2em;
  }

  .location-mini-label {
    font-size: 0.7em;
  }

  /* Stats overview - keep total card compact */
  .stats-overview {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 10px;
    align-items: center;
  }

  .stat-card {
    flex: 0 0 auto;
    width: auto;
    min-width: unset;
    padding: 10px 15px;
  }

  .stat-card-primary {
    flex: 1 1 auto;
    max-width: 180px;
  }

  .stat-icon {
    width: 36px;
    height: 36px;
    font-size: 1.4em;
  }

  .stat-value {
    font-size: 1.5em;
  }

  .stat-label {
    font-size: 0.75em;
  }

  .toggle-details-btn {
    padding: 8px 12px;
    font-size: 0.8em;
    margin-left: 0;
    flex: 0 0 auto;
  }

  /* User grid - single column on mobile */
  .user-grid {
    grid-template-columns: 1fr !important;
    gap: 12px;
    padding: 0;
  }

  /* User entry cards - compact and single column */
  .user-entry {
    min-height: auto;
    padding: 15px;
    flex-direction: row;
    align-items: flex-start;
    gap: 15px;
  }

  .user-entry .user-image {
    width: 70px;
    height: 70px;
    margin-bottom: 0;
    flex-shrink: 0;
  }

  .user-entry .user-info {
    flex: 1;
    min-width: 0;
  }

  .user-entry h3 {
    font-size: 1em;
    margin-bottom: 5px;
  }

  .user-entry .user-icons {
    margin-bottom: 8px;
  }

  .user-entry .user-icons i {
    font-size: 0.9em;
  }

  .user-entry p {
    font-size: 0.85em;
    margin: 3px 0;
  }

  /* Census table mobile - convert to card layout */
  .census-table-wrapper {
    overflow-x: visible;
  }

  .census-table {
    display: block;
    font-size: 14px;
  }

  .census-table thead {
    display: none;
  }

  .census-table tbody {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .census-table tbody tr {
    display: flex;
    flex-wrap: wrap;
    background: var(--surface);
    border-radius: var(--radius-md);
    padding: 12px;
    border: 1px solid var(--border-color-soft);
    align-items: center;
    gap: 8px;
    color: var(--text-color);
  }

  .census-table tbody tr:hover {
    background: var(--hover-bg);
  }

  /* Name cell - full width at top */
  .census-table td:nth-child(1) {
    width: 100%;
    order: 1;
    padding: 0;
    margin-bottom: 8px;
  }

  .census-table .user-name-cell {
    gap: 10px;
  }

  .census-table .user-name-cell img {
    width: 45px;
    height: 45px;
  }

  .census-table .user-name-cell .name-text {
    font-size: 15px;
    font-weight: 600;
    /* Was #222 — the MEMBER'S NAME, near-black on the dark card at about
       1.3:1, i.e. invisible. This is the phone-width half of the census
       dark-mode report: the fix on 2026-08-09 corrected the Location /
       "Checked In" cells and `.user-entry h3`, and census.html tokenizes
       this same selector — but only inside its `min-width: 769px` block, so
       the desktop table was fine and the phone table still painted #222.
       Only looking at the rendered page catches this; a token audit cannot
       see a literal, and the name measured fine on the surface it was NOT
       being drawn on. */
    color: var(--text-color);
  }

  /* Icons cell */
  .census-table td:nth-child(2) {
    order: 2;
    flex: 1;
    padding: 0;
    width: auto;
  }

  .census-table .icons-cell {
    justify-content: flex-start;
  }

  /* Status cell */
  .census-table td:nth-child(3) {
    order: 3;
    padding: 0;
    width: auto;
  }

  /* Grade cell - hidden on mobile already */
  .census-table td:nth-child(4) {
    display: none;
  }

  /* Location cell */
  .census-table td:nth-child(5) {
    order: 4;
    width: 100%;
    padding: 8px 0 0 0;
    /* #eee/#555 here were sized for a white card: on a dark theme the rule
       became a bright scar and the text dropped to 2.11:1 — the reported
       "names invisible in dark mode, fine in light". */
    border-top: 1px solid var(--hairline);
    margin-top: 4px;
    font-size: 0.85em;
    color: var(--text-secondary);
  }

  .census-table td:nth-child(5)::before {
    content: 'Location: ';
    font-weight: 600;
    color: var(--primary-color);
  }

  /* Checked in time cell */
  .census-table td:nth-child(6) {
    order: 5;
    width: 100%;
    padding: 4px 0 0 0;
    font-size: 0.85em;
    color: var(--text-secondary);
  }

  .census-table td:nth-child(6)::before {
    content: 'Checked In: ';
    font-weight: 600;
    color: var(--primary-color);
  }
}

/* Very small screens - further compact */
@media (max-width: 400px) {
  .location-mini-card {
    min-width: 85px !important;
    padding: 8px 10px;
  }

  .location-mini-icon {
    width: 24px;
    height: 24px;
    font-size: 0.9em;
  }

  .location-mini-value {
    font-size: 1.1em;
  }

  .stat-card-primary {
    max-width: 150px;
  }

  .user-entry .user-image {
    width: 55px;
    height: 55px;
  }

  .census-table .user-name-cell img {
    width: 40px;
    height: 40px;
  }
}

/* Visit History table fills the user-lookup modal width (the width:100%
   rule otherwise only existed inside @media print). */
#userLookupModal .data-table {
  width: 100%;
}

/* ===================================
   MOBILE MODAL IMPROVEMENTS
   =================================== */

@media (max-width: 768px) {
  /* General modal improvements - simple scrollable modal */
  .modal-content {
    width: 95% !important;
    max-width: 100% !important;
    margin: 2% auto !important;
    padding: 15px !important;
    border-radius: 12px !important;
    max-height: 94vh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box;
    position: relative;
  }

  /* Prevent horizontal scroll on user card in modals */
  .user-card {
    overflow-x: hidden !important;
    max-width: 100% !important;
  }

  /* Fix search input + button rows - prevent button from expanding */
  #lookupOasesBtn,
  #oasesLookupModal button[onclick='searchOases()'] {
    width: auto !important;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
  }

  /* Close button positioning - absolute in top right */
  .modal .close {
    position: absolute;
    top: 10px;
    right: 15px;
    z-index: 10;
    font-size: 28px;
  }

  /* User profile modal (#userModal) */
  #userModal .modal-content {
    padding-top: 40px !important;
  }

  #userFullProfile {
    padding-bottom: 20px;
  }

  /* User header in modal - stack on mobile */
  .user-header {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center;
    gap: 15px !important;
  }

  .user-header-left {
    align-items: center;
  }

  .user-header-info {
    text-align: center;
  }

  .user-header-info h2 {
    font-size: 1.3rem;
  }

  .user-header-buttons {
    width: 100%;
    flex-direction: row !important;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
  }

  .user-header-buttons button {
    flex: 1 1 auto;
    min-width: 90px;
    max-width: 120px;
    padding: 8px 10px;
    font-size: 12px;
  }

  /* User details grid - single column */
  .user-details-grid {
    grid-template-columns: 1fr !important;
    gap: 10px;
  }

  /* User image smaller on mobile */
  .user-image {
    width: 100px;
    height: 100px;
  }

  /* User icons row */
  .user-info-icons {
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
  }

  /* Collapsible sections in modal */
  .collapsible-section {
    margin-bottom: 10px;
  }

  .collapsible-header {
    padding: 12px;
    font-size: 14px;
  }

  .collapsible-content {
    padding: 10px;
  }

  /* Emergency contacts - card layout on mobile */
  .emergency-contacts-table {
    display: block !important;
    width: 100%;
  }

  /* A SECOND dead copy of the emergency-contacts card layout lived here — same
     `.emergency-contacts-table` class that no page has ever set (the real table
     is #emergencyContactsTable), and the same one-labelled-row-per-field shape
     the form does not have room for. Removed; the live layout is
     .form-cards-on-mobile in components.css. It also hardcoded #f5f5f5/#ddd/#eee,
     so had it ever applied it would have been a white card in every dark theme. */

  /* Lounge Update Modal */
  #loungeUpdateModal .modal-content {
    padding: 20px 15px !important;
    padding-top: 45px !important;
  }

  #loungeUpdateModal h2 {
    font-size: 1.2rem;
    margin-bottom: 15px;
  }

  #loungeUpdateForm .form-group {
    margin-bottom: 12px;
  }

  #loungeUpdateForm label {
    font-size: 13px;
    margin-bottom: 4px;
  }

  #loungeUpdateForm input,
  #loungeUpdateForm textarea {
    padding: 12px;
    font-size: 16px;
  }

  #loungeUpdateForm textarea {
    min-height: 80px;
  }

  /* User Lookup Modal (User History) - single scrollbar on modal-content */
  #userLookupModal .modal-content {
    width: 95% !important;
    max-width: 100% !important;
    max-height: 94vh !important;
    padding: 15px !important;
    padding-top: 50px !important;
    overflow-y: auto !important;
  }

  /* Remove internal scrollbars - let modal-content scroll */
  #userLookupModal #userStatsContent {
    max-height: none !important;
    overflow: visible !important;
  }

  /* User lookup close button */
  #userLookupModal .close {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 24px;
    z-index: 10;
  }

  /* User lookup header */
  #userLookupModal .modal-header {
    padding: 12px !important;
    margin: -50px -15px 15px -15px;
    border-radius: 12px 12px 0 0;
  }

  #userLookupModal .modal-header h3 {
    font-size: 16px !important;
  }

  #userLookupModal .modal-header img {
    width: 50px !important;
    height: 50px !important;
  }

  /* Stats grid in user lookup - single column */
  #userLookupModal div[style*='grid-template-columns'] {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  /* Stat cards in user lookup */
  #userLookupModal div[style*='padding: 20px'] {
    padding: 12px !important;
  }

  #userLookupModal div[style*='font-size: 28px'],
  #userLookupModal div[style*='font-size: 24px'] {
    font-size: 20px !important;
  }

  /* Heatmap - horizontal scroll wrapper only */
  #userHeatmapChart {
    min-height: 200px !important;
    width: 100% !important;
  }

  /* Table in user lookup modal */
  #userLookupModal .data-table {
    font-size: 12px;
  }

  #userLookupModal .data-table th,
  #userLookupModal .data-table td {
    padding: 8px 6px;
  }

  /* Lounge notes list */
  #loungeNotesList > div {
    padding: 10px !important;
    margin-bottom: 8px;
    font-size: 13px;
  }

  /* Section headers */
  #userLookupModal h4 {
    font-size: 14px !important;
    margin: 15px 0 10px 0 !important;
  }

  /* Export/Print buttons */
  #userLookupModal button {
    padding: 10px 15px;
    font-size: 13px;
  }
}

/* Very small screens - further modal compaction */
@media (max-width: 400px) {
  .modal-content {
    padding: 12px !important;
    margin: 1% auto !important;
    max-height: 96vh !important;
  }

  .modal .close {
    top: 8px;
    right: 12px;
    font-size: 24px;
  }

  .user-header-buttons button {
    min-width: 80px;
    font-size: 11px;
    padding: 6px 8px;
  }

  .user-image {
    width: 80px;
    height: 80px;
  }

  #userLookupModal .modal-header img {
    width: 40px !important;
    height: 40px !important;
  }

  #userLookupModal .modal-header h3 {
    font-size: 14px !important;
  }

  .emergency-contacts-table td {
    font-size: 13px !important;
  }
}

/* ===================================
   CENSUS PAGE - MOBILE VIEW FIXES
   Hide view toggle, force list view, long-press tooltips
   =================================== */

@media (max-width: 768px) {
  /* Hide view toggle on mobile */
  .view-toggle-container {
    display: none !important;
  }

  /* Force list/table view styles on mobile for white card appearance */
  .user-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px;
  }

  /* Icon tooltip - show on long-press (class added via JS) */
  .icon-tooltip.tooltip-active .tooltiptext {
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  /* Make tooltips more mobile-friendly */
  .icon-tooltip .tooltiptext {
    font-size: 12px;
    padding: 6px 10px;
    max-width: 200px;
    white-space: normal;
    text-align: left;
  }

  /* Emergency contacts tooltip - smaller on mobile */
  .icon-tooltip .emergency-contacts-tooltip {
    min-width: min(250px, calc(100vw - 24px)) !important;
    max-width: min(280px, calc(100vw - 24px)) !important;
    left: auto !important;
    right: 0 !important;
    transform: none !important;
  }

  .icon-tooltip .emergency-contacts-tooltip::after {
    left: auto !important;
    right: 15px !important;
  }

  /* Approved subjects tooltip */
  .icon-tooltip .approved-subjects-tooltip {
    min-width: 150px !important;
    max-width: 200px !important;
  }
}

/* ── Toggle switch ───────────────────────────────────────────────────────
   An on/off affordance for settings that turn a behavior on or off, as
   opposed to a checkbox (which reads as "select this item").

   Lives in app.css rather than components.css on purpose: `.form-group label`
   below sets `display: block`, and with components.css loading FIRST a plain
   `.toggle-switch` rule loses that tie and the whole control collapses. The
   selectors here are specific enough to win, and app.css loads last.

   Green = on, red = off, with an "On"/"Off" word beside it — colour alone is
   not an indicator for anyone with a red/green colour deficiency. */
label.toggle-switch {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: auto;
  margin-bottom: 0;
  cursor: pointer;
  user-select: none;
}

.toggle-switch input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  margin: 0;
}

.toggle-switch .toggle-track {
  /* MUST be block: a <span> is inline by default, and width/height are
     ignored on inline boxes — which is what squashed this control to a
     sliver overlapping the label text. */
  display: block;
  position: relative;
  flex: 0 0 auto;
  width: 44px;
  height: 24px;
  border-radius: 999px;
  background: var(--danger-color, #dc2626);
  transition:
    background-color 150ms ease-out,
    box-shadow 150ms ease-out;
}

.toggle-switch .toggle-track::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
  transition: transform 150ms ease-out;
}

.toggle-switch input:checked + .toggle-track {
  background: var(--success-color, #16a34a);
}

.toggle-switch input:checked + .toggle-track::after {
  transform: translateX(20px);
}

.toggle-switch input:focus-visible + .toggle-track {
  box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.4);
}

.toggle-switch .toggle-label {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-color);
}

/* State word, driven off the checkbox so it can never disagree with the
   track. Sits after the input in the DOM, hence the sibling combinator. */
.toggle-switch .toggle-state {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.toggle-switch .toggle-state::after {
  content: 'Off';
  color: var(--danger-color, #dc2626);
}

.toggle-switch input:checked ~ .toggle-state::after {
  content: 'On';
  color: var(--success-color, #16a34a);
}

/* Reduce Motion: collapse decorative animation/transitions to near-instant
   for users who ask for it. Opacity fades survive (they're not motion). */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}