/* app/assets/stylesheets/application.css */

/*
 * This is a manifest file that'll be compiled into application.css.
 * All application-wide styles belong here.
 *
 *= require_tree .
 *= require_self
 */

/* === Base & Layout Styles === */
body {
  font-family: Arial, sans-serif;
  line-height: 1.6;
  margin: 0 auto;
  padding: 20px;
  max-width: 800px;
  color: #333;
  background-color: #fff;
  padding-bottom: 80px;
}

h1, h2, h3, h4 {
  color: #333;
  margin-bottom: 0.75em;
}

h1 { font-size: 2em; }
h2 { font-size: 1.5em; }
h3 { font-size: 1.25em; }
h4 { font-size: 1.1em; }

a {
  color: #3498db;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

/* === Form Styles === */
.form-group {
  margin-bottom: 20px;
}
.form-group label {
  display: block;
  font-weight: bold;
  margin-bottom: 5px;
}
.form-group input[type="text"],
.form-group textarea {
  width: 100%;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-sizing: border-box;
}
.form-group input[type="file"] {
  display: block;
  margin-top: 5px;
}
.form-actions {
  margin-top: 25px;
  padding-top: 15px;
}
.field_with_errors {
  display: contents;
}
.field_with_errors label {
  color: #dc3545;
  font-weight: bold;
}
.field_with_errors input,
.field_with_errors textarea,
.field_with_errors select {
  border-color: #dc3545 !important;
  box-shadow: 0 0 0 1px #dc3545;
}
.field_with_errors .tiptap-editor-container {
  border-color: #dc3545 !important;
  box-shadow: 0 0 0 1px #dc3545;
}
.field_with_errors input:focus,
.field_with_errors textarea:focus,
.field_with_errors select:focus,
.field_with_errors .tiptap-editor-container.ProseMirror-focused {
   border-color: #dc3545 !important;
   box-shadow: 0 0 0 2px #dc3545;
}
.field_with_errors .message {
    color: #dc3545;
    font-size: 0.85em;
    display: block;
    margin-top: 2px;
}

/* === Base Button Style === */
.button {
  display: inline-block;
  padding: 10px 15px;
  margin: 5px;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: 4px;
  text-decoration: none;
  white-space: nowrap;
  transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
.button {
  color: #fff !important;
  background-color: #0d6efd;
  border-color: #0d6efd;
}
.button:hover {
  color: #fff;
  background-color: #0b5ed7;
  border-color: #0a58ca;
  text-decoration: none;
}
form.button_to {
  display: inline-block;
  padding: 0;
  margin: 0;
  vertical-align: middle;
  border: none;
  background: none;
}
.button-study {
  padding: 12px 25px !important;
  font-size: 1.1em !important;
  background-color: #0d6efd !important;
  border-color: #0d6efd !important;
  color: white !important;
}
.button-study:hover {
  background-color: #0b5ed7 !important;
  border-color: #0a58ca !important;
}
.button-secondary {
   background-color: #6c757d !important;
   border-color: #6c757d !important;
   color: white !important;
}
.button-secondary:hover {
   background-color: #5a6268 !important;
   border-color: #545b62 !important;
}
.button-danger {
   background-color: #dc3545 !important;
   border-color: #dc3545 !important;
   color: white !important;
}
form.button_to button.button-danger:hover,
a.button-danger:hover {
   background-color: #c82333 !important;
   border-color: #bd2130 !important;
}

/* === Flashcard Display Styles === */
.card-container, .simple-divider, .content-area {
  border-radius: 8px;
}
.card-container {
  background: white;
  border: 1px solid #ddd;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.simple-divider {
  border-top: 1px solid #ddd;
  margin: 20px 0;
}
.content-area {
  padding: 15px 0;
  margin-bottom: 15px;
  border-bottom: 1px solid #eee;
}
.content-area:last-child, .content-area.no-border {
  border-bottom: none;
  margin-bottom: 0;
}
.content-area > *:last-child {
  margin-bottom: 0;
}
.content-area h4 {
  margin-top: 0;
  margin-bottom: 12px;
  font-size: 1em;
  color: #555;
  border-bottom: 1px dotted #ccc;
  padding-bottom: 3px;
}
.ipa-text, .translation, .sentence-translation, .word-translation {
  font-size: 1em;
  margin-bottom: 10px;
  color: #555;
}
.ipa-text {
  font-style: italic;
  color: #6c757d;
}
.explanation {
  line-height: 1.5;
  margin-top: 10px;
  margin-bottom: 10px;
  font-size: 0.95em;
  color: #333;
}
.audio-player {
  text-align: center;
  margin: 15px auto;
}
audio {
  width: 100%;
  max-width: 280px;
}
#show-answer {
  display: inline-block;
  background: #27ae60;
  color: white !important;
  border: none;
  padding: 12px 15px;
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer;
  margin: 10px 0;
  width: auto;
  min-width: 150px;
  box-sizing: border-box;
}
#show-answer:hover {
  background: #2ecc71;
}
.rating-buttons {
  display: flex;
  justify-content: space-around;
  padding-top: 0;
  gap: 10px;
}
.rating-buttons form.button_to {
  flex: 1;
  display: flex;
  margin: 0;
}
.rating-buttons form.button_to button {
  flex: 1;
  text-align: center;
  padding: 10px 5px !important;
  text-decoration: none;
  color: white !important;
  border-radius: 4px;
  font-weight: bold;
  font-size: 0.9em !important;
  line-height: 1.3;
  width: 100%;
  box-sizing: border-box;
  margin: 0;
}
.again-button, .hard-button, .good-button, .easy-button {
  border-style: solid !important;
  border-width: 1px !important;
}
.again-button { background-color: #f44336 !important; border-color: #f44336 !important; }
.hard-button { background-color: #ff9800 !important; border-color: #ff9800 !important; }
.good-button { background-color: #4CAF50 !important; border-color: #4CAF50 !important; }
.easy-button { background-color: #2196F3 !important; border-color: #2196F3 !important; }
.rating-buttons form.button_to button:hover { opacity: 0.85; }

.sentence, .answer-sentence, .conjugation, .word {
  font-size: 1.5em;
  margin-bottom: 15px;
}
.conjugation, .word {
  font-size: 1.25em;
  font-weight: bold;
}
.card-picture {
  text-align: center;
  margin: 15px 0;
}
.card-picture img {
  max-width: 100%;
  max-height: 300px;
  height: auto;
  border-radius: 4px;
}
.flashcard-review {
  padding-bottom: 100px;
}
.card-text-content {
  text-align: center;
}
.card-text-content > div,
.card-text-content > p {
   margin-left: auto;
   margin-right: auto;
}
.card-text-content .ipa-text,
.card-text-content .translation {
   font-size: 1.2em;
   margin-bottom: 12px;
}
#rating-bar {
  position: sticky;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #f8f9fa;
  padding: 15px 10px;
  border-top: 1px solid #dee2e6;
  z-index: 10;
  margin-top: 20px;
}
.review-card-counts {
  text-align: center;
  color: #6c757d;
  margin-bottom: 15px;
  font-size: 0.9em;
}
.review-card-counts span {
  font-weight: bold;
  margin: 0 2px;
}
.review-top-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 10px;
}
.review-top-actions h1 {
  margin-bottom: 0;
  font-size: 1.5em;
}
.review-top-actions > div {
  display: flex;
  gap: 10px;
}

/* === TipTap Editor Styles === */
.tiptap-editor-container {
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 10px;
  min-height: 80px;
  background-color: white;
  margin-top: 5px;
  line-height: 1.6;
}
.tiptap-editor-content:focus {
  outline: none;
}
.tiptap-editor-container.ProseMirror-focused {
  border-color: #3b82f6;
  box-shadow: 0 0 0 1px #3b82f6;
}
.tiptap-toolbar-styles {
  border: 1px solid #ddd;
  padding: 5px;
  margin-bottom: 5px;
  background-color: #f5f5f5;
  border-radius: 4px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  line-height: 1;
}
.tiptap-toolbar-button {
  padding: 4px 8px;
  border: 1px solid #ccc;
  background-color: white;
  cursor: pointer;
  border-radius: 3px;
  font-size: 14px;
  line-height: 1;
  transition: background-color 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  min-height: 28px;
  box-sizing: border-box;
}
.tiptap-toolbar-button:hover {
  background-color: #e9e9e9;
}
.tiptap-toolbar-button.is-active {
  background-color: #d0d0d0;
  border-color: #bbb;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* === Rich Text Content General Styles === */
.card-content p, .tiptap-editor-content p {
  margin-bottom: 0.75em;
  line-height: 1.6;
}
.card-content p:last-child, .tiptap-editor-content p:last-child {
  margin-bottom: 0;
}
.card-content ul, .card-content ol, .tiptap-editor-content ul, .tiptap-editor-content ol {
  padding-left: 1.5em;
  margin-bottom: 0.75em;
}
.card-content li > p, .tiptap-editor-content li > p {
  margin-bottom: 0.25em;
}
.card-content blockquote, .tiptap-editor-content blockquote {
  border-left: 3px solid #ccc;
  margin-left: 1em;
  padding-left: 1em;
  font-style: italic;
  color: #555;
  margin-bottom: 0.75em;
}
.card-content table, .tiptap-editor-content table {
  border-collapse: collapse;
  width: 100%;
  margin: 1em 0;
  border: 1px solid #ccc;
}
.card-content td, .card-content th, .tiptap-editor-content td, .tiptap-editor-content th {
  border: 1px solid #ccc;
  padding: 0.5em;
  min-width: 1em;
  vertical-align: top;
  line-height: 1.4;
}
.card-content th, .tiptap-editor-content th {
  font-weight: bold;
  background-color: #f1f1f1;
  text-align: left;
}
strong, b {
  font-weight: bold;
}
em, i {
  font-style: italic;
}
u {
  text-decoration: underline;
}

/* === Table Styles === */
.decks-container, .cards-browser-container {
  background-color: #fff;
  padding: 0;
  border-radius: 8px;
  border: 1px solid #dee2e6;
  margin-bottom: 20px;
  overflow-x: auto;
}
.decks-table {
  width: 100%;
  border-collapse: collapse;
  background-color: white;
  margin: 0;
  border: none;
}
.decks-table th {
  background-color: #f8f9fa;
  padding: 12px 15px;
  border-bottom: 2px solid #dee2e6;
  text-align: left;
  font-weight: 600;
  color: #495057;
  font-size: 0.9em;
  white-space: nowrap;
  vertical-align: middle;
}
.decks-table td {
  padding: 12px 15px;
  border-bottom: 1px solid #e9ecef;
  text-align: left;
  vertical-align: middle;
  font-size: 1em;
  transition: background-color 0.15s ease-in-out;
}
.decks-table tbody tr:nth-child(even) {
  background-color: #f8f9fa;
}
.decks-table tbody tr:nth-child(odd) {
  background-color: #fff;
}
.decks-table tbody tr:hover {
  background-color: #e2e6ea;
}
.deck-name a {
  color: #0d6efd;
  text-decoration: none;
  font-weight: 500;
}
.deck-name a:hover {
  text-decoration: underline;
}
.count-col {
  text-align: center;
  font-weight: bold;
  min-width: 70px;
}
.new-col { color: #007bff; }
.due-col { color: #198754; }
.action-col {
  text-align: right;
  white-space: nowrap;
}
.action-col > * {
  margin-left: 8px;
  vertical-align: middle;
}
.action-col > *:first-child {
  margin-left: 0;
}
.action-link, .action-separator, .button_to_inline button {
  vertical-align: middle;
}
.action-separator {
  color: #ced4da;
  margin: 0 5px;
}
form.button_to_inline {
  display: inline-block;
  margin: 0;
  padding: 0;
  vertical-align: middle;
}
button.button-link-danger {
  background: none !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 3px !important;
  font: inherit !important;
  color: #dc3545 !important;
  cursor: pointer;
  text-decoration: none;
  vertical-align: middle;
  line-height: normal;
}
button.button-link-danger:hover {
  text-decoration: underline;
  color: #a31d29 !important;
}
.cards-browser-container .decks-table td {
  max-width: 250px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cards-browser-container .decks-table .action-col {
  max-width: none;
  white-space: nowrap;
}

/* === Collapsible Form Section Styles === */
details.form-section {
  border: 1px solid #ddd;
  border-radius: 4px;
  margin-bottom: 10px;
  background-color: #fff;
}
details.form-section summary {
  padding: 6px 12px;
  font-weight: bold;
  font-size: 0.9em;
  cursor: pointer;
  background-color: #f1f1f1;
  border-bottom: 1px solid #ddd;
  border-radius: 4px 4px 0 0;
  list-style: none;
  position: relative;
  outline: none;
}
details.form-section[open] summary {
  border-bottom: 1px solid #ddd;
  border-radius: 4px 4px 0 0;
}
details.form-section:not([open]) summary {
  border-bottom: none;
  border-radius: 4px;
}
details.form-section summary::before {
  content: '▶';
  font-size: 0.7em;
  margin-right: 5px;
  display: inline-block;
  transition: transform 0.2s ease-in-out;
  vertical-align: middle;
}
details.form-section[open] summary::before {
  transform: rotate(90deg);
}
details.form-section summary::-webkit-details-marker {
  display: none;
}
.form-section-content {
  padding: 15px;
  border-top: none;
}
.form-section-content .form-group:last-child {
  margin-bottom: 0;
}

/* === Form Section Grouping === */
.form-section-group {
  border: 1px solid #ccc;
  border-radius: 6px;
  padding: 20px;
  margin-bottom: 30px;
  background-color: #fdfdfd;
}
.form-group-heading {
  font-size: 1.3em;
  margin-top: 0;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
  color: #444;
}

/* === Deck Show Styles === */
.deck-summary-container {
  text-align: center;
  padding: 30px 20px;
  background-color: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 8px;
  margin-top: 25px;
  margin-bottom: 25px;
}
.deck-title { font-size: 1.8em; margin-bottom: 25px; color: #343a40; }
.deck-stats { display: flex; justify-content: center; gap: 30px; margin-bottom: 30px; font-size: 1.1em; }
.stat-item { display: flex; flex-direction: column; align-items: center; }
.stat-label { color: #6c757d; font-size: 0.9em; margin-bottom: 4px; }
.stat-value { font-weight: bold; font-size: 1.3em; }

/* === Layout & Action Block Spacing === */
.auth-links {
  padding: 10px 20px;
  background-color: #f8f8f8;
  margin: -20px -20px 20px -20px;
  border-bottom: 1px solid #eee;
  text-align: right;
  font-size: 0.9em;
  margin-bottom: 25px;
}
.auth-links strong {
  margin-right: 5px;
}
.auth-links a, .auth-links form.button_to {
  margin-left: 10px;
  display: inline-block;
  vertical-align: middle;
}
.auth-links form.button_to {
   margin-bottom: 0;
   padding: 0;
   border: none;
}
.auth-links form.button_to input[type="submit"] {
  background: none !important;
  border: none;
  padding: 0 !important;
  margin: 0;
  color: #3498db;
  text-decoration: none;
  cursor: pointer;
  font-size: inherit;
  line-height: inherit;
  font-family: inherit;
}
.auth-links form.button_to input[type="submit"]:hover {
  text-decoration: underline;
}
.deck-actions, .study-actions, .bottom-actions, .navigation {
  margin-top: 25px;
  margin-bottom: 25px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
  flex-wrap: wrap;
}
.deck-actions {
 padding: 0 15px;
}
.study-actions p { color: #6c757d; margin: 0; }
.deck-page-bottom {
  border-top: 1px solid #eee;
  padding-top: 20px;
}

/* === Flash Message Styles === */
.notice, .alert {
  padding: 15px 20px;
  margin-bottom: 25px;
  border: 1px solid transparent;
  border-radius: 4px;
  font-weight: 500;
}
.notice {
  color: #0f5132;
  background-color: #d1e7dd;
  border-color: #badbcc;
}
.alert {
  color: #842029;
  background-color: #f8d7da;
  border-color: #f5c2c7;
}

/* === Sticky Form Action Bar === */
.sticky-form-actions {
  position: sticky;
  bottom: 0;
  background-color: #f8f9fa;
  border-top: 1px solid #dee2e6;
  padding: 15px 20px;
  box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.05);
  z-index: 100;
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 25px;
  margin-bottom: 0;
}

/* --- Styles for Deck Folder Toggle --- */
.hidden {
  display: none !important;
}

/*
 * ===============================================
 * === STYLES FOR STUDY INTENSITY FEATURES ===
 * ===============================================
 */

/* === Study Settings Page (devise/registrations/edit) === */
.study-settings-container {
  max-width: 700px;
  margin: 20px auto;
}
.study-settings-container h3 {
  text-align: center;
  margin-bottom: 10px;
}
.study-settings-container > p {
  text-align: center;
  color: #6c757d;
  margin-bottom: 30px;
}
.intensity-presets {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
.preset-card {
  border: 2px solid #dee2e6;
  border-radius: 8px;
  transition: all 0.2s ease-in-out;
}
.preset-card.selected {
  border-color: #0d6efd;
  box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.25);
}
.preset-label {
  display: block;
  padding: 20px;
  cursor: pointer;
  position: relative;
  font-weight: normal !important;
}
.preset-radio {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.preset-label h4 {
  margin-top: 0;
  margin-bottom: 8px;
  font-size: 1.2em;
  color: #212529;
}
.preset-label .description {
  color: #6c757d;
  font-size: 0.9em;
  margin-bottom: 15px;
}
.preset-label .limits {
  font-size: 0.95em;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.preset-label .new-cards {
  font-weight: 500;
  color: #0d6efd;
}
.preset-label .reviews {
  font-weight: 500;
  color: #198754;
}

/* === Daily Progress/Activity Summary (decks/index & decks/show) === */
.daily-progress-container {
  background-color: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 30px;
  margin-top: 30px;
}
.daily-progress-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}
.daily-progress-header h3 {
  margin: 0;
  font-size: 1.2em;
  color: #343a40;
}
.change-settings-link {
  font-size: 0.9em;
  font-weight: 500;
}
.progress-stats {
  display: grid;
  gap: 15px;
}
.progress-stats p {
  margin: 0;
  font-size: 1em;
  color: #495057;
}
.progress-stats span {
  font-size: 0.9em;
  color: #495057;
  margin-bottom: 5px;
  display: block;
}
.progress-bar {
  width: 100%;
  height: 12px;
  background-color: #e9ecef;
  border-radius: 6px;
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  border-radius: 6px;
  transition: width 0.4s ease;
}
.new-fill {
  background-color: #0d6efd;
}
.review-fill {
  background-color: #198754;
}

/* End of application.css */