/* === RESET & BASE === */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: #f4f6f9;
  color: #222;
  line-height: 1.5;
  padding: 16px;
  max-width: 900px;
  margin: 0 auto;
}

/* === LAYOUT === */
.container, .add-question-container {
  background: #fff;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 1px 4px rgba(0,0,0,.08);
}

header { text-align: center; padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid #e8e8e8; }
header h1 { font-size: 1.5rem; color: #3b5bdb; }

.controls {
  display: flex; flex-wrap: wrap; gap: 8px;
  justify-content: center; align-items: center;
  padding: 12px; margin-bottom: 16px; background: #fafbfc; border-radius: 6px;
}

.date-group { display: flex; align-items: center; gap: 8px; }
.date-group label { font-weight: 600; white-space: nowrap; }
.date-group input[type="date"] {
  padding: 6px 10px; border: 1px solid #c9cfe4; border-radius: 5px; font-size: .95rem;
}

.agenda { display: flex; flex-direction: column; gap: 12px; }

/* === BUTTONS === */
.nav-btn, .btn {
  padding: 8px 16px; border: none; border-radius: 6px;
  font-size: .93rem; font-weight: 600; cursor: pointer; background: #3b5bdb; color: #fff;
  transition: background .15s;
}
.nav-btn:hover, .btn:hover { background: #2841c7; }

.btn-easy   { background: #2e7d32; }
.btn-good  { background: #00838f; }
.btn-avg   { background: #ef6c00; }
.btn-hard, .btn-vhard, .btn-blackout { background: #c62828; }

.btn-selected, .btn.selected {
  outline: 3px solid #fff; outline-offset: -2px;
  box-shadow: 0 0 0 2px #3b5bdb;
}

.btn-submit { display: block; width: 100%; margin-top: 12px; background: #2e7d32; }

/* === QUESTION CARDS === */
.question-card {
  background: #fafbfc; border: 1px solid #e0e4ea; border-radius: 8px; padding: 16px;
}
.question-card.edit-mode, .question-card.editing {
  border-color: #3b5bdb; background: #f0f2ff;
}

.question-text {
  font-size: 1.05rem; padding: 12px; background: #fff;
  border-radius: 6px; margin-bottom: 12px;
}

.question-header { margin-top: 10px; }
.question-meta { display: flex; flex-wrap: wrap; gap: 8px; font-size: .85rem; color: #666; }

.page-badge, .review-badge, .ease-badge {
  padding: 2px 8px; border-radius: 4px; background: #eef0f7;
}
.ease-badge[data-ease="4"]   { color: #2e7d32; }
.ease-badge[data-ease="3.5"], .ease-badge[data-ease="3"] { color: #6a9c1b; }
.ease-badge[data-ease="2.8"], .ease-badge[data-ease="2.5"] { color: #ef6c00; }
.ease-badge[data-ease="2"], .ease-badge[data-ease="1.3"] { color: #c62828; }

.difficulty-buttons {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 8px; margin-top: 14px;
}
.btn { padding: 12px; font-size: .9rem; }

/* === ANSWER / TEXTAREA === */
.answer-textarea, .form-control textarea, .form-control input,
.edit-field-inline textarea, .edit-field-inline input,
.edit-form-group input, .edit-form-group textarea {
  width: 100%; padding: 10px; border: 1px solid #d4d8e0; border-radius: 5px;
  font: inherit; font-size: .97rem; resize: vertical;
}
.answer-textarea:focus, .form-control:focus, .edit-field-inline:focus {
  outline: none; border-color: #3b5bdb; box-shadow: 0 0 0 2px rgba(59,91,219,.15);
}

.show-answer-section { margin-top: 10px; }

.source-display {
  margin-top: 8px; padding: 8px 12px; background: #eef6ff;
  border-left: 3px solid #3b5bdb; border-radius: 4px; font-size: .9rem;
}
.source-link { color: #3b5bdb; text-decoration: none; }
.source-link:hover { text-decoration: underline; }

.answer-display {
  margin-top: 10px; padding: 12px; background: #f6f8fc;
  border-left: 4px solid #3b5bdb; border-radius: 6px;
}
.answer-display.text-answer { color: #222; }
.answer-display.image-answer img { max-width: 100%; border-radius: 4px; }

/* === HEATMAP === */
.heatmap-section {
  padding-top: 16px; margin-top: 16px;
  border-top: 1px solid #e8e8e8;
}
.heatmap-nav {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 10px; gap: 8px; flex-wrap: wrap;
}
.heatmap-month-label { font-weight: 600; }
.heatmap {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px;
}
.day-label { text-align: center; font-weight: 600; font-size: .82rem; padding: 2px; }
.day-cell {
  padding: 8px 4px; text-align: center; border-radius: 5px;
  border: 1px solid #e0e4ea; cursor: pointer; font-size: .85rem;
}
.day-cell:hover:not(:disabled) { background: #eef0f7; }
.day-cell:disabled { opacity: .35; cursor: default; }
.day-cell--muted { opacity: .35; }
.day-cell-1 { background: rgba(59,91,219,.15); }
.day-cell-2 { background: rgba(59,91,219,.3); }
.day-cell-3 { background: rgba(59,91,219,.45); }
.day-cell-4 { background: rgba(59,91,219,.6); }
.day-cell-5 { background: rgba(59,91,219,.85); }
.day-number { font-weight: 600; }

/* === EDIT FORMS === */
.edit-form-overlay, .edit-form-container {
  background: #fff; border: 2px solid #3b5bdb; border-radius: 8px; padding: 16px; margin-top: 12px;
}
.edit-form-header, .edit-form-header-inline {
  display: flex; justify-content: space-between; align-items: center;
  padding-bottom: 10px; margin-bottom: 12px; border-bottom: 1px solid #e8e8e8;
}
.edit-form-header h3, .edit-form-header-inline h3 { color: #3b5bdb; font-size: 1.1rem; }

.edit-form-group label { display: block; font-weight: 600; margin-bottom: 4px; font-size: .9rem; }
.edit-form-info {
  display: flex; flex-wrap: wrap; gap: 12px; padding: 10px;
  background: #f4f6f9; border-radius: 5px; margin-top: 10px; font-size: .88rem; color: #555;
}

.edit-status { padding: 8px 12px; border-radius: 5px; margin-top: 10px; font-weight: 600; }
.edit-status.success { background: #e8f5e9; color: #2e7d32; }
.edit-status.error   { background: #ffebee; color: #c62828; }

.btn-cancel-edit, .btn-cancel-edit-inline, .btn-cancel-edit-inline-action {
  background: #f0f0f0; color: #555; border: 1px solid #d0d0d0; padding: 6px 14px;
  border-radius: 5px; cursor: pointer;
}
.btn-cancel-edit:hover, .btn-cancel-edit-inline:hover { background: #e4e4e4; }

.btn-save-edit, .btn-save-edit-inline {
  background: #2e7d32; color: #fff; padding: 8px 20px; border: none;
  border-radius: 5px; font-weight: 600; cursor: pointer;
}
.btn-save-edit:hover, .btn-save-edit-inline:hover { background: #1b5e20; }

.btn-cancel-edit-btn, .btn-cancel {
  background: #757575; color: #fff; padding: 8px 20px; border: none;
  border-radius: 5px; font-weight: 600; cursor: pointer;
}

/* === ADD QUESTION PAGE === */
.add-question-container h1 { font-size: 1.4rem; margin-bottom: 16px; }
.add-question-container form { display: flex; flex-direction: column; gap: 12px; }
.form-group label { font-weight: 600; margin-bottom: 4px; }
.form-group input, .form-group textarea { width: 100%; padding: 10px; border: 1px solid #d4d8e0; border-radius: 5px; font: inherit; resize: vertical; }

/* === STATES === */
.loading    { text-align: center; padding: 32px; color: #888; font-size: 1.1rem; }
.no-questions { text-align: center; padding: 32px; color: #4caf50; font-size: 1.05rem; background: #f1f8e9; border-radius: 6px; }

/* === HEARTBEAT === */
#heartbeat-dot {
  position: fixed; bottom: 16px; left: 16px; width: 14px; height: 14px;
  border-radius: 50%; background: #3b5bdb;
}

/* === ALL QUESTIONS TABLE === */
.questions-table-wrapper {
  overflow-x: auto;
  width: 100%;
  margin-top: 16px;
  border: 1px solid #e0e4ea;
  border-radius: 8px;
}

.questions-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
  table-layout: fixed;
}

.questions-table thead th {
  background: #f4f6f9;
  padding: 10px 12px;
  text-align: left;
  font-weight: 600;
  color: #444;
  border-bottom: 2px solid #e0e4ea;
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 1;
}

.questions-table thead th:last-child {
  text-align: right;
}

.questions-table tbody tr {
  border-bottom: 1px solid #e8e8e8;
  transition: background 0.15s;
}

.questions-table tbody tr:last-child {
  border-bottom: none;
}

.questions-table tbody tr:hover {
  background: #f4f6fb;
}

.questions-table tbody td {
  padding: 8px 12px;
  vertical-align: middle;
  overflow: hidden;
}

/* Column widths */
.questions-table .col-question { width: 45%; min-width: 200px; }
.questions-table .col-page { width: 8%; }
.questions-table .col-reps { width: 8%; }
.questions-table .col-interval { width: 12%; }
.questions-table .col-next-review { width: 13%; }
.questions-table .col-actions { width: auto; min-width: 80px; }

/* Question cell styling */
.questions-table .question-text-cell {
  text-align: left;
  max-width: 0;
}

.questions-table .question-text-cell .cell-cue {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.88rem;
  line-height: 1.4;
}

.questions-table .question-text-cell .cell-cue[title]:hover {
  white-space: normal;
  overflow: visible;
  word-break: break-word;
  position: relative;
  z-index: 10;
}

/* Compact inline badges for table */
.questions-table .table-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 0.78rem;
  font-weight: 500;
  background: #eef0f7;
  color: #444;
  white-space: nowrap;
}

.questions-table .table-badge.page-badge {
  background: #e3f2fd;
  color: #1565c0;
}

.questions-table .table-badge.ease-badge-good {
  background: #e8f5e9;
  color: #2e7d32;
}

.questions-table .table-badge.ease-badge-warn {
  background: #fff3e0;
  color: #ef6c00;
}

.questions-table .table-badge.ease-badge-bad {
  background: #fce4ec;
  color: #c62828;
}

/* Actions cell - right aligned, with proper overflow handling */
.questions-table .actions-cell {
  text-align: right;
  white-space: nowrap;
  padding-right: 12px;
  overflow: visible;
  position: relative;
}

.questions-table .actions-cell .btn-edit-row {
  background: none;
  border: 1px solid #d0d4dc;
  border-radius: 5px;
  padding: 6px 12px;
  font-size: 0.82rem;
  cursor: pointer;
  color: #555;
  transition: all 0.15s;
  white-space: nowrap;
}

.questions-table .actions-cell .btn-edit-row:hover {
  background: #3b5bdb;
  border-color: #3b5bdb;
  color: #fff;
}

/* Filter/search bar for all questions */
.all-questions-controls {
  display: flex;
  gap: 10px;
  margin-bottom: 12px;
  flex-wrap: wrap;
  align-items: center;
}

.all-questions-controls .search-input {
  flex: 1;
  min-width: 180px;
  padding: 8px 12px;
  border: 1px solid #c9cfe4;
  border-radius: 5px;
  font-size: 0.9rem;
}

.all-questions-controls .search-input:focus {
  outline: none;
  border-color: #3b5bdb;
  box-shadow: 0 0 0 2px rgba(59,91,219,.15);
}

.all-questions-controls .filter-badge {
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 0.8rem;
  background: #eef0f7;
  color: #555;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 0.15s;
}

.all-questions-controls .filter-badge.active {
  background: #3b5bdb;
  color: #fff;
}

/* Stats bar */
.questions-stats-bar {
  display: flex;
  gap: 16px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.stats-stat {
  font-size: 0.85rem;
  color: #666;
}

.stats-stat strong {
  color: #3b5bdb;
  font-weight: 600;
}

/* Edit row inline */
.edit-row-inline {
  background: #fffbe6 !important;
}

.edit-row-inline td {
  padding: 12px !important;
}

.edit-row-inline .edit-form-inline {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.edit-row-inline .edit-form-inline .edit-inputs-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.edit-row-inline .edit-form-inline .edit-inputs-row > * {
  flex: 1;
  min-width: 120px;
}

.edit-row-inline .edit-form-inline input,
.edit-row-inline .edit-form-inline textarea,
.edit-row-inline .edit-form-inline select {
  padding: 6px 10px;
  border: 1px solid #d4d8e0;
  border-radius: 5px;
  font-size: 0.88rem;
  font-family: inherit;
}

.edit-row-inline .edit-form-inline textarea {
  resize: vertical;
  min-height: 50px;
}

.edit-row-inline .edit-form-inline .btn-edit-save,
.edit-row-inline .edit-form-inline .btn-edit-cancel-row {
  padding: 6px 14px;
  border-radius: 5px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  border: none;
}

.edit-row-inline .edit-form-inline .btn-edit-save {
  background: #2e7d32;
  color: #fff;
}

.edit-row-inline .edit-form-inline .btn-edit-save:hover {
  background: #1b5e20;
}

.edit-row-inline .edit-form-inline .btn-edit-cancel-row {
  background: #f0f0f0;
  color: #555;
  border: 1px solid #d0d0d0;
  margin-left: 8px;
}

.edit-row-inline .edit-form-inline .btn-edit-cancel-row:hover {
  background: #e4e4e4;
}

/* No questions placeholder */
.questions-table-empty {
  text-align: center;
  padding: 40px 20px;
  color: #888;
  font-size: 1rem;
}

.questions-table-empty .empty-icon {
  font-size: 2.5rem;
  display: block;
  margin-bottom: 10px;
}

/* === RESPONSIVE === */
@media (max-width: 700px) {
  body { padding: 8px; }
   .container, .add-question-container { padding: 12px; }
   .difficulty-buttons { grid-template-columns: 1fr 1fr; }
   .btn, .nav-btn { flex: 1; min-width: 90px; text-align: center; font-size: .85rem; padding: 7px 10px; }
   .heatmap { gap: 2px; }
   .day-cell { padding: 6px 2px; font-size: .78rem; }

  /* Table responsive */
  .questions-table-wrapper {
    font-size: 0.8rem;
  }
  .questions-table thead th,
  .questions-table tbody td {
    padding: 6px 8px;
    font-size: 0.8rem;
  }
  .all-questions-controls .search-input {
    min-width: 120px;
    font-size: 0.85rem;
  }
}