/* PhotoKiosk Mobile-Optimized Styles */
/* Enhances existing functionality with mobile-first card-based design */
/* Updated: Navigation buttons made less rounded - v1.1 */

/* Tabler Icons Customization */
.ti {
  margin-right: 8px;
  vertical-align: middle;
}

/* Icon size variants */
.ti-sm {
  font-size: 14px;
  margin-right: 6px;
}

.ti-lg {
  font-size: 20px;
}

.ti-xl {
  font-size: 24px;
}

/* Search icon positioning */
.search-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.search-icon {
  position: absolute;
  left: 16px;
  z-index: 1;
  color: #6c757d;
  pointer-events: none;
  margin-right: 0;
}

/* Reset and Mobile-First Base */
* {
  box-sizing: border-box;
}

html {
  height: 100%;
  /* iOS Safari address bar handling */
  height: -webkit-fill-available;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  margin: 0;
  padding: 0;
  background-color: #f8f9fa;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  /* Full height including address bar area */
  min-height: 100vh;
  min-height: -webkit-fill-available;
  /* Prevent scrolling on iOS */
  position: relative;
  overflow-x: hidden;
}

/* Mobile Container */
.mobile-wrapper {
  max-width: 100%;
  background-color: #f8f9fa;
  min-height: 100vh;
  /* Use CSS custom property for dynamic viewport height */
  min-height: calc(var(--vh, 1vh) * 100);
}

/* Mobile Header */
.mobile-header {
  background-color: #fff;
  border-bottom: 1px solid #e9ecef;
  padding: 16px;
  /* Safe area insets for notched devices */
  padding-top: max(16px, env(safe-area-inset-top));
  padding-left: max(16px, env(safe-area-inset-left));
  padding-right: max(16px, env(safe-area-inset-right));
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.mobile-header h1 {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: #333;
}

.mobile-header .subtitle {
  margin: 0;
  font-size: 14px;
  color: #6c757d;
  margin-top: 4px;
}

/* Mobile Navigation */
.mobile-nav {
  background-color: #fff;
  border-bottom: 1px solid #e9ecef;
  padding: 12px 16px;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  white-space: nowrap;
}

.mobile-nav a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background-color: #e9ecef;
  color: #495057;
  text-decoration: none;
  border-radius: 5px;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s;
  flex-shrink: 0;
}

.mobile-nav a:hover, .mobile-nav a.active {
  background-color: #007bff;
  color: white;
}

/* Mobile Search */
.mobile-search {
  padding: 16px;
  background-color: #fff;
  border-bottom: 1px solid #e9ecef;
}

.search-wrapper {
  position: relative;
}

.search-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: #6c757d;
  z-index: 2;
  pointer-events: none;
}

.mobile-search input {
  width: 100%;
  padding: 12px 16px 12px 48px;
  border: 1px solid #ced4da;
  border-radius: 25px;
  font-size: 16px;
  background-color: #f8f9fa;
}

.mobile-search input:focus {
  outline: none;
  border-color: #007bff;
  background-color: #fff;
}

/* Card Layout */
.mobile-content {
  padding: 16px;
}

.card-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.student-card {
  background: white;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  border: 1px solid #e9ecef;
  transition: all 0.2s;
}

.student-card:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
  transform: translateY(-1px);
}

.student-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.student-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: #e9ecef;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: bold;
  color: #6c757d;
  flex-shrink: 0;
}

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

.student-name {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  margin: 0;
  line-height: 1.2;
}

.student-details {
  font-size: 14px;
  color: #6c757d;
  margin: 2px 0 0 0;
}

.student-ids {
  font-size: 12px;
  color: #adb5bd;
  margin: 4px 0 0 0;
}

/* Action Buttons */
.student-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

/* Emergency Card Styling */
.emergency-card {
  transition: all 0.2s;
  user-select: none;
  -webkit-tap-highlight-color: rgba(0,0,0,0.1);
  border-left: 4px solid transparent;
}

.emergency-card .student-card-header {
  margin-bottom: 0;
}

.emergency-card:hover {
  box-shadow: 0 6px 20px rgba(0,0,0,0.15);
  transform: translateY(-2px);
  border-color: #007bff;
  border-left-color: #28a745;
}

.emergency-card:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  background-color: #f8f9fa;
  border-left-color: #28a745;
}


.btn-mobile {
  flex: 1;
  padding: 12px;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  text-align: center;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.btn-primary-mobile {
  background-color: #007bff;
  color: white;
}

.btn-primary-mobile:hover {
  background-color: #0056b3;
}

.btn-secondary-mobile {
  background-color: #6c757d;
  color: white;
}

.btn-secondary-mobile:hover {
  background-color: #545b62;
}

.btn-outline-mobile {
  background-color: transparent;
  color: #007bff;
  border: 1px solid #007bff;
}

.btn-outline-mobile:hover {
  background-color: #007bff;
  color: white;
}

/* Emergency Contact Modal - Mobile Optimized */
.mobile-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.5);
  z-index: 1000;
  display: none;
  opacity: 0;
  transition: all 0.3s;
}

/* Photo modal needs higher z-index to show above emergency contacts modal */
#photoModal {
  z-index: 9999 !important;
  background-color: rgba(0,0,0,0.8) !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

.mobile-modal.active {
  display: block;
  opacity: 1;
}

.mobile-modal-content {
  position: fixed;
  top: 10vh;
  left: 5vw;
  width: 90vw;
  height: 80vh;
  background: white;
  border-radius: 20px;
  transform: translateY(100%);
  transition: transform 0.3s;
}

/* Ensure modal respects container boundaries on desktop */
@media (min-width: 768px) {
  .mobile-modal-content {
    left: 50%;
    width: 600px; /* Conservative width that definitely fits in 768px container */
    max-width: calc(100vw - 60px); /* Ensure it doesn't exceed viewport with margins */
    transform: translateX(-50%) translateY(100%);
  }
  
  .mobile-modal.active .mobile-modal-content {
    transform: translateX(-50%) translateY(0);
  }
}

/* For larger screens, ensure modals don't get too wide */
@media (min-width: 1024px) {
  .mobile-modal-content {
    width: 550px !important;
  }
}

/* Specific fix for upload modal */
@media (min-width: 768px) {
  #photoUploadModal .mobile-modal-content {
    left: 50% !important;
    width: 400px !important;
    max-width: 400px !important;
    transform: translateX(-50%) translateY(100%) !important;
  }
  
  #photoUploadModal.mobile-modal.active .mobile-modal-content {
    transform: translateX(-50%) translateY(0) !important;
  }
}

@media (min-width: 1024px) {
  #photoUploadModal .mobile-modal-content {
    width: 450px !important;
    max-width: 450px !important;
  }
}

/* Default active state for mobile */
.mobile-modal.active .mobile-modal-content {
  transform: translateY(0);
}

.mobile-modal-header {
  padding: 20px 16px 16px;
  border-bottom: 1px solid #e9ecef;
  position: relative;
  height: 60px;
}

.mobile-modal-header h4 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  text-align: center;
}

.modal-header-actions {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
}

.modal-header-back {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
}

.modal-back-btn {
  background: transparent;
  border: 1px solid #6c757d;
  font-size: 16px;
  color: #6c757d;
  cursor: pointer;
  padding: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

.modal-back-btn:hover {
  background-color: #6c757d;
  color: white;
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(108, 117, 125, 0.3);
}

.modal-back-btn:active {
  background-color: #5a6268;
  border-color: #5a6268;
  color: white;
  transform: scale(0.95);
}

.modal-action-btn {
  background: transparent;
  border: 1px solid #007bff;
  font-size: 14px;
  color: #007bff;
  cursor: pointer;
  padding: 8px;
  border-radius: 20px;
  display: inline-block;
  text-align: center;
  line-height: 1;
  transition: all 0.2s ease;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  vertical-align: middle;
}

.modal-action-btn:hover {
  background-color: #007bff;
  color: white;
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0, 123, 255, 0.3);
}

.modal-action-btn:active {
  background-color: #0056b3;
  border-color: #0056b3;
  color: white;
  transform: scale(0.95);
}

/* Family view styles */
.nav-back-btn {
  background-color: #007bff;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: background-color 0.2s ease;
}

.nav-back-btn:hover {
  background-color: #0056b3;
}

.nav-back-btn:active {
  background-color: #004085;
  transform: scale(0.95);
}

.action-btn {
  background-color: #f8f9fa;
  border: 1px solid #dee2e6;
  color: #495057;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: all 0.2s ease;
  flex: 1;
}

.action-btn:hover {
  background-color: #e9ecef;
  border-color: #adb5bd;
}

.action-btn:active {
  background-color: #dee2e6;
  transform: scale(0.98);
}

/* Text Action Buttons */
.action-text-btn {
  background: transparent;
  color: #007bff;
  border: 1px solid #007bff;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 5px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

.action-text-btn i {
  font-size: 14px;
}

.action-text-btn:hover {
  background-color: #007bff;
  color: white;
  transform: translateY(-1px);
}

.action-text-btn:active {
  background-color: #0056b3;
  border-color: #0056b3;
  color: white;
  transform: scale(0.98);
}


.mobile-modal-close {
  position: static;
  background: none;
  border: none;
  font-size: 20px;
  color: #6c757d;
  cursor: pointer;
  padding: 8px;
  border-radius: 4px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  transition: all 0.2s ease;
}

.mobile-modal-close:hover {
  background-color: rgba(108, 117, 125, 0.1);
  color: #495057;
}

.mobile-modal-close:active {
  background-color: rgba(108, 117, 125, 0.2);
  transform: scale(0.95);
}

.mobile-modal-body {
  height: calc(80vh - 60px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 16px;
}

/* Contact Cards in Modal */
.contact-card {
  background: #f8f9fa;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 12px;
  border: 1px solid #e9ecef;
}

.contact-card.modal-student-card {
  border: 2px dotted #000000 !important;
}


.contact-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.contact-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #007bff;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 16px;
}

.contact-info h5 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

.contact-info p {
  margin: 2px 0 0 0;
  font-size: 14px;
  color: #6c757d;
}

.contact-methods {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Consolidated Contact Methods - Single Card */
.contact-method-consolidated {
  background: white;
  border-radius: 8px;
  border: 1px solid #dee2e6;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.contact-method-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 3px 0;
  border-bottom: 1px solid #f8f9fa;
}

.contact-method-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.contact-method-row:first-child {
  padding-top: 0;
}

.contact-label {
  font-size: 14px;
  color: #6c757d;
  font-weight: 500;
  flex-shrink: 0;
  min-width: 80px;
}

.contact-link {
  color: #007bff;
  text-decoration: none;
  font-weight: 600;
  font-size: 16px;
  flex: 1;
  text-align: right;
  padding: 4px 8px;
  border-radius: 4px;
  transition: all 0.2s;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 30ch;
}

.contact-link:hover {
  background-color: #f8f9fa;
  color: #0056b3;
  text-decoration: none;
}

.contact-link:active {
  background-color: #e9ecef;
  transform: scale(0.98);
}

/* Legacy contact method styles for backward compatibility */
.contact-method {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px;
  background: white;
  border-radius: 8px;
  border: 1px solid #dee2e6;
}

.contact-method-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.contact-method-info span:first-child {
  font-size: 16px;
}

.contact-method-details strong {
  font-weight: 600;
  color: #333;
}

.contact-method-details small {
  color: #6c757d;
  display: block;
}

.contact-actions {
  display: flex;
  gap: 6px;
}

.btn-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-call {
  background-color: #28a745;
  color: white;
}

.btn-call:hover {
  background-color: #1e7e34;
}

.btn-message {
  background-color: #17a2b8;
  color: white;
}

.btn-message:hover {
  background-color: #117a8b;
}

/* Loading States */
.loading {
  text-align: center;
  padding: 40px 16px;
  color: #6c757d;
}

.loading-spinner {
  border: 3px solid #f3f3f3;
  border-top: 3px solid #007bff;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  animation: spin 1s linear infinite;
  margin: 0 auto 16px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Stats Cards */
.stats-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 24px;
}

.stat-card {
  background: white;
  border-radius: 12px;
  padding: 16px;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  border: 1px solid #e9ecef;
}

.stat-number {
  font-size: 24px;
  font-weight: bold;
  color: #007bff;
  margin-bottom: 4px;
}

.stat-label {
  font-size: 14px;
  color: #6c757d;
}

/* Responsive Design */
@media (max-width: 576px) {
  .mobile-content {
    padding: 12px;
  }
  
  .student-card {
    padding: 12px;
  }
  
  .student-card-header {
    gap: 10px;
  }
  
  .student-avatar {
    width: 40px;
    height: 40px;
    font-size: 16px;
  }
  
  .student-name {
    font-size: 16px;
  }
}

@media (min-width: 768px) {
  .mobile-wrapper {
    max-width: 768px;
    margin: 0 auto;
    box-shadow: 0 0 20px rgba(0,0,0,0.1);
  }
  
  .card-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }
  
  .stats-container {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Utility Classes */
.text-center { text-align: center; }
.text-muted { color: #6c757d; }
.mb-3 { margin-bottom: 1rem; }
.mt-3 { margin-top: 1rem; }
.d-none { display: none; }
.d-block { display: block; }

/* Additional Contact Information */
.contact-info-additional {
  background: #f8f9fa;
  border-radius: 8px;
  border: 1px solid #e9ecef;
  padding: 8px;
  margin-top: 8px;
}

.contact-info-secondary {
  margin-top: -10px !important;
  border-top: 3px solid red !important;
}

.contact-info-grid {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.contact-info-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0;
}

.contact-info-label {
  font-size: 14px;
  color: #6c757d;
  font-weight: 500;
  flex-shrink: 0;
  min-width: 120px;
}

.contact-info-value {
  font-size: 14px;
  font-weight: 600;
  color: #333;
  text-align: right;
  flex: 1;
  overflow: hidden;
}

.contact-info-value .contact-link {
  color: #007bff;
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  text-align: right;
  padding: 0;
  border-radius: 4px;
  transition: all 0.2s;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 30ch;
  display: block;
  line-height: 1;
}

.contact-info-value .contact-link:hover {
  background-color: #f8f9fa;
  color: #0056b3;
  text-decoration: none;
}

.text-green-600 {
  color: #059669 !important;
}

.text-red-600 {
  color: #dc2626 !important;
}

/* Status Icons */
.status-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
}

.status-icon .ti {
  margin: 0;
  font-size: 20px;
}

.status-yes {
  color: #059669;
}

.status-no {
  color: #dc2626;
}

/* Photo Avatar Styles */
.avatar-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.contact-avatar.has-photo {
  position: relative;
  overflow: hidden;
}

.clickable-avatar {
  cursor: pointer;
  transition: all 0.2s;
}

.clickable-avatar:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.photo-indicator {
  position: absolute;
  bottom: -2px;
  right: -2px;
  background: rgba(0,0,0,0.7);
  color: white;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  opacity: 0.8;
}

.photo-indicator .ti {
  margin: 0;
}

/* Photo Modal Styles - Responsive for desktop containers */
#photoModal .mobile-modal-content {
  position: absolute !important;
  top: 5% !important;
  left: 2.5vw !important;
  width: 95vw !important;
  height: 90vh !important;
  max-height: 90vh !important;
  transform: none !important;
  z-index: 10000;
  background: white;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
}

/* Desktop responsive override */
@media (min-width: 768px) {
  #photoModal .mobile-modal-content {
    left: 50% !important;
    width: 600px !important;
    transform: translateX(-50%) !important;
  }
}

@media (min-width: 1024px) {
  #photoModal .mobile-modal-content {
    width: 500px !important;
  }
}


.photo-modal-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  text-align: center;
}

.enlarged-photo {
  max-width: 100%;
  max-height: 60vh;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.3);
  cursor: pointer;
  transition: transform 0.2s;
}

.enlarged-photo:hover {
  transform: scale(1.02);
}

.photo-info {
  margin-top: 20px;
  color: #333;
}

.photo-details h6 {
  margin: 0 0 8px 0;
  font-size: 18px;
  font-weight: 600;
  color: #333;
}

.photo-details p {
  margin: 4px 0;
  font-size: 14px;
  color: #6c757d;
}

.photo-hint {
  font-style: italic;
  color: #adb5bd !important;
  font-size: 12px !important;
  margin-top: 16px !important;
}

/* Focus States for Accessibility */
.btn-mobile:focus,
.mobile-search input:focus,
.mobile-nav a:focus {
  outline: 2px solid #007bff;
  outline-offset: 2px;
}

/* Modern CSS-Based Icons */
.icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: middle;
  margin-right: 0.25em;
  position: relative;
}

.icon::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* School/Education Icon */
.icon-school::before {
  background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' viewBox='0 0 24 24'%3E%3Cpath d='M12 3L1 9l4 2.18v6L12 21l7-3.82v-6l2-1.09V17h2V9L12 3zm6.82 6L12 12.72 5.18 9 12 5.28 18.82 9zM17 15.99l-5 2.73-5-2.73v-3.72L12 15l5-2.73v3.72z'/%3E%3C/svg%3E") no-repeat center;
  background-size: contain;
}

/* Students Icon */
.icon-students::before {
  background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' viewBox='0 0 24 24'%3E%3Cpath d='M16 4c0-1.11.89-2 2-2s2 .89 2 2-.89 2-2 2-2-.89-2-2zm4 18v-6h2.5l-2.54-7.63A2.003 2.003 0 0 0 18.04 7h-.08c-.8 0-1.54.37-2.01 1.01l-1.48 2-.47-.5A2.013 2.013 0 0 0 12.52 9H12c-.8 0-1.54.37-2.01 1.01L8.5 12H6v10h2v-4h4v4h2v-4h4v4h2zM12.5 11.5c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5S11 13.83 11 13s.67-1.5 1.5-1.5zm-6-5C7.33 6.5 8 5.83 8 5s-.67-1.5-1.5-1.5S5 4.17 5 5s.67 1.5 1.5 1.5zM7.5 22v-6H10l-.74-2.22A2.003 2.003 0 0 0 7.34 12H7.16c-.8 0-1.54.37-2.01 1.01L3.5 15.5H1V22h2v-4h2.5V22h2z'/%3E%3C/svg%3E") no-repeat center;
  background-size: contain;
}

/* Parents/Family Icon */
.icon-family::before {
  background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' viewBox='0 0 24 24'%3E%3Cpath d='M16 4c0-1.11.89-2 2-2s2 .89 2 2-.89 2-2 2-2-.89-2-2zM9 6c0-1.11.89-2 2-2s2 .89 2 2-.89 2-2 2-2-.89-2-2zM4 8c0-1.11.89-2 2-2s2 .89 2 2-.89 2-2 2-2-.89-2-2zm16.5 9.5c0 .83-.67 1.5-1.5 1.5h-2c-.83 0-1.5-.67-1.5-1.5v-3h5v3zM12.5 17.5c0 .83-.67 1.5-1.5 1.5H9c-.83 0-1.5-.67-1.5-1.5v-3h5v3zM4.5 17.5c0 .83-.67 1.5-1.5 1.5H1c-.83 0-1.5-.67-1.5-1.5v-3h5v3zM19 12h-4V9.5c0-.83-.67-1.5-1.5-1.5h-3C9.67 8 9 8.67 9 9.5V12H5v-1.5C5 9.67 4.33 9 3.5 9h-2C.67 9 0 9.67 0 10.5V12h24v-1.5c0-.83-.67-1.5-1.5-1.5h-2c-.83 0-1.5.67-1.5 1.5V12z'/%3E%3C/svg%3E") no-repeat center;
  background-size: contain;
}

/* Reports/Chart Icon */
.icon-reports::before {
  background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' viewBox='0 0 24 24'%3E%3Cpath d='M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zM9 17H7v-7h2v7zm4 0h-2V7h2v10zm4 0h-2v-4h2v4z'/%3E%3C/svg%3E") no-repeat center;
  background-size: contain;
}

/* Desktop/Monitor Icon */
.icon-desktop::before {
  background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' viewBox='0 0 24 24'%3E%3Cpath d='M21 2H3c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h7l-2 3v1h8v-1l-2-3h7c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 12H3V4h18v10z'/%3E%3C/svg%3E") no-repeat center;
  background-size: contain;
}

/* Search Icon */
.icon-search::before {
  background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' viewBox='0 0 24 24'%3E%3Cpath d='M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/%3E%3C/svg%3E") no-repeat center;
  background-size: contain;
}

/* Phone/Call Icon */
.icon-phone::before {
  background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' viewBox='0 0 24 24'%3E%3Cpath d='M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z'/%3E%3C/svg%3E") no-repeat center;
  background-size: contain;
}

/* Email Icon */
.icon-email::before {
  background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' viewBox='0 0 24 24'%3E%3Cpath d='M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z'/%3E%3C/svg%3E") no-repeat center;
  background-size: contain;
}

/* Mobile Phone Icon */
.icon-mobile::before {
  background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' viewBox='0 0 24 24'%3E%3Cpath d='M17 2H7c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h10c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H7V6h10v10z'/%3E%3C/svg%3E") no-repeat center;
  background-size: contain;
}

/* Home Icon */
.icon-home::before {
  background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' viewBox='0 0 24 24'%3E%3Cpath d='M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z'/%3E%3C/svg%3E") no-repeat center;
  background-size: contain;
}

/* Check/Yes Icon */
.icon-check::before {
  background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z'/%3E%3C/svg%3E") no-repeat center;
  background-size: contain;
}

/* Close/No/X Icon */
.icon-close::before {
  background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' viewBox='0 0 24 24'%3E%3Cpath d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/%3E%3C/svg%3E") no-repeat center;
  background-size: contain;
}

/* Legal/Justice Icon */
.icon-legal::before {
  background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' viewBox='0 0 24 24'%3E%3Cpath d='M11 2v20c-5.07-.5-9-4.79-9-10s3.93-9.5 9-10zm2.03.71c2.53.19 4.77 1.35 6.38 3.16l-4.9 4.9c-.84-.84-2.17-1.14-3.28-.83.04-2.44-.31-5.25 1.8-7.23zM14 12c0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2 2 .9 2 2zm5.47 7.5c-.84 1.61-2.21 2.86-3.97 3.52L18 20.5l2.47 2.5z'/%3E%3C/svg%3E") no-repeat center;
  background-size: contain;
}

/* Car/Pickup Icon */
.icon-car::before {
  background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' viewBox='0 0 24 24'%3E%3Cpath d='M18.92 6.01C18.72 5.42 18.16 5 17.5 5h-11c-.66 0-1.22.42-1.42 1.01L3 12v8c0 .55.45 1 1 1h1c.55 0 1-.45 1-1v-1h12v1c0 .55.45 1 1 1h1c.55 0 1-.45 1-1v-8l-2.08-5.99zM6.5 16c-.83 0-1.5-.67-1.5-1.5S5.67 13 6.5 13s1.5.67 1.5 1.5S7.33 16 6.5 16zm11 0c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zM5 11l1.5-4.5h11L19 11H5z'/%3E%3C/svg%3E") no-repeat center;
  background-size: contain;
}

/* Emergency Contact Icon */
.icon-emergency::before {
  background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' viewBox='0 0 24 24'%3E%3Cpath d='M20.01 15.38c-1.23 0-2.42-.2-3.53-.56-.35-.12-.74-.03-1.01.24l-1.57 1.97c-2.83-1.35-5.48-3.9-6.89-6.83l1.95-1.66c.27-.28.35-.67.24-1.02-.37-1.11-.56-2.3-.56-3.53 0-.54-.45-.99-.99-.99H4.19C3.65 3 3 3.24 3 3.99 3 13.28 10.73 21 20.01 21c.71 0 .99-.63.99-1.18v-3.45c0-.54-.45-.99-.99-.99z'/%3E%3C/svg%3E") no-repeat center;
  background-size: contain;
}

/* Icon Colors and Variants */
.icon-primary { color: #007bff; }
.icon-success { color: #28a745; }
.icon-danger { color: #dc3545; }
.icon-warning { color: #ffc107; }
.icon-info { color: #17a2b8; }
.icon-light { color: #f8f9fa; }
.icon-dark { color: #343a40; }
.icon-muted { color: #6c757d; }

/* Icon Sizes */
.icon-sm { 
  width: 0.875em; 
  height: 0.875em; 
}

.icon-lg { 
  width: 1.25em; 
  height: 1.25em; 
}

.icon-xl { 
  width: 1.5em; 
  height: 1.5em; 
}

/* Status Icon Styles */
.status-icon {
  font-size: 16px;
  display: inline-block;
  line-height: 1;
  width: 1em;
  height: 1em;
}

.status-icon .icon {
  margin-right: 0;
  width: 100%;
  height: 100%;
}

.status-yes .icon-check::before { 
  background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23059669' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z'/%3E%3C/svg%3E") no-repeat center;
  background-size: contain;
}

.status-no .icon-close::before { 
  background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23dc2626' viewBox='0 0 24 24'%3E%3Cpath d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/%3E%3C/svg%3E") no-repeat center;
  background-size: contain;
}