/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  line-height: 1.5;
  margin: 2rem;
  color: #333;
}

h1 {
  font-size: 2rem;
  font-weight: bold;
  margin-bottom: 1rem;
}

p {
  margin-bottom: 1rem;
}

a {
  color: #007bff;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* Typography */
h2 {
  font-size: 1.5rem;
  font-weight: bold;
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
}

h3 {
  font-size: 1.25rem;
  font-weight: bold;
  margin-top: 1rem;
  margin-bottom: 0.5rem;
}

/* Forms */
label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: bold;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="date"],
textarea {
  width: 100%;
  padding: 0.5rem;
  margin-bottom: 1rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box; /* Prevent padding from increasing width */
  font-family: inherit; /* Ensure consistent font */
}

textarea {
  min-height: 100px;
  resize: vertical;
}

/* Make date field look more like text field */
input[type="date"] {
  line-height: 1.5; /* Match text field line height */
}

input[type="submit"],
.button {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1rem;
  text-align: center;
  text-decoration: none; /* Ensure links styled as buttons have no underline */
  box-sizing: border-box;
  line-height: 1.5; /* Ensure consistent height */
  vertical-align: middle; /* Align elements nicely */
}

input[type="submit"]:hover,
.button:hover {
  background-color: #0056b3;
  text-decoration: none; /* Keep no underline on hover */
}

/* Layout / Header */
header {
  padding: 1rem 0;
  border-bottom: 1px solid #eee;
  margin-bottom: 2rem;
}

header nav a {
  margin-right: 1rem;
}

header nav a:last-child {
  margin-right: 0;
}

/* Component-specific styles */

/* Learnings Index */
.learnings-list {
  list-style: none;
  padding: 0;
}

.learning-item {
  border: 1px solid #eee;
  padding: 1rem;
  margin-bottom: 1rem;
  display: flex;
  align-items: flex-start;
  cursor: pointer;
  position: relative;
  transition: all 0.2s ease;
}

.learning-item:hover {
  border-color: #ccc;
  background-color: #f9f9f9;
}

.hidden-checkbox {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.hidden-checkbox:checked + .selection-indicator {
  border-color: #007bff;
  background-color: #007bff;
}

.hidden-checkbox:checked + .selection-indicator:after {
  content: "";
  position: absolute;
  top: 3px;
  left: 7px;
  width: 4px;
  height: 8px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* Using adjacent sibling combinator for styling based on checkbox state */
input[type="checkbox"].hidden-checkbox:checked + .selection-indicator {
  border-color: #007bff;
  background-color: #007bff;
}

.selection-indicator {
  width: 20px;
  height: 20px;
  border: 2px solid #ccc;
  border-radius: 50%;
  margin-right: 1rem;
  margin-top: 0.4rem;
  flex-shrink: 0;
  position: relative;
}

.learning-item:hover .selection-indicator {
  border-color: #999;
}

.learning-details {
  flex: 1;
}

.learning-details h2 {
  margin-top: 0;
  margin-bottom: 0.5rem;
  line-height: 1.2;
}

/* Ensure paragraphs generated by simple_format have normal weight */
.learning-details p {
  font-weight: normal; /* Explicitly set normal weight */
  margin-bottom: 0.75rem; /* Add some space between paragraphs */
}

/* Make bolded keywords stand out more */
.learning-details strong {
  font-weight: 600; /* Use semi-bold */
}

/* Learnings New / Form Errors */
.field_with_errors {
  /* Rails default, might need adjustments */
  display: contents; /* Avoid extra divs affecting layout */
}

/* Form Errors (Standard Rails #error_explanation styling) */
#error_explanation {
  color: #721c24; /* Dark red text */
  background-color: #f8d7da; /* Light red background */
  border: 1px solid #f5c6cb; /* Slightly darker red border */
  padding: 1rem;
  margin-bottom: 1rem;
  border-radius: 4px;
}

#error_explanation h2 {
  color: inherit; /* Use the parent color */
  font-size: 1.25rem;
  margin-top: 0;
  margin-bottom: 0.5rem;
}

#error_explanation ul {
  margin-bottom: 0; /* Remove default bottom margin */
  padding-left: 1.5rem; /* Indent list items */
}

/* Filter Controls */
.filters {
  margin-bottom: 1.5rem; /* Space above the list */
  padding: 0.5rem 0;
  border-bottom: 1px solid #eee; /* Separator */
}

.filter-label {
  font-weight: bold;
  margin-right: 0.5rem;
}

.tag-link {
  display: inline-block;
  padding: 0.25rem 0.5rem;
  margin-right: 0.5rem;
  margin-bottom: 0.5rem; /* Space for wrapping tags */
  background-color: #e9ecef;
  color: #495057;
  border-radius: 4px;
  font-size: 0.9rem;
  text-decoration: none;
}

.tag-link:hover {
  background-color: #ced4da;
  color: #343a40;
  text-decoration: none;
}

.clear-filter-link {
  margin-left: 1rem;
  font-size: 0.9rem;
}

.clear-filter-link:hover {
  /* Keep default link hover */
}

.learning-details .tags {
  margin-top: 0.75rem;
}

.learning-details .tags strong {
  margin-right: 0.5rem;
}

/* Actions Area (Top of Index, Bottom of Form) */
.actions {
  margin-bottom: 1.5rem;
  display: flex;
  gap: 1rem; /* Space between buttons */
  align-items: center; /* Vertically align buttons if heights differ slightly */
}

/* Form Specific Styling */
.form-container {
  /* Removed horizontal padding to align with body margin */
}

.form-group {
  margin-bottom: 1.5rem; /* Consistent spacing between form groups */
}

.form-group label {
  /* Using default label styling */
}

.form-hint {
  font-size: 0.9rem;
  color: #6c757d;
  margin-top: -0.75rem; /* Pull hint closer to the field */
  margin-bottom: 1rem;
}

/* Style for inline code */
code {
  font-family: monospace;
  background-color: #f1f1f1;
  padding: 0.1em 0.4em;
  border-radius: 3px;
}