/* style.css */
@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@400;700&display=swap');

:root {
  --font-family: 'Comfortaa', cursive;
  --bg-start: #FFDEE9;
  --bg-end:   #B5FFFC;
  --card-bg:  #FFFFFF;
  --primary:  #FF6F91;
  --secondary:#FFC75F;
  --accent:   #845EC2;
  --text:     #333333;
}

* {
  box-sizing:border-box;
}

body {
  font-family: var(--font-family);
  background: linear-gradient(135deg, var(--bg-start), var(--bg-end));
  color: var(--text);
  min-height:98dvh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
}

.container {
  background: var(--card-bg);
  border-radius:16px;
  box-shadow: 0 8px 16px rgba(0,0,0,0.1);
  width:100%;
  max-width:800px;
  padding:24px;
  animation: fadeIn 0.5s ease-out;
}

h2 {
  text-align:center;
  color: var(--accent);
  margin-bottom:16px;
}

a {
  color: var(--accent);
  text-decoration:none;
}
a:hover {
  text-decoration:underline;
}

table {
  width:100%;
  border-collapse: collapse;
  margin-top:16px;
}
th, td {
  border:1px solid #ddd;
  padding:12px 8px;
  text-align:center;
}
th {
  background: var(--secondary);
  color:white;
  font-weight:700;
}
td {
  background: #fafafa;
}
th.today, td.today {
  background: var(--primary);
  color: white;
}

select {
  width:100%;
  padding:6px;
  border-radius:8px;
  border:1px solid #ccc;
  font-family: var(--font-family);
}

input[type=password] {
    padding: .5rem;
}

button {
  margin-top:12px;
  padding:10px 20px;
  border:none;
  border-radius:20px;
  background: var(--accent);
  color: white;
  font-family: var(--font-family);
  cursor: pointer;
  transition: transform 0.2s;
}
button:hover {
  transform: scale(1.05);
}

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

/* 1) Ensure the page scales on mobile */
@media (max-width: 600px) {
    /* smaller container padding */
    .container {
      padding: 16px;
    }
  
    /* slightly smaller headings */
    h2 {
      font-size: 1.5rem;
    }
  
    /* shrink table cell padding and font-size */
    th, td {
      padding: 8px 4px;
      font-size: 0.85rem;
    }
  
    /* shrink select and button touch targets */
    select, button {
      font-size: 0.9rem;
      padding: 8px 12px;
    }
  }
  
  /* 2) Allow horizontal scrolling for the table on small screens */
  .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  /* 3) Optional: Hide overflow shadows for future‐day cells so they stay visible */
  td.future {
    opacity: 0.6;
  }
  
  /* 4) Make sure inputs and selects don’t overflow their container */
  select, input, button {
    max-width: 100%;
  }