/* --- General Body & App Layout --- */
body {
    font-family: 'Georgia', serif; /* Or your preferred serif/sans-serif */
    line-height: 1.6;
    margin: 0;
    padding: 0; 
    background-color: #f4f1eb; /* Soft off-white background */
    color: #333; /* Default text color */
    font-size: 16px; /* Base font size for responsiveness */
  }
  
  #app-content {
    max-width: 900px; /* Max width for the main content area */
    margin: 20px auto; /* Centered with top/bottom margin */
    background: #ffffff; /* White background for content card */
    padding: 20px 30px; /* Inner padding */
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1); /* Soft shadow */
  }
  
  /* --- Headings --- */
  h2, h3, h4 {
    color: #3a506b; /* A consistent deep blue for headings */
    margin-top: 1.5em;
    margin-bottom: 0.8em;
    font-weight: 600;
  }
  h2 { font-size: 1.8em; border-bottom: 1px solid #e0e0e0; padding-bottom: 0.3em;}
  h3 { font-size: 1.5em; }
  h4 { font-size: 1.2em; color: #4a6353; /* Slightly different color for H4 if desired */ }
  
  .page-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid #eee;
      padding-bottom: 10px;
      margin-bottom: 25px;
  }
  .page-header h2 {
      margin: 0;
      border-bottom: none; /* Remove double border */
  }
  .page-nav button {
      margin-left: 10px;
  }
  
  
  /* --- Buttons --- */
  button, .button {
    background-color: #5d7a68; /* Calmer green */
    color: white;
    padding: 10px 15px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    margin: 8px 5px 8px 0;
    font-size: 1em;
    transition: background-color 0.3s ease;
    vertical-align: middle;
  }
  button:hover, .button:hover {
    background-color: #4a6353; /* Darker shade */
  }
  button:disabled {
      background-color: #ccc;
      cursor: not-allowed;
      opacity: 0.7;
  }
  
  .nav-button { background-color: #6c757d; }
  .nav-button:hover { background-color: #5a6268; }
  .primary-btn { background-color: #5d7a68; /* Often used for main actions */ }
  .secondary-btn { background-color: #3a506b; } /* For alternative actions */
  .delete-meditation-btn { background-color: #dc3545; float: right; padding: 5px 10px; font-size: 0.9em; }
  .delete-meditation-btn:hover { background-color: #c82333; }
  
  
  /* --- Inputs, Selects, Textareas --- */
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="date"],
  select,
  textarea {
    width: calc(100% - 22px); /* Account for padding */
    padding: 10px;
    margin: 8px 0;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-sizing: border-box; 
    font-family: 'Arial', sans-serif; /* More readable for inputs */
    font-size: 1em;
  }
  select {
      width: auto; 
      min-width: 150px;
      margin-right: 10px;
      background-color: white; /* Ensure select background is white */
  }
  input[type="date"] {
      width: auto;
      margin-right: 10px;
      padding: 9px; /* Adjust padding to align height better with buttons/selects */
  }
  textarea {
      width: 100%; 
      box-sizing: border-box;
      resize: vertical; /* Allow vertical resize */
  }
  label {
      display: inline-block;
      margin-bottom: 5px;
      font-weight: bold;
      color: #4a5568; /* Softer label color */
  }
  input[type="radio"] + label, input[type="checkbox"] + label {
      font-weight: normal; /* Normal weight for radio/checkbox labels */
      margin-right: 15px;
  }
  
  
  /* --- Sections & Panels --- */
  .qt-section {
    background: #f9f9f9;
    padding: 20px;
    margin: 25px 0;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  }
  .planner-panel {
      padding: 15px;
      border: 1px solid #e7e7e7;
      margin-top: 15px;
      margin-bottom: 20px;
      border-radius: 5px;
      background-color: #fff; /* White background for panels within sections */
  }
  
  
  /* --- Authentication Forms --- */
  .welcome-section { text-align: center; margin-bottom: 30px; }
  .welcome-section h2 { font-size: 2.2em; margin-bottom: 10px; border-bottom: none;}
  .welcome-section p { color: #666; font-size: 1.1em; }
  .feature-list { margin: 20px 0; color: #34495e; text-align: left; display: inline-block;}
  .feature-list p { margin: 8px 0; }
  #auth-forms { background: white; padding: 30px; border-radius: 12px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); max-width: 600px; margin: 30px auto; }
  .auth-container { display: flex; flex-direction: column; gap: 20px; }
  .auth-section { padding: 20px; background: #f8f9fa; border-radius: 8px; }
  .auth-section h3 { margin-top: 0; font-size: 1.5em; }
  .auth-divider { text-align: center; position: relative; margin: 15px 0; }
  .auth-divider span { background: white; padding: 0 10px; color: #666; position: relative; z-index: 1; }
  #auth-error { color: #e74c3c; text-align: center; margin-top: 15px; font-size: 14px; }
  @media (min-width: 600px) {
    .auth-container { flex-direction: row; align-items: flex-start; }
    .auth-section { flex: 1; }
    .auth-divider { writing-mode: vertical-rl; margin: 0 20px; }
    .auth-divider span { padding: 10px 0; }
  }
  
  
  /* --- "Today's Quiet Time" View --- */
  #daily-verse-area #verse-text-display p {
    font-style: italic; color: #333; margin-bottom: 8px; padding: 10px;
    background-color: #eef2f5; border-radius: 4px; border-left: 3px solid #5d7a68;
  }
  #daily-verse-area #verse-text-display strong { font-weight: bold; color: #3a506b; }
  
  /* Verse Typing Area (Individual boxes) */
  #verse-typing-area { margin-top: 20px; }
  .verse-typing-entry { 
    margin-bottom: 20px; /* More space between entries */
    padding: 10px;
    background-color: #f9f9f9; /* Light background for each typing entry */
    border: 1px solid #e0e0e0;
    border-radius: 5px;
  }
  .verse-typing-entry label { /* Style for the "John 3:16 (Type below):" label */
    font-weight: bold;
    display: block;
    margin-bottom: 5px;
    color: #3a506b;
  }
  .original-verse-display {
    padding: 4px;
    margin-bottom: 4px;
    background-color: #eef2f5; /* Light blue-grey background for reference text */
    border-radius: 4px;
    border: 1px solid #d0d7de;
    color: #555; /* Slightly darker grey for readability */
    font-family: 'Georgia', serif; /* Match your body font or a clear reading font */
    font-size: 0.95em;
    line-height: 1.2;
    white-space: pre-wrap; /* Preserve newlines and wrap text */
    word-wrap: break-word;
  }

  .user-typing-area-v2 { /* New class for these textareas */
    font-family: 'Arial', sans-serif; /* Or your preferred input font */
    font-size: 0.95em;
    line-height: 1.5;
    padding: 8px;
    border: 1px solid #b0b0b0; /* Slightly more prominent border for input */
    border-radius: 4px;
    width: 100%;
    box-sizing: border-box;
    background-color: white; /* Ensure it has a background */
    color: #333; /* User's typed text color */
    resize: vertical;
    margin-bottom: 3px; /* Space before status */
  }

  /* Placeholder style for the new textareas */
  .user-typing-area-v2::placeholder {
    color: #999; 
    font-style: italic;
    opacity: 1; 
  }
  .user-typing-area-v2::-moz-placeholder { color: #999; font-style: italic; opacity: 1; }
  .user-typing-area-v2:-ms-input-placeholder { color: #999 !important; font-style: italic; }
  .user-typing-area-v2::-ms-input-placeholder { color: #999; font-style: italic; }


  .typing-match-status { /* Existing style, ensure it's still relevant */
    margin-top: 3px; 
    font-size: 0.85em; 
    min-height: 1em; 
    padding-left: 2px; 
  }
  .verse-typing-entry textarea { 
      width: 100%; 
      box-sizing: border-box; 
      font-size: 0.95em; 
      padding: 8px;
      border-color: #c0c0c0;
  }
  .typing-match-status { margin-top: 3px; font-size: 0.85em; min-height: 1em; padding-left: 2px; }
  .match-correct { color: green; font-weight: bold; }
  .match-partial { color: orange; }
  .match-incorrect { color: red; }
  .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
  
  /* Customize placeholder text color and style for verse typing textareas */
  .verse-typing-entry textarea::placeholder {
    color: #999; /* Lighter grey color */
    font-style: italic;
    opacity: 1; /* Ensure it's fully visible */
  }
  
  /* For Firefox */
  .verse-typing-entry textarea::-moz-placeholder {
    color: #999;
    font-style: italic;
    opacity: 1;
  }
  
  /* For IE/Edge */
  .verse-typing-entry textarea:-ms-input-placeholder {
    color: #999 !important; /* Important might be needed for Edge */
    font-style: italic;
  }
  .verse-typing-entry textarea::-ms-input-placeholder { /* Older Edge */
    color: #999;
    font-style: italic;
  }

  .typing-box-wrapper {
    position: relative;
    width: 100%;
    margin-bottom: 3px;
  }

  /* Shared styles for perfect alignment */
  .ghost-text,
  .user-typing-area {
      font-family: 'Georgia', serif; /* Use a font that aligns well. Monospace can also work. */
      font-size: 1.1em;
      line-height: 1.6;
      padding: 10px;
      border: 1px solid #ccc;
      border-radius: 4px;
      width: 100%;
      min-height: calc(3 * 1.6em + 2 * 10px + 2px); /* rows * line-height + padding + border */
      box-sizing: border-box;
      white-space: pre-wrap;
      word-wrap: break-word;
  }

  .ghost-text {
      position: absolute;
      top: 0;
      left: 0;
      color: #ccc; /* Light grey for the guide text */
      z-index: 1;
      pointer-events: none; /* Clicks go through to the textarea */
      overflow: hidden;
  }

  .user-typing-area {
      position: relative;
      z-index: 2;
      background-color: transparent; /* Makes the textarea see-through */
      color: #333; /* Color of the user's typed text */
      resize: vertical;
  }

  .typing-match-status { /* Existing style */
    margin-top: 3px; 
    font-size: 0.85em; 
    min-height: 1em; 
    padding-left: 2px; 
  }

  /* --- Bible Verse Planner View --- */
  #plan-method-selector label { margin-right: 15px; cursor: pointer; font-weight: normal; }
  #plan-method-selector input[type="radio"] { margin-right: 4px; vertical-align: middle;}
  
  .book-filter-btn {
      padding: 6px 12px; margin-right: 5px; margin-bottom: 10px;
      border: 1px solid #ccc; background-color: #f0f0f0;
  }
  .book-filter-btn.active { background-color: #5d7a68; color: white; border-color: #5d7a68; }
  
  /* Verse Selection Area (for checkboxes) */
  .verse-selection-area {
      max-height: 280px; overflow-y: auto; border: 1px solid #e0e0e0;
      padding: 10px; margin-top: 10px; background-color: #fdfdfd; border-radius: 4px;
  }
  .select-all-container { padding-bottom: 8px; margin-bottom: 8px; border-bottom: 1px dashed #ccc; }
  .select-all-container label { font-weight: bold; cursor: pointer; margin-left: 5px; }
  .select-all-container input[type="checkbox"] { vertical-align: middle; }
  
  .verse-item-selectable { display: flex; align-items: flex-start; padding: 6px 3px; border-bottom: 1px solid #f0f0f0; }
  .verse-item-selectable:last-child { border-bottom: none; }
  .verse-item-selectable input[type="checkbox"].verse-select-checkbox { margin-right: 8px; margin-top: 4px; flex-shrink: 0; }
  .verse-item-selectable label { flex-grow: 1; cursor: pointer; font-weight: normal; font-size: 0.95em; }
  .verse-item-selectable label strong { font-weight: bold; }
  
  /* Selected Verses List in Planner */
  #selected-verses-for-plan-display h4 { margin-bottom: 0.5em; }
  #selected-verses-list {
      margin-top: 10px; padding: 10px; background-color: #e8f5e9;
      border: 1px solid #c8e6c9; border-radius: 4px; min-height: 50px;
  }
  .selected-verse {
    margin: 5px 0; padding: 10px; background-color: #ffffff;
    border: 1px solid #b2dfdb; /* Lighter teal border */
    border-radius: 4px; display: flex; justify-content: space-between; align-items: center;
  }
  .selected-verse p { margin: 0; flex-grow: 1; font-size: 0.9em; }
  .selected-verse button { background-color: #ef9a9a; padding: 3px 8px; font-size: 0.85em; margin-left: 10px; }
  .selected-verse button:hover { background-color: #e57373; }
  
  
  /* --- Meditation Form (Shared parts) --- */
  #meditation-text { margin-top: 5px; }
  /* Voice Recording Buttons */
  #record-voice-btn { background-color: #c82333; }
  #stop-recording-btn { background-color: #e0a800; }
  #play-recording-btn { background-color: #218838; }
  #recorded-audio-player { width: 100%; margin-top: 10px; }
  #save-status { min-height: 1.2em; color: green; font-weight: bold; margin-top: 5px; }
  
  
  /* --- Progress Calendar --- */
  .calendar-header { text-align: center; font-size: 1.2em; font-weight: bold; margin-bottom: 10px; }
  .calendar-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; font-size: 0.8em; color: #777; margin-bottom: 5px; }
  .calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
  .calendar-day {
    padding: 10px; text-align: center; border: 1px solid #ddd;
    border-radius: 4px; cursor: pointer; transition: background-color 0.2s ease;
    min-height: 20px; /* Ensure days have some height */
  }
  .calendar-day:hover:not(.empty) { background-color: #e9e9e9; }
  .calendar-day.empty { background-color: #fdfdfd; cursor: default; border-color: #f0f0f0;}
  .calendar-day.completed { background-color: #d4edda; border-color: #78c587; font-weight: bold; }
  .calendar-day.today { border: 2px solid #5d7a68; font-weight: bold; background-color: #f0fff0; }
  
  
  /* --- Meditation History View --- */
  #meditation-history-list { list-style-type: none; padding: 0; }
  .history-item { background: #fff; border: 1px solid #e0e0e0; border-radius: 6px; padding: 15px; margin-bottom: 15px; box-shadow: 0 1px 4px rgba(0,0,0,0.07); position: relative; }
  .history-item h4 { margin-top: 0; margin-bottom: 8px; }
  .history-item p { margin: 5px 0; white-space: pre-wrap; } /* Preserve line breaks in text */
  .history-item .meta { font-size: 0.9em; color: #666; margin-bottom: 10px; }
  .history-item audio { width: 100%; margin-top: 10px; }
  .history-item .view-full-history-link { font-size: 0.9em; margin-top: 5px; display: inline-block; }
  
  
  /* --- Basic Modal (for Calendar Click Summary) --- */
  #qt-modal {
      position: fixed; left: 0; top: 0; width: 100%; height: 100%;
      background-color: rgba(0,0,0,0.6); display: none; /* Hidden by default */
      justify-content: center; align-items: center; z-index: 1000;
      padding: 15px; box-sizing: border-box;
  }
  #qt-modal-dialog {
      background-color: white; padding: 20px; border-radius: 8px;
      max-width: 600px; width: 90%; max-height: 85vh;
      box-shadow: 0 5px 15px rgba(0,0,0,0.3); display: flex; flex-direction: column;
  }
  #qt-modal-content-area { flex-grow: 1; overflow-y: auto; }
  #qt-modal-title {
      margin-top: 0; color: #3a506b; border-bottom: 1px solid #eee;
      padding-bottom: 10px; margin-bottom: 15px; font-size: 1.4em;
  }
  #qt-modal-body .summary-item { border-bottom: 1px solid #f0f0f0; padding-bottom: 10px; margin-bottom: 10px; }
  #qt-modal-body .summary-item:last-child { border-bottom: none; margin-bottom: 0; }
  #qt-modal-content-area button { /* Close button */
      margin-top: 15px; padding: 8px 15px; background-color: #6c757d; align-self: flex-end;
  }
  #qt-modal-content-area button:hover { background-color: #5a6268; }
  
  
  /* --- Responsive Adjustments --- */
  @media (max-width: 768px) {
      #app-content { margin: 10px; padding: 15px 20px; }
      h2 { font-size: 1.6em; }
      h3 { font-size: 1.3em; }
      h4 { font-size: 1.1em; }
      .page-header { flex-direction: column; align-items: flex-start; }
      .page-nav { margin-top: 10px; width: 100%; }
      .page-nav button { display: block; width: 100%; margin-left: 0; margin-bottom: 5px; }
      
      input[type="text"], input[type="email"], input[type="password"],
      input[type="date"], select, textarea { font-size: 0.95em; }
      
      #verse-planner label, 
      #verse-planner input[type="date"],
      #verse-planner input[type="text"],
      #verse-planner select {
          display: block; width: calc(100% - 22px); margin-right: 0; margin-bottom: 8px;
      }
       #verse-planner button { width: 100%; margin-bottom: 10px; }
      
      .calendar-day { padding: 6px; font-size: 0.9em; }
  }
  
  @media (max-width: 480px) {
      body { font-size: 15px; }
      #app-content { padding: 15px; }
      .auth-container { flex-direction: column; }
      .auth-divider { writing-mode: horizontal-tb; margin: 15px 0; }
      #qt-modal-dialog { width: 95%; padding: 15px; }
      #qt-modal-title { font-size: 1.2em; }
      .planner-panel select { width: 100%; } /* Full width selects in planner panels */
  }