:root {
  --cosmic-deep: #0a0e27;
  --cosmic-dark: #141b3d;
  --nebula-purple: #6366f1;
  --nebula-blue: #3b82f6;
  --star-white: #f8fafc;
  --star-silver: #cbd5e1;
  --constellation-gold: #fbbf24;
  --alert-red: #ef4444;
  --success-green: #10b981;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Montserrat', sans-serif;
  background: var(--cosmic-deep);
  color: var(--star-white);
  min-height: 100vh;
  overflow-x: hidden;
  position: relative;
}

/* Animated starfield background */
@keyframes twinkle {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 1; }
}

@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-20px); }
}

.stars {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

.stars::before,
.stars::after {
  content: '';
  position: absolute;
  width: 2px;
  height: 2px;
  background: white;
  border-radius: 50%;
  box-shadow:
    100px 200px white, 250px 100px white, 400px 300px white,
    600px 150px white, 750px 350px white, 900px 250px white,
    150px 450px white, 350px 500px white, 550px 550px white,
    800px 500px white, 200px 600px white, 450px 650px white,
    700px 700px white, 50px 750px white, 300px 800px white,
    500px 50px white, 850px 100px white, 100px 350px white,
    950px 450px white, 650px 600px white, 1100px 300px white,
    1200px 500px white, 1300px 200px white, 1400px 400px white,
    /* Additional stars for widescreen */
    1550px 350px white, 1700px 150px white, 1850px 500px white,
    2000px 250px white, 2150px 600px white, 2300px 100px white,
    2450px 400px white, 2600px 300px white, 2750px 550px white,
    2900px 200px white, 1600px 650px white, 1750px 450px white,
    1900px 750px white, 2050px 550px white, 2200px 350px white,
    2350px 650px white, 2500px 150px white, 2650px 500px white,
    2800px 700px white, 2950px 400px white, 1500px 100px white,
    1650px 550px white, 1800px 250px white, 1950px 600px white,
    2100px 450px white, 2250px 750px white, 2400px 200px white,
    2550px 600px white, 2700px 350px white, 2850px 100px white,
    3000px 500px white, 3150px 300px white, 3300px 650px white,
    /* Extra vertical coverage */
    200px 900px white, 500px 950px white, 800px 1000px white,
    1100px 900px white, 1400px 950px white, 1700px 1000px white,
    2000px 900px white, 2300px 950px white, 2600px 1000px white,
    2900px 900px white, 3200px 950px white;
  animation: twinkle 3s ease-in-out infinite;
}

.stars::after {
  animation-delay: 1.5s;
}

/* Gradient nebula overlay */
.nebula-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(ellipse at 20% 30%, rgba(99, 102, 241, 0.15) 0%, transparent 50%),
              radial-gradient(ellipse at 80% 70%, rgba(59, 130, 246, 0.1) 0%, transparent 50%);
  pointer-events: none;
  z-index: 1;
}

.container {
  position: relative;
  z-index: 10;
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* Login Screen */
.login-screen {
  width: 100%;
  max-width: 450px;
  animation: fadeIn 0.6s ease-out;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.logo {
  text-align: center;
  margin-bottom: 3rem;
}

.logo h1 {
  font-family: 'Orbitron', sans-serif;
  font-size: 3rem;
  font-weight: 900;
  background: linear-gradient(135deg, var(--constellation-gold), var(--nebula-blue));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: 0.1em;
  margin-bottom: 0.5rem;
  text-transform: uppercase;
}

.logo p {
  font-size: 0.95rem;
  color: var(--star-silver);
  font-weight: 300;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}

.login-card {
  background: rgba(20, 27, 61, 0.7);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(99, 102, 241, 0.2);
  border-radius: 24px;
  padding: 3rem 2.5rem;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5),
              0 0 80px rgba(99, 102, 241, 0.1);
}

.form-group {
  margin-bottom: 1.5rem;
}

.form-group label {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--star-silver);
  font-weight: 500;
}

.form-group input {
  width: 100%;
  padding: 1rem 1.25rem;
  background: rgba(10, 14, 39, 0.6);
  border: 1px solid rgba(99, 102, 241, 0.3);
  border-radius: 12px;
  color: var(--star-white);
  font-size: 1rem;
  font-family: 'Montserrat', sans-serif;
  transition: all 0.3s ease;
}

.form-group input:focus {
  outline: none;
  border-color: var(--nebula-blue);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
  background: rgba(10, 14, 39, 0.8);
}

/* Style date input calendar icon to match text color */
.form-group input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(0.8) sepia(1) saturate(3) hue-rotate(180deg);
  cursor: pointer;
  opacity: 0.8;
  transition: opacity 0.3s ease;
}

.form-group input[type="date"]::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
}

/* Style time input clock icon to match text color */
.form-group input[type="time"]::-webkit-calendar-picker-indicator {
  filter: invert(0.8) sepia(1) saturate(3) hue-rotate(180deg);
  cursor: pointer;
  opacity: 0.8;
  transition: opacity 0.3s ease;
}

.form-group input[type="time"]::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
}

.form-group .hint {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.75rem;
  color: var(--star-silver);
  opacity: 0.8;
}

.error-message {
  color: var(--alert-red);
  font-size: 0.85rem;
  margin-top: 0.5rem;
  display: none;
  padding: 0.75rem;
  background: rgba(239, 68, 68, 0.1);
  border-radius: 8px;
  border-left: 3px solid var(--alert-red);
}

.error-message.show {
  display: block;
  animation: shake 0.4s ease;
}

.success-message {
  color: var(--success-green);
  font-size: 0.85rem;
  margin-top: 0.5rem;
  display: none;
  padding: 0.75rem;
  background: rgba(16, 185, 129, 0.1);
  border-radius: 8px;
  border-left: 3px solid var(--success-green);
}

.success-message.show {
  display: block;
  animation: fadeIn 0.4s ease;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-10px); }
  75% { transform: translateX(10px); }
}

.login-btn, .btn-primary {
  width: 100%;
  padding: 1.25rem;
  background: linear-gradient(135deg, var(--nebula-purple), var(--nebula-blue));
  border: none;
  border-radius: 12px;
  color: white;
  font-family: 'Orbitron', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 10px 30px rgba(99, 102, 241, 0.3);
}

.login-btn:hover, .btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 15px 40px rgba(99, 102, 241, 0.4);
}

.login-btn:active, .btn-primary:active {
  transform: translateY(0);
}

.login-footer {
  text-align: center;
  margin-top: 1.5rem;
}

.forgot-link {
  color: var(--nebula-blue);
  text-decoration: none;
  font-size: 0.9rem;
  transition: color 0.3s ease;
}

.forgot-link:hover {
  color: var(--constellation-gold);
}

/* Dashboard */
.dashboard {
  display: none;
  width: 100%;
  animation: fadeIn 0.6s ease-out;
}

.dashboard.active {
  display: block;
}

.dashboard-header {
  text-align: center;
  margin-bottom: 4rem;
}

.dashboard-header h1 {
  font-family: 'Orbitron', sans-serif;
  font-size: 2.5rem;
  font-weight: 900;
  background: linear-gradient(135deg, var(--constellation-gold), var(--nebula-blue));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: 0.1em;
  margin-bottom: 1rem;
}

.dashboard-header p {
  color: var(--star-silver);
  font-size: 1.1rem;
  font-weight: 300;
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  margin-bottom: 3rem;
}

.service-card {
  background: rgba(20, 27, 61, 0.6);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(99, 102, 241, 0.2);
  border-radius: 20px;
  padding: 2.5rem 2rem;
  text-align: center;
  transition: all 0.4s ease;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  display: block;
}

.service-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(59, 130, 246, 0.1));
  opacity: 0;
  transition: opacity 0.4s ease;
}

.service-card:hover {
  transform: translateY(-8px);
  border-color: var(--nebula-blue);
  box-shadow: 0 20px 60px rgba(59, 130, 246, 0.3);
}

.service-card:hover::before {
  opacity: 1;
}

.service-icon {
  font-size: 3.5rem;
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 80px;
  animation: float 3s ease-in-out infinite;
}

.service-icon img {
  max-width: 150px;
  max-height: 150px;
  object-fit: contain;
}

.service-card:nth-child(2) .service-icon { animation-delay: 0.5s; }
.service-card:nth-child(3) .service-icon { animation-delay: 1s; }
.service-card:nth-child(4) .service-icon { animation-delay: 1.5s; }
.service-card:nth-child(5) .service-icon { animation-delay: 2s; }
.service-card:nth-child(6) .service-icon { animation-delay: 2.5s; }

.service-card h3 {
  font-family: 'Orbitron', sans-serif;
  font-size: 1.3rem;
  margin-bottom: 0.75rem;
  color: var(--star-white);
  position: relative;
  z-index: 1;
}

.service-card p {
  color: var(--star-silver);
  font-size: 0.9rem;
  line-height: 1.6;
  position: relative;
  z-index: 1;
}

.user-menu {
  display: flex;
  gap: 1rem;
  justify-content: center;
  margin-top: 2rem;
}

.settings-btn, .btn-secondary {
  padding: 1rem 2rem;
  background: rgba(99, 102, 241, 0.1);
  border: 1px solid rgba(99, 102, 241, 0.3);
  border-radius: 12px;
  color: var(--nebula-blue);
  font-family: 'Orbitron', sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  cursor: pointer;
  transition: all 0.3s ease;
}

.settings-btn:hover, .btn-secondary:hover {
  background: rgba(99, 102, 241, 0.2);
  border-color: var(--nebula-blue);
}

.logout-btn {
  padding: 1rem 2rem;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: 12px;
  color: var(--alert-red);
  font-family: 'Orbitron', sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  cursor: pointer;
  transition: all 0.3s ease;
}

.logout-btn:hover {
  background: rgba(239, 68, 68, 0.2);
  border-color: var(--alert-red);
}

/* Modal */
.modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  animation: fadeIn 0.3s ease;
}

.modal.active {
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-content {
  background: rgba(20, 27, 61, 0.95);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(99, 102, 241, 0.3);
  border-radius: 24px;
  max-width: 600px;
  width: 90%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  animation: slideUp 0.3s ease;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2rem;
  border-bottom: 1px solid rgba(99, 102, 241, 0.2);
}

.modal-header h2 {
  font-family: 'Orbitron', sans-serif;
  font-size: 1.5rem;
  color: var(--star-white);
}

.close-btn {
  background: none;
  border: none;
  color: var(--star-silver);
  font-size: 2rem;
  cursor: pointer;
  line-height: 1;
  transition: color 0.3s ease;
}

.close-btn:hover {
  color: var(--star-white);
}

.modal-body {
  padding: 2rem;
}

.settings-section {
  margin-bottom: 2rem;
}

.settings-section h3 {
  font-family: 'Orbitron', sans-serif;
  font-size: 1.2rem;
  margin-bottom: 1.5rem;
  color: var(--constellation-gold);
}

.calendar-main-title {
  font-family: 'Orbitron', sans-serif;
  font-size: 2rem;
  background: linear-gradient(135deg, var(--constellation-gold), var(--nebula-blue));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin: 0;
  letter-spacing: 0.1em;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.checkbox-group {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 0.5rem;
}

.checkbox-group label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  color: var(--star-white);
}

.checkbox-group input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: var(--nebula-blue);
}

/* Fix alignment for checkboxes in form-group labels */
.form-group label:has(input[type="checkbox"]) {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-transform: none;
  font-size: 1rem;
  cursor: pointer;
}

.form-group input[type="checkbox"] {
  width: 20px;
  height: 20px;
  cursor: pointer;
  accent-color: var(--nebula-blue);
  margin: 0;
}

textarea {
  width: 100%;
  padding: 0.75rem;
  background: rgba(10, 14, 39, 0.6);
  border: 1px solid rgba(99, 102, 241, 0.3);
  border-radius: 8px;
  color: var(--star-white);
  font-family: 'Montserrat', sans-serif;
  font-size: 0.95rem;
  resize: vertical;
  transition: all 0.3s ease;
}

textarea:focus {
  outline: none;
  border-color: var(--nebula-blue);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
  background: rgba(10, 14, 39, 0.8);
}

.modal-actions {
  display: flex;
  gap: 1rem;
  margin-top: 1.5rem;
}

.modal-actions button {
  flex: 1;
}

footer {
  text-align: center;
  margin-top: 4rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(99, 102, 241, 0.1);
  color: var(--star-silver);
  font-size: 0.85rem;
  font-weight: 300;
}

/* View Toggle Button */
.calendar-view-toggle {
  padding: 0.75rem 1.5rem;
  background: rgba(251, 191, 36, 0.1);
  border: 1px solid rgba(251, 191, 36, 0.3);
  border-radius: 8px;
  color: var(--constellation-gold);
  font-family: 'Orbitron', sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.calendar-view-toggle:hover {
  background: rgba(251, 191, 36, 0.2);
  border-color: var(--constellation-gold);
}

@media (max-width: 768px) {
  .logo h1 {
    font-size: 2.5rem;
  }

  .login-card {
    padding: 2rem 1.5rem;
  }

  .services-grid {
    grid-template-columns: 1fr;
  }

  .dashboard-header h1 {
    font-size: 2rem;
  }

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

  .messageboard-widget {
    margin-top: 2rem;
  }

  .messageboard-message-actions {
    flex-wrap: wrap;
    gap: 0.5rem;
  }
}

/* ============================================================================
   MESSAGE BOARD STYLES
   ============================================================================ */

.messageboard-widget {
  background: rgba(20, 27, 61, 0.6);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(99, 102, 241, 0.2);
  border-radius: 20px;
  padding: 0;
  margin: 3rem 0;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
  max-height: 600px;
  display: none;
}

.messageboard-title-bar {
  padding: 1.5rem 2rem;
  border-bottom: 1px solid rgba(99, 102, 241, 0.2);
  text-align: center;
}

.messageboard-container {
  padding: 1.5rem 2rem;
  max-height: 450px;
  overflow-y: auto;
}

.messageboard-container::-webkit-scrollbar {
  width: 8px;
}

.messageboard-container::-webkit-scrollbar-track {
  background: rgba(10, 14, 39, 0.4);
  border-radius: 4px;
}

.messageboard-container::-webkit-scrollbar-thumb {
  background: rgba(99, 102, 241, 0.3);
  border-radius: 4px;
}

.messageboard-container::-webkit-scrollbar-thumb:hover {
  background: rgba(99, 102, 241, 0.5);
}

.messageboard-messages {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.messageboard-thread {
  background: rgba(10, 14, 39, 0.3);
  border: 1px solid rgba(99, 102, 241, 0.15);
  border-radius: 12px;
  padding: 1.25rem;
  transition: all 0.3s ease;
}

.messageboard-thread:hover {
  border-color: rgba(99, 102, 241, 0.3);
  box-shadow: 0 5px 20px rgba(99, 102, 241, 0.1);
}

.messageboard-message {
  margin-bottom: 0;
}

.messageboard-message-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
  flex-wrap: wrap;
}

.messageboard-author {
  font-weight: 600;
  color: var(--constellation-gold);
  font-family: 'Orbitron', sans-serif;
  font-size: 0.9rem;
}

.messageboard-timestamp {
  color: var(--star-silver);
  font-size: 0.75rem;
  opacity: 0.8;
}

.messageboard-edited {
  color: var(--star-silver);
  font-size: 0.7rem;
  font-style: italic;
  opacity: 0.6;
}

.messageboard-message-content {
  color: var(--star-white);
  line-height: 1.6;
  margin-bottom: 0.75rem;
  word-wrap: break-word;
}

.mention-tag {
  background: rgba(251, 191, 36, 0.2);
  color: var(--constellation-gold);
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
  font-weight: 600;
  border: 1px solid rgba(251, 191, 36, 0.3);
}

.messageboard-message-actions {
  display: flex;
  gap: 0.75rem;
  margin-top: 0.75rem;
}

.messageboard-action-btn {
  background: rgba(99, 102, 241, 0.1);
  border: 1px solid rgba(99, 102, 241, 0.2);
  color: var(--nebula-blue);
  padding: 0.4rem 0.75rem;
  border-radius: 8px;
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
}

.messageboard-action-btn:hover {
  background: rgba(99, 102, 241, 0.2);
  border-color: var(--nebula-blue);
}

.messageboard-delete-btn {
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.2);
  color: var(--alert-red);
}

.messageboard-delete-btn:hover {
  background: rgba(239, 68, 68, 0.2);
  border-color: var(--alert-red);
}

.messageboard-replies-header {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(99, 102, 241, 0.1);
}

.messageboard-toggle-replies {
  background: none;
  border: none;
  color: var(--nebula-blue);
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: color 0.3s ease;
  font-family: 'Montserrat', sans-serif;
  padding: 0.5rem 0;
}

.messageboard-toggle-replies:hover {
  color: var(--constellation-gold);
}

.toggle-icon {
  font-size: 0.7rem;
  transition: transform 0.3s ease;
}

.messageboard-replies {
  margin-top: 1rem;
  padding-left: 1.5rem;
  border-left: 2px solid rgba(99, 102, 241, 0.2);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.messageboard-reply {
  background: rgba(10, 14, 39, 0.2);
  border-radius: 8px;
  padding: 1rem;
}

.messageboard-footer {
  padding: 1.5rem 2rem;
  border-top: 1px solid rgba(99, 102, 241, 0.2);
  display: flex;
  justify-content: center;
}

.messageboard-post-btn {
  padding: 0.75rem 2rem;
  background: linear-gradient(135deg, #10b981, #059669);
  border: none;
  border-radius: 12px;
  color: white;
  font-family: 'Orbitron', sans-serif;
  font-size: 0.9rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 5px 20px rgba(16, 185, 129, 0.3);
}

.messageboard-post-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(16, 185, 129, 0.4);
}

.messageboard-empty {
  text-align: center;
  padding: 3rem 2rem;
  color: var(--star-silver);
}

.messageboard-empty p {
  margin: 0;
  font-size: 1rem;
}

.messageboard-error {
  text-align: center;
  padding: 2rem;
  color: var(--alert-red);
  background: rgba(239, 68, 68, 0.1);
  border-radius: 8px;
}

/* Message Modal Specific Styles */
#messageContent {
  width: 100%;
  padding: 1rem;
  background: rgba(10, 14, 39, 0.6);
  border: 1px solid rgba(99, 102, 241, 0.3);
  border-radius: 12px;
  color: var(--star-white);
  font-size: 1rem;
  font-family: 'Montserrat', sans-serif;
  resize: vertical;
  min-height: 120px;
}

#messageContent:focus {
  outline: none;
  border-color: var(--nebula-blue);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
  background: rgba(10, 14, 39, 0.8);
}

/* ============================================================================
   MOBILE RESPONSIVE STYLES
   ============================================================================ */

/* Tablet and Below (iPad and smaller) */
@media (max-width: 1024px) {
  .container {
    padding: 1.5rem;
  }

  .services-grid {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
  }

  .service-card {
    padding: 2rem 1.5rem;
  }

  .chores-container {
    padding: 1.5rem;
  }

  .chore-item {
    padding: 1.25rem;
    gap: 0.75rem;
  }
}

/* Mobile Landscape and Small Tablets */
@media (max-width: 768px) {
  body {
    font-size: 14px;
  }

  .container {
    padding: 1rem;
  }

  /* Logo and Header */
  .logo h1 {
    font-size: 2.5rem;
    letter-spacing: 0.05em;
  }

  .logo p {
    font-size: 0.8rem;
    letter-spacing: 0.2em;
  }

  .dashboard-header h1 {
    font-size: 2rem;
  }

  .dashboard-header p {
    font-size: 1rem;
  }

  /* Login Card */
  .login-card {
    padding: 2rem 1.5rem;
  }

  /* Service Grid */
  .services-grid {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }

  .service-card {
    padding: 1.75rem 1.25rem;
  }

  .service-icon {
    font-size: 3rem;
    height: 70px;
  }

  /* User Menu */
  .user-menu {
    flex-direction: column;
    gap: 0.75rem;
  }

  .settings-btn, .logout-btn, .btn-secondary {
    width: 100%;
    padding: 1rem;
    font-size: 0.85rem;
  }

  /* Modals */
  .modal-content {
    width: 95%;
    max-height: 85vh;
  }

  .modal-header {
    padding: 1.5rem;
  }

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

  .modal-body {
    padding: 1.5rem;
  }

  /* Forms - 16px font prevents iOS zoom */
  .form-group input,
  .form-group select,
  .form-group textarea {
    padding: 0.875rem 1rem;
    font-size: 16px;
  }

  /* Buttons - Touch friendly sizes */
  .login-btn, .btn-primary {
    padding: 1rem;
    font-size: 0.95rem;
    min-height: 48px;
  }

  button, .btn-small {
    min-height: 44px;
    min-width: 44px;
  }

  .calendar-view-toggle {
    width: 100%;
    justify-content: center;
  }

  /* Chores */
  .chores-container {
    padding: 1rem;
  }

  .chores-header h1 {
    font-size: 2rem;
  }

  .action-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
  }

  .action-buttons {
    flex-direction: column;
    gap: 0.75rem;
  }

  .action-buttons button,
  .btn-create {
    width: 100%;
  }

  .tab-buttons {
    flex-wrap: wrap;
    gap: 0.75rem;
  }

  .tab-btn {
    flex: 1;
    min-width: 120px;
    padding: 0.65rem 1rem;
  }

  .chore-item {
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    gap: 0.75rem;
    padding: 1rem;
  }

  .chore-checkbox {
    grid-row: 1;
    grid-column: 1;
  }

  .chore-info {
    grid-row: 1;
    grid-column: 2;
  }

  .chore-info h4 {
    font-size: 0.95rem;
  }

  .chore-info p {
    font-size: 0.85rem;
  }

  .chore-points {
    grid-row: 2;
    grid-column: 1;
    font-size: 0.85rem;
    padding: 0.4rem 0.75rem;
  }

  .chore-actions {
    grid-row: 2;
    grid-column: 2;
    justify-content: flex-end;
    gap: 0.35rem;
  }

  .btn-icon {
    padding: 0.5rem 0.6rem;
    font-size: 0.9rem;
  }

  .prize-card {
    padding: 1.5rem;
  }

  .prize-card h3 {
    font-size: 1.1rem;
  }

  .prize-card p {
    font-size: 0.9rem;
  }

  /* Kid section headers */
  .kid-section {
    margin-bottom: 1.5rem;
  }

  /* Empty state */
  .empty-state {
    padding: 2rem 1rem;
  }

  .empty-state h3 {
    font-size: 1.1rem;
  }

  /* Admin Panel */
  .admin-container {
    padding: 1rem;
  }

  .admin-header {
    flex-direction: column;
    gap: 1rem;
    align-items: stretch;
  }

  .admin-header > div:last-child {
    width: 100%;
  }

  .admin-header > div:last-child {
    flex-direction: column;
    gap: 0.75rem;
  }

  .admin-header button {
    width: 100%;
  }

  /* Tables - Make scrollable on mobile */
  .users-table {
    overflow-x: auto;
  }

  .users-table table {
    min-width: 700px;
  }

  .users-table th,
  .users-table td {
    padding: 0.75rem 0.5rem;
    font-size: 0.85rem;
  }

  /* Footer */
  footer {
    margin-top: 3rem;
    font-size: 0.8rem;
  }
}

/* Mobile Portrait (Phones) */
@media (max-width: 480px) {
  body {
    font-size: 13px;
  }

  .container {
    padding: 0.75rem;
  }

  /* Logo */
  .logo h1 {
    font-size: 2rem;
  }

  .logo p {
    font-size: 0.7rem;
  }

  .dashboard-header h1 {
    font-size: 1.75rem;
  }

  /* Login */
  .login-card {
    padding: 1.5rem 1rem;
  }

  /* Service Cards */
  .service-card {
    padding: 1.5rem 1rem;
  }

  .service-card h3 {
    font-size: 1.1rem;
  }

  .service-card p {
    font-size: 0.85rem;
  }

  /* Modals */
  .modal-content {
    width: 98%;
    margin: 1rem auto;
  }

  .modal-header {
    padding: 1rem;
  }

  .modal-header h2 {
    font-size: 1.2rem;
  }

  .modal-body {
    padding: 1rem;
  }

  .close-btn {
    font-size: 1.75rem;
  }

  /* Chores */
  .chores-header h1 {
    font-size: 1.75rem;
  }

  .section-title {
    font-size: 1.25rem;
  }

  .kid-section-header {
    font-size: 1.1rem;
  }

  .chore-item {
    padding: 0.875rem;
  }

  .chore-info h4 {
    font-size: 0.9rem;
  }

  .chore-info p {
    font-size: 0.8rem;
  }

  .btn-icon {
    padding: 0.4rem 0.5rem;
    font-size: 0.85rem;
  }

  /* Admin */
  .users-table table {
    min-width: 650px;
  }

  .admin-header h1 {
    font-size: 1.75rem;
  }

  /* Badges */
  .badge {
    font-size: 0.7rem;
    padding: 0.2rem 0.6rem;
  }

  /* Progress bars */
  .progress-bar {
    height: 25px;
  }

  .progress-text {
    font-size: 0.85rem;
    line-height: 25px;
  }
}

/* Very Small Screens */
@media (max-width: 360px) {
  .logo h1 {
    font-size: 1.75rem;
  }

  .dashboard-header h1 {
    font-size: 1.5rem;
  }

  .service-card h3 {
    font-size: 1rem;
  }
}

/* Landscape Orientation Optimizations */
@media (max-height: 500px) and (orientation: landscape) {
  .modal-content {
    max-height: 95vh;
    overflow-y: auto;
  }
}

/* Touch Device Optimizations */
@media (hover: none) and (pointer: coarse) {
  /* Increase touch targets */
  button, a.service-card, .chore-item, .badge {
    min-height: 44px;
    min-width: 44px;
  }

  /* Remove hover effects on touch devices */
  .service-card:hover,
  .chore-item:hover {
    transform: none;
  }

  /* Add active/tap feedback instead */
  .service-card:active {
    transform: scale(0.98);
  }

  button:active {
    transform: scale(0.95);
  }
}