:root {
  --shadowDark: #D4D8D1;
  --background: #E8EDE6;
  --shadowLight: #F2F7F0;
  --sage-green: #8FAE8F;
  --muted-green: #A4BFA4;
  --soft-green: #B8D0B8;
  --sunflower-orange: #F2B544;
  --peach-highlight: #F5A623;
  --warm-peach: #FFD3A5;
  --forest-green: #6B8F6B;
  --sage-text: #5A6B5A;
}

/* Reset default margins and padding */
html,
body {
  margin: 0 !important;
  padding: 0 !important;
}


body {
  background: var(--background);
}

.hero-body {
  justify-content: center;
}

.login {
  border-radius: 25px;
  padding: 1.5rem;
  box-shadow: 8px 8px 15px var(--shadowDark), -8px -8px 15px var(--shadowLight);
}

input {
  background: var(--shadowDark) !important;
  border-color: var(--muted-green) !important;
}

a {
  font-weight: 600;
}

.card,
.column {
  padding: 8px;
  border-radius: 8px;
  margin: 5px;
}

.has-background-primary-light {
  background-color: #8FAE8F !important;
  border-radius: 0 0 8px 8px !important;
}


.has-text-info {
  color: #fff !important;
}

.has-background-info-light {
  background-color: #8FAE8F !important;
  border-radius: 0 0 8px 8px !important;
}


.menu-list li {
  display: block !important;
  margin-bottom: 0.5rem;
}

.menu-list li a {
  display: block;
  padding: 0.5rem 0.75rem;
  border-radius: 4px;
}

.menu-list li a:hover {
  background-color: var(--warm-peach);
}

.title.is-6 {
  font-size: 1rem;
  padding: 1.5rem;
}

.menu-label {
  font-size: 1.2rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}



/* Drag and Drop for Chapter List */
#chapterList li[draggable="true"] {
  cursor: grab;
  transition: all 0.2s ease;
}

#chapterList li[draggable="true"]:hover {
  background-color: var(--warm-peach);
}

#chapterList li[draggable="true"].dragging {
  opacity: 0.5;
  transform: rotate(2deg);
  cursor: grabbing;
}

#chapterList li.drag-over {
  border-top: 3px solid var(--sage-green);
  background-color: var(--soft-green);
}

.drag-handle {
  color: var(--muted-green);
  margin-right: 8px;
  font-size: 12px;
  user-select: none;
}

#chapterList li:hover .drag-handle {
  color: var(--forest-green);
}

/* Active chapter highlighting */
.menu-list li a.active-chapter {
  background-color: var(--sage-green) !important;
  color: white !important;
  font-weight: bold;
}

.menu-list li a.active-chapter:hover {
  background-color: var(--forest-green) !important;
  color: white !important;
}

.menu-list li a.active-chapter .drag-handle {
  color: rgba(255, 255, 255, 0.7) !important;
}

/* Note list styling (same as chapters but for notes) */
#noteList li a.active-chapter {
  background-color: var(--sunflower-orange) !important;
  /* Different color for notes - sunflower orange */
  color: white !important;
  font-weight: bold;
}

#noteList li a.active-chapter:hover {
  background-color: var(--peach-highlight) !important;
  color: white !important;
}

/* Custom Button Theme Overrides */
.button.is-primary {
  background-color: var(--sage-green) !important;
  border-color: var(--sage-green) !important;
}

.button.is-primary:hover {
  background-color: var(--forest-green) !important;
  border-color: var(--forest-green) !important;
}

.button.is-link {
  background-color: var(--sage-green) !important;
  border-color: var(--sage-green) !important;
  color: white !important;
}

.button.is-link:hover {
  background-color: var(--forest-green) !important;
  border-color: var(--forest-green) !important;
}

.button.is-info {
  background-color: var(--sunflower-orange) !important;
  border-color: var(--sunflower-orange) !important;
}

.button.is-info:hover {
  background-color: var(--peach-highlight) !important;
  border-color: var(--peach-highlight) !important;
}

.button.is-success {
  background-color: var(--muted-green) !important;
  border-color: var(--muted-green) !important;
}

.button.is-success:hover {
  background-color: var(--sage-green) !important;
  border-color: var(--sage-green) !important;
}

/* Navbar and form styling */
.navbar {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 1001 !important;
}

.navbar.is-primary {
  background-color: var(--forest-green) !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 1001 !important;
}

.navbar.is-primary .navbar-brand .navbar-item,
.navbar.is-primary .navbar-brand .navbar-link {
  color: white !important;
}

.navbar.is-primary .navbar-brand .navbar-item:hover,
.navbar.is-primary .navbar-brand .navbar-link:hover {
  background-color: var(--sage-green) !important;
  color: white !important;
}

.navbar.is-primary .navbar-start .navbar-item,
.navbar.is-primary .navbar-end .navbar-item,
.navbar.is-primary .navbar-start .navbar-link,
.navbar.is-primary .navbar-end .navbar-link {
  color: white !important;
}

.navbar.is-primary .navbar-start .navbar-item:hover,
.navbar.is-primary .navbar-end .navbar-item:hover,
.navbar.is-primary .navbar-start .navbar-link:hover,
.navbar.is-primary .navbar-end .navbar-link:hover {
  background-color: var(--sage-green) !important;
  color: white !important;
}

.navbar.is-primary .navbar-dropdown {
  background-color: var(--soft-green) !important;
}

.navbar.is-primary .navbar-dropdown .navbar-item {
  color: var(--sage-text) !important;
}

.navbar.is-primary .navbar-dropdown .navbar-item:hover {
  background-color: var(--warm-peach) !important;
  color: var(--sage-text) !important;
}

.input:focus,
.textarea:focus,
.select select:focus {
  border-color: var(--sage-green) !important;
  box-shadow: 0 0 0 0.125em rgba(143, 174, 143, 0.25) !important;
}

/* Card and notification styling */
.notification.is-primary {
  background-color: var(--soft-green) !important;
  color: var(--sage-text) !important;
}

.notification.is-info {
  background-color: var(--warm-peach) !important;
  color: var(--sage-text) !important;
}

/* Tag styling */
.tag.is-primary {
  background-color: var(--sage-green) !important;
}

.tag.is-info {
  background-color: var(--sunflower-orange) !important;
}

/* Footer styling - only target main page footer, not modal footers */
footer:not(.modal-card-foot) {
  background-color: var(--forest-green) !important;
  color: white !important;
  padding: 1.5rem 1rem !important;
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 1000 !important;
}

footer:not(.modal-card-foot) a {
  color: white !important;
}

footer:not(.modal-card-foot) a:hover {
  color: var(--warm-peach) !important;
}

footer:not(.modal-card-foot) p,
footer:not(.modal-card-foot) .content {
  color: white !important;
}

footer:not(.modal-card-foot) .title,
footer:not(.modal-card-foot) .subtitle {
  color: white !important;
}

/* Add bottom padding to body to prevent content from hiding behind fixed footer */
/* Add top padding to body to prevent content from hiding behind fixed navbar */
body {
  background: var(--background);
  padding-bottom: 100px !important;
  margin: 0 !important;
}

/* Add top padding to main content containers to prevent content from hiding behind fixed navbar */
.container:not(.navbar .container),
.section,
.hero-body,
main,
.content {
  padding-top: 70px !important;
}

/* Reset padding for navbar container to keep navbar at top */
.navbar .container {
  padding-top: 0 !important;
}

/* Reset padding for footer container */
footer .container,
footer .section,
footer .content {
  padding-top: 0 !important;
}

.field>.content {
  padding-top: 0px !important;
}