@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

/* Global box-sizing fix for all elements */
* {
  box-sizing: border-box;
}

/* Global body styles */
body {
  font-family:  'Poppins', sans-serif;
  background: #f9fafb;
  color: #333;
  margin: 0;
  padding: 0;
}

/* 
  Padding strategy:
  - Pages with #app (recita.html): get padding on body
  - dashboard.html: needs padding (add .dashboard-page class to body)
  - class.html: has its own inline padding: 20px, no class needed
*/

/* Apply padding for recita.html (has #app) */
body:has(#app) {
  padding: 20px;
}

/* Apply padding for dashboard.html (add this class to dashboard.html body tag) */
body.dashboard-page {
  padding: 20px;
}

/* Only apply these styles to #app container (for recita.html) */
#app {
  max-width: 700px;
  margin: auto;
  background: #fff;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

#app h2, 
#app h3 {
  color: #2c3e50;
}

/* Scope input/button styles to #app only to avoid conflicts with class.html */
#app input:not([type="checkbox"]):not([type="radio"]), 
#app textarea,
#app button {
  display: block;
  margin: 8px 0;
  padding: 10px;
  width: 100%;
  border: 1px solid #ccc;
  border-radius: 6px;
  box-sizing: border-box;
}

#app button {
  background: #4f46e5;
  color: white;
  font-weight: bold;
  cursor: pointer;
}

#app button:hover {
  background: #4338ca;
}

/* MODAL SYSTEM - ALL MODALS WORK THE SAME WAY */
.modal {
  position: fixed;
  top: 0; 
  left: 0;
  width: 100%; 
  height: 100%;
  background: rgba(0,0,0,0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.modal-content {
  background: #fff;
  padding: 20px;
  border-radius: 12px;
  text-align: center;
  width: 300px;
  max-width: 90vw;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.modal-content button {
  margin: 5px 0;
  padding: 10px;
  width: 100%;
  border: none;
  border-radius: 6px;
  background: #4f46e5;
  color: #fff;
  font-weight: bold;
  cursor: pointer;
}

.modal-content button:hover {
  background: #4338ca;
}

.modal-content input {
  width: 100%;
  max-width: 100%;
  margin: 10px 0;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 6px;
  box-sizing: border-box;
}

.modal-content form input {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* GUEST MODE MODAL STYLING */
.guest-modal {
  z-index: 2000;
}

.guest-modal .modal-content {
  border: 2px solid #e5e7eb;
}

/* RECITA AUTHENTICATED MODAL SYSTEM */
.recita-modal {
  z-index: 10000;
}

.recita-modal .modal-content {
  border: 2px solid #3b82f6;
}

/* AUTHENTICATED STUDENT MODAL */
.authenticated-student-modal {
  z-index: 15000;
}

.authenticated-student-modal .modal-content {
  border: 3px solid #10b981;
}

/* CUSTOM SCORE MODAL */
.custom-score-modal {
  z-index: 12000;
}

.custom-score-modal .modal-content {
  border: 2px solid #8b5cf6;
}

/* INFO MODAL */
.info-modal .modal-content {
  border: 2px solid #22c55e;
}

/* CONFIRM MODAL */
.confirm-modal .modal-content {
  border: 2px solid #ef4444;
}

/* EXPORT MODAL */
.confirm-export-modal .modal-content {
  border: 2px solid #f59e0b;
}

/* ENSURE ALL MODAL BUTTONS ARE CLICKABLE */
.modal button,
.modal .modal-content button {
  pointer-events: auto !important;
  cursor: pointer !important;
  position: relative !important;
}