/* ===================================
   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(280px, 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='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);
  background: white;
  color: #333;
}

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(--primary-color);
  box-shadow: 0 0 0 3px rgba(221, 114, 0, 0.1);
}

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

input[readonly] {
  background-color: #f5f5f5;
  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);
  color: var(--modal-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);
}

@media (max-width: 768px) {
  .form-field-group,
  .form-field-group-3 {
    grid-template-columns: 1fr;
  }
}

/* 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(200px, 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: #aaa;
  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: #f5f5f5;
  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;
}

/* 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;
  border: 1px solid rgba(255, 255, 255, 0.08);
  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;
  background: rgba(221, 114, 0, 0.1);
  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;
  color: rgba(255, 255, 255, 0.7);
  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(250px, 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 */

.census-table thead {
  background: var(--primary-color);
  color: white;
}

.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 {
  background: #f5f5f5;
  border: 1px solid #ddd;
  border-radius: var(--radius-md);
  padding: 8px 12px;
  cursor: pointer;
  color: #333;
  font-size: 14px;
  transition: all var(--transition-fast);
  display: flex;
  align-items: center;
  gap: 6px;
}

.view-toggle-btn:hover {
  background: var(--hover-bg);
  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: #666;
}

.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: #666;
  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: #666;
}

.input-error {
  border-color: var(--error-color) !important;
  background-color: #fff8f8;
}

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

.help-text {
  color: #666;
  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;
  }

  button,
  .button {
    width: 100%;
    margin: 5px 0;
    justify-content: center;
  }

  .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%;
  }

  /* Better file upload wrapper on mobile */
  .file-upload-wrapper {
    flex-direction: column;
    align-items: flex-start;
  }

  /* Emergency contacts - card layout on mobile */
  .emergency-contacts-table thead {
    display: none;
  }

  .emergency-contacts-table,
  .emergency-contacts-table tbody,
  .emergency-contacts-table tr {
    display: block;
    width: 100%;
  }

  .emergency-contacts-table tr {
    margin-bottom: 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 10px;
    background: rgba(255, 255, 255, 0.02);
  }

  .emergency-contacts-table td {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }

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

  .emergency-contacts-table td::before {
    content: attr(data-label);
    font-weight: 600;
    color: var(--primary-color);
    flex-shrink: 0;
    margin-right: 10px;
  }

  /* 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;
    color: #222;
  }

  /* 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;
    border-top: 1px solid #eee;
    margin-top: 4px;
    font-size: 0.85em;
    color: #555;
  }

  .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: #555;
  }

  .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%;
  }

  .emergency-contacts-table thead {
    display: none !important;
  }

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

  .emergency-contacts-table tr {
    display: flex !important;
    flex-direction: column !important;
    background: #f5f5f5;
    border-radius: 8px;
    padding: 12px;
    border: 1px solid #ddd;
  }

  .emergency-contacts-table td {
    display: flex !important;
    justify-content: space-between;
    padding: 6px 0 !important;
    border: none !important;
    border-bottom: 1px solid #eee;
    font-size: 14px !important;
  }

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

  .emergency-contacts-table td::before {
    content: attr(data-label);
    font-weight: 600;
    color: var(--primary-color);
    margin-right: 10px;
  }

  /* 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;
  }
}