/* -------------------------------
   CSS VARIABLES
---------------------------------- */
:root {
  --primary-color-dark: #00796b; /* Dark Teal Green */
  --primary-color: #009688; /* Teal Green */
  --primary-color-light: #b2dfdb; /* Light Teal Green */
  --accent-color: #B85450; /* Deep Orange */
  --danger-color: #DC3545; /* Deep Orange */
  --secondary-color-light: #cfe8fe;
  --secondary-color: #1460a2;
  --secondary-color-dark: #125691;
  --divider-color: #bdbdbd; /* Light Gray */
  --text-color-dark: #212121; /* Dark Gray */
  --text-color: #757575; /* Gray */
  --background-color-light: #ffffff; /* White */
  --primary-font: "Bitter", serif;
  --brand-font: "Roboto", sans-serif;
  --secondary-font: "Abril Fatface", serif;
  --header-height: 64px;
  --search-overlap: 0px;
}

/* -------------------------------
   GENERAL STYLES
---------------------------------- */
html, body {
  height: 100%;
  margin: 0;
}

body {
  display: flex;
  flex-direction: column;
  font-family: var(--primary-font);
  color: var(--text-color-dark);
  background-color: var(--background-color-light);
  margin: 0;
  padding: 0;
}

h1, h3 {
  color: var(--primary-color-dark);
  font-family: var(--secondary-font);
  text-align: center;
}
h1 {
  font-size: 2.25rem;
  line-height: 1.2;
  margin: 0 0 .6em;
}
article h1,
section h1,
nav h1,
aside h1 {
  font-size: 1.875rem;
}

h2, h4 {
  font-family: var(--primary-font);
  color: var(--text-color-dark);
}


h2 {
  font-size: 1.875rem; 
  line-height: 1.25;
  text-align: center;
  margin-bottom: 0.5em;
}
h3 {
  font-size: 1.5rem;
  line-height: 1.3;
  margin: 0 0 .5em;
}
h4 {
  text-align: left;
  font-size: 1.15rem;
  line-height: 1.35;
  margin: 0.5em 0;
}

h5 {
  font-size: 1.1rem;
   line-height: 1.4;
}

h6 {
  font-size: 1rem;
  line-height: 1.4;
}

p,
span {
  color: var(--text-color);
}

main {
  margin-top: 6rem;
  flex: 1;
}

footer {
  text-align: center;
}

/* Links */
a {
  color: var(--secondary-color);
  text-decoration: underline;
}

a:hover {
  color: var(--accent-color);
}

a.btn {
  text-decoration: none;
  border-radius: 12px;
}

a.no-decoration{
  text-decoration: none;
}

/* Unify book title + action links */
.book-link {
  color: var(--secondary-color);
  text-decoration: underline;
  font-weight: 600;
}

.book-link:hover,
.book-link:focus {
  color: var(--accent-color);
  text-decoration: underline;
}

.book-link--sm {
  font-size: 0.9rem;
  font-weight: 500;
}


/* Ensure #main-content lands fully *below* header + search overlap */
#main-content {
  scroll-margin-top: calc(var(--header-height) + var(--search-overlap) + 12px);
}

/* Pages that include the search row get an extra anchor offset */
body:has(.search-row) { --search-overlap: 88px; }
@media (min-width: 768px) {
  body:has(.search-row) { --search-overlap: 140px; }
}


/* -------------------------------
   HEADER
---------------------------------- */
.brand-font {
  font-family: var(--brand-font);
  font-weight: bold;
  letter-spacing: 0.05em;
  text-decoration: none;
  color: var(--text-color-dark);
}

.navbar-brand.brand-font {
  letter-spacing: 0.02em;
}

.site-header {
  background-color: var(--primary-color-light);
  /* small bottom padding so the search card can overlap */
  padding-bottom: 1rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
  position: sticky;
  top: 0;
  z-index: 1030;
}

.btn-toggle-navbar {
  border: none;
  color: var(--primary-color-dark);
  background-color: transparent;
  padding: 0;
  cursor: pointer;
  font-size: 1.65rem;
}

.btn-toggle-navbar:hover {
  border: none;
  color: var(--background-color-light);
}


/* -------------------------------
   HERO
---------------------------------- */
.hero-title {
  font-family: var(--secondary-font);
  font-size: 2.5rem;
  color: var(--background-color-light);
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
  margin-top: 3.5rem;
  letter-spacing: .2px;
}

.hero-text {
  font-family: var(--brand-font);
  font-size: 1.2rem;
  letter-spacing: 0.5px;
  color: var(--background-color-light);
  margin-top: 1rem;
  font-weight: 500;

}

/* --- HERO ACCESSIBILITY HELPERS --- */
.hero-section { height: clamp(320px, 60vh, 560px); }

.hero-media { position:absolute; inset:0; width:100%; height:100%; }
.hero-media > img { width:100%; height:100%; object-fit:cover; display:block; }

/* Dark scrim + subtle vignette for better edge legibility */
.hero-overlay {
  position:absolute; inset:0;
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(0,0,0,.15) 0%, rgba(0,0,0,0) 60%),
    linear-gradient(180deg, rgba(0,0,0,.65), rgba(0,0,0,.45));
  /* Increase the .65 value to .7–.8 if needed to pass AA on smaller text */
}

/* -------------------------------
   PAGINATION
---------------------------------- */
.pagination {
  --bs-pagination-color: var(--primary-color-dark);
  --bs-pagination-hover-color: #fff;
  --bs-pagination-hover-bg: var(--primary-color);
  --bs-pagination-hover-border-color: var(--primary-color);
  --bs-pagination-active-color: #fff;
  --bs-pagination-active-bg: var(--primary-color-dark);
  --bs-pagination-active-border-color: var(--primary-color-dark);
  --bs-pagination-focus-color: #fff;
  --bs-pagination-focus-bg: var(--primary-color);
  --bs-pagination-border-radius: 8px;
  flex-wrap: wrap;              
  max-width: 100%;
}

.pagination .page-link {
  color: var(--primary-color-dark);
  border: 1px solid var(--divider-color);
  font-family: var(--brand-font);
  font-weight: 600;
  min-width: 2.25rem;          
  padding: .45rem .6rem;
}

.pagination-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.pagination .page-link:hover {
  background-color: var(--primary-color-light);
  color: var(--text-color-dark);
}

.pagination .page-item.active .page-link {
  background-color: var(--primary-color-dark);
  border-color: var(--primary-color-dark);
  color: #fff;
}

.pagination .page-item.disabled .page-link {
  color: var(--text-color);
  background-color: #f9f9f9;
  border-color: var(--divider-color);
}
/* -------------------------------
   SEARCH FORM
---------------------------------- */
/* Overlapping search card  */
.search-card {
  background: #fff;
  border-radius: 16px;
  padding: 12px;
  display: grid;
  align-items: center;
  gap: 6px;
  /* Mobile grid: 2 columns, stacked areas */
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  /* Push the card down so the teal ends ~mid-card */
  transform: translateY(10%);
}

.search-card .form-control,
.search-card .form-select {
  height: 48px;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  border-radius: 12px;
}

/* Make the button match the input/select height and align content */
.search-card .btn {
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.search-row {
  /* Remove unintended padding/margin */
  margin-top: 0;
  padding-top: 0;
  height: 40px;
  overflow: visible; /* so the search card can hang over */
}

/* -------------------------------
   SEARCH RESULTS
---------------------------------- */
.img-card-search {
  width: 128px;
  height: 192px;
  object-fit: cover;
}
.search-result-heading {
  font-family: var(--primary-font);
}
/* -------------------------------
   BUTTONS
   Namespace: .nc-btn
---------------------------------- */

/* Base */
.nc-btn {
  --btn-bg: var(--primary-color-dark);
  --btn-border: transparent;
  --btn-text: #fff;
  --btn-bg-hover: var(--primary-color);
  --btn-text-hover: #fff;
  --btn-bg-active: var(--primary-color);
  --btn-text-active: #fff;

  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;

  font-family: var(--brand-font);
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;

  height: 2.5rem;               
  padding: 0.6rem 1rem;        
  border-radius: 12px;
  border: 1px solid var(--btn-border);
  color: var(--btn-text);
  background: var(--btn-bg);
  cursor: pointer;

  transition: background-color .15s ease, color .15s ease,
              border-color .15s ease, box-shadow .15s ease, transform .05s ease;
}

.nc-btn:hover {
  background: var(--btn-bg-hover);
  color: var(--btn-text-hover);
}

.nc-btn:active {
  transform: translateY(1px);
  background: var(--btn-bg-active);
  color: var(--btn-text-active);
}

.nc-btn:focus-visible {
  outline: 3px solid var(--accent-color);
  outline-offset: 2px;
}

.nc-btn[disabled],
.nc-btn[aria-disabled="true"] {
  opacity: .6;
  cursor: not-allowed;
}

/* Sizes */
.nc-btn--sm { height: 2rem; padding: 0.55rem 0.75rem; font-size: 0.965rem; }
.nc-btn--lg { height: 3rem; padding: 0.85rem 1.25rem; font-size: 1.05rem; }

/* Icon-only helper (square, center) */
.nc-btn--icon {
  width: 2rem;
  min-width: 2rem;
  padding: 0;
}

/* Shape helpers for split buttons */
.nc-btn--round-start { border-top-left-radius: 12px; border-bottom-left-radius: 12px; border-top-right-radius: 0; border-bottom-right-radius: 0; }
.nc-btn--round-end   { border-top-right-radius: 12px; border-bottom-right-radius: 12px; border-top-left-radius: 0; border-bottom-left-radius: 0; }

/* Variants */
.nc-btn--primary {
  --btn-bg: var(--primary-color-dark);
  --btn-bg-hover: var(--primary-color);
  --btn-bg-active: var(--primary-color);
  --btn-text: #fff;
  --btn-border: var(--primary-color-dark);
}

.nc-btn--accent {
  --btn-bg: var(--accent-color);
  --btn-bg-hover: #A64C48;
  --btn-bg-active: #934340;
  --btn-text: #fff;
  --btn-border: var(--accent-color);
}

.nc-btn--muted {
  --btn-bg: #f2f4f7;
  --btn-bg-hover: #e4e7ec;
  --btn-bg-active: #d5d9e0;
  --btn-text: #344054;
  --btn-border: #d0d5dd;
}

.nc-btn--danger {
  --btn-bg: var(--danger-color);
  --btn-bg-hover: #C8303F;
  --btn-bg-active: #B22B38;
  --btn-text: #fff;
  --btn-border: var(--danger-color);
}
/* keep icons fully background-less, even on hover/active */
.nc-btn--ghost,
.nc-btn--ghost:hover,
.nc-btn--ghost:active {
  background: transparent;
}
/* subtle hover without backgrounds */
.nc-btn--ghost:hover { opacity: .85; }

/* Outline/ghost styles – replacement for Bootstrap "btn-outline-*" */
.nc-btn--secondary {
  --btn-bg: transparent;
  --btn-text: var(--primary-color-dark);
  --btn-border: var(--primary-color-dark);
  --btn-bg-hover: var(--primary-color-light);
  --btn-text-hover: var(--text-color-dark);
  --btn-bg-active: var(--primary-color);
  --btn-text-active: #fff;
}

.nc-btn--ghost {
  --btn-bg: transparent;
  --btn-text: var(--secondary-color);
  --btn-border: transparent;
  --btn-bg-hover: rgba(0,0,0,.05);
  --btn-text-hover: var(--accent-color);
  --btn-bg-active: rgba(0,0,0,.08);
  --btn-text-active: var(--accent-color);
}

/* Contrast helpers (use on dark or image backgrounds) */
.is-on-dark .nc-btn--secondary { --btn-text: #fff; --btn-border: #fff; --btn-text-hover: #111; }
.is-on-dark .nc-btn--ghost     { --btn-text: #fff; --btn-text-hover: var(--primary-color-light); }

/* ---------------------------------
   Back-compat aliases (existing classes)
   — so nothing breaks if a template was missed
------------------------------------ */
.btn-default { /* maps to primary filled */
  --btn-bg: var(--primary-color-dark);
  --btn-bg-hover: var(--primary-color);
  --btn-bg-active: var(--primary-color);
  --btn-text: #fff;
  --btn-border: var(--primary-color-dark);
  border: 1px solid var(--btn-border);
  color: var(--btn-text);
  background: var(--btn-bg);
  padding: 0.6rem 1rem;
  border-radius: 12px;
  display: inline-flex;
  align-items: center; justify-content: center;
  text-decoration: none; font-family: var(--brand-font); font-weight: 600;
}

/* Muted Status Button */
.nc-btn--muted {
  --btn-bg: #f2f4f7;       /* base light gray */
  --btn-border: #d0d5dd;
  --btn-text: #344054;

  --btn-bg-hover: #e0e3e8; /* slightly darker gray for hover */
  --btn-text-hover: #1d2939;

  --btn-bg-active: #cbd0d7; /* distinctly darker for active */
  --btn-text-active: #111;
}
.btn-accent { /* maps to accent filled */
  background: var(--accent-color); border-color: var(--accent-color); color: #fff;
}
.btn-delete { /* maps to danger filled */
  background: var(--danger-color); border-color: var(--danger-color); color: #fff;
}
.btn-muted  { /* maps to muted */
  background: #f2f4f7; color: #344054; border: 1px solid #d0d5dd; border-radius: 12px;
}

/* Give anchors that look like buttons the same hover/focus */
a.nc-btn:hover, a.nc-btn:focus-visible { text-decoration: none; }

/* -------------------------------
   RATING
---------------------------------- */
.rating-widget .stars {
  cursor: pointer;
}

.rating-widget .star {
  font-size: 1.6rem;
  color: #757575;         /* empty star */
  transition: color 0.2s;
  padding: 0 0.1rem;
}

.rating-widget .star:hover,
.rating-widget .star:hover ~ .star {
  color: #f2b01e;       /* highlight on hover */
}

.stars label {
  cursor: pointer;
}

.visually-hidden {
  position:absolute !important;
  width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip-path: inset(50%);
  border:0;
}


/* .stars input[type="radio"] {
  display:none
} */

/* Keep radios in the accessibility tree & tab order */
.stars input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%);
  overflow: hidden;
}
/* Visible focus ring on the star that corresponds to the focused radio */
.stars input[type="radio"]:focus-visible + label.star {
  outline: 3px solid var(--accent-color);
  outline-offset: 2px;
  border-radius: 6px; /* helps the outline look tidy */
}

.stars input[type="radio"]:checked ~ label.star { color: #f2b01e; }


.btn-remove-rating {
  background: transparent;
  color: var(--text-color-dark);
  border: none;
  font-size: 1.2rem;
  cursor: pointer;
  padding: 0.25rem;
  transition: color 0.2s, font-size 0.2s;  
}

.btn-remove-rating:hover, .btn-remove-rating:focus {
  background: transparent;
  font-size: 1.3rem;
  color: #1d2939;
  font-weight: bold;
}

.book-rating-info {
  font-size: 0.875rem;
}

/* -------------------------------
   FORMS
---------------------------------- */
/* Make native checkboxes & radios use the brand accent when checked */
input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--accent-color);
}

/* -------------------------------
   GENRE CARDS
---------------------------------- */
.genre-label {
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Make genre cards feel clickable */
.genre-card,
.genre-card .card {
  cursor: pointer;
}

/* Ensure the element that animates has transitions */
.genre-card .card,
.genre-card.card {
  transition: transform 0.2s ease, box-shadow 0.2s ease,
    background-color 0.2s ease, color 0.2s ease;
}

/* Hover effect applied to the card  */
.genre-card:hover .card,
.genre-card.card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
  border: 1.5px solid var(--accent-color);
}

/* subtle text color change on hover */
.genre-card:hover .card h3,
.genre-card.card:hover h3,
.genre-card:hover .card p,
.genre-card.card:hover p {
  color: var(--accent-color);
}

/* Remove browser default outline on the invisible stretched link */
.genre-card .stretched-link:focus-visible {
  outline: none;
}

.genre-card:has(.stretched-link:focus-visible) {
  transform: translateY(-3px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
  border: 1px solid var(--accent-color);
  outline: 3px solid var(--accent-color);
  outline-offset: 2px;
}

.genre-card:has(.stretched-link:focus-visible) h3,
.genre-card:has(.stretched-link:focus-visible) p {
  color: var(--accent-color);
}


/* -------------------------------
   BOOKS PAGE
---------------------------------- */
.book-item:hover,
.genre-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
  transition: 0.2s ease;
}

.book-cover {
  max-height: 200px;
  object-fit: cover;
  border-radius: 5px;
}

.book-title, .book-description {
  text-align: left;
}

.book-description-content{
  color: var(--text-color);
  margin-bottom: 2.5rem;
}


/* -------------------------------
   LIBRARY LIST
---------------------------------- */

.library-table-wrap { overflow-y: visible; }  
.library-table .dropdown-menu { z-index: 1050; } 

.library-cover-img {
  width: 48px;
  height: 72px;
  object-fit: cover;
}
.library-table td, .library-table th { vertical-align: middle; }
/* --- Multi-level dropdown (submenu) --- */
.dropdown-submenu { position: relative; }

.dropdown-submenu > .dropdown-menu {
  position: absolute;
  top: 100%;          
  left: 0;           
  right: auto;
  margin-top: .125rem;
  min-width: 12rem;   
  max-height: 60vh;
  overflow-y: auto;
}

/* hint arrow styling stays the same */
.dropdown-submenu > a[data-submenu] > span { opacity: .7; }

/* Reading status pill */
.status-pill {
  display: inline-block;
  padding: 0.125rem 0.5rem;
  border-radius: 999px;
  font-size: 0.825rem;
  line-height: 1.2;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

/* Variants */
.status--to-read  { background: #fff4e5; color: #664d03; }  
.status--reading  { background: var(--secondary-color-light); color: var(--secondary-color-dark); }
.status--read     { background: #e6f4ea; color: #0f5132; }
.status--none     { background: #f2f4f7; color: #344054; }


/* clickable table headers */
.table-sort {
  text-decoration: none;
}
.table-sort:hover { text-decoration: none; }
/* -------------------------------
DROPDOWN / STATUSES
---------------------------------- */
/* Override Bootstrap dropdown links to match site design */
.dropdown-menu .dropdown-item {
  color: var(--text-color-dark);
  background-color: transparent;
  padding: 0.5rem 1rem;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus {
  background-color: var(--primary-color-light);
  color: var(--text-color-dark);
}

.dropdown-menu .dropdown-item:active {
  background-color: var(--primary-color);
  color: #fff;
}

/* Danger link variant (Sign out) */
.dropdown-menu .dropdown-item.danger-color {
  color: var(--danger-color);
}

.dropdown-menu .dropdown-item.danger-color:hover,
.dropdown-menu .dropdown-item.danger-color:focus {
  background-color: #E04958; 
  color: var(--background-color-light);
}

.dropdown-menu .dropdown-item.danger-color:active {
  background-color: var(--danger-color);
  color: #fff;
}


.reading-status-btn-group {
  min-width: 134px;
}
/* open the dropdown when the caret area is hovered or focused */
.hover-dropdown:hover .dropdown-menu,
.hover-dropdown:focus-within .dropdown-menu {
  display: block;
}

/* make dropdown items look tidy */
.dropdown-menu .dropdown-item { width: 100%; }

.btn-group .dropdown-toggle-split {
  border-left: 1px solid var(--divider-color, #dee2e6);
}

/* -------------------------------
AUTH (LOGIN / SIGNUP / LOGOUT)
---------------------------------- */
/* Auth container */
.auth-container {
  font-family: var(--brand-font);
  max-width: 520px;
  margin: 4rem auto;
  padding: 2rem;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 16px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.06);
}

/* Title */
.auth-container h1 {
  margin-bottom: 2rem;
}
.auth-container h2 {
  margin-top: 3rem;
  margin-bottom: 1rem;
}

.auth-title {
  font-family: var(--secondary-font);
  color: var(--primary-color-dark);
  text-align: center;
  margin-bottom: 1rem;
}

/* Small intro text */
.auth-intro {
  text-align: center;
  margin-bottom: 1.25rem;
  color: var(--text-color);
}

/* Form spacing inside the container */
.auth-container form [type="text"],
.auth-container form [type="email"],
.auth-container form [type="password"],
.auth-container form select,
.auth-container form textarea {
  width: 100%;
  padding: 0.65rem 0.9rem;
  border: 1px solid var(--divider-color);
  border-radius: 12px;
  font-family: var(--brand-font);
}

/* Auth actions container */
.auth-actions {
  margin-top: 1rem;
  justify-content: flex-end; /* or center/space-between to taste */
  display: flex;
  gap: 0.75rem;
  flex-direction: column;
  align-items: stretch;
}

/* Secondary button (outline style) */
.btn-secondary {
  background: transparent;
  color: var(--primary-color-dark);
  border: 1px solid var(--primary-color-dark);
}

.btn-secondary:hover,
.btn-secondary:focus {
  background: var(--primary-color-light);
  color: var(--text-color-dark);
}

/* Accessibility: clear focus ring for keyboard users */
.auth-actions .btn:focus-visible {
  outline: 3px solid var(--accent-color);
  outline-offset: 2px;
}

/* Minor helpers for checkboxes + labels */
.auth-container label {
  color: var(--text-color-dark);
}

.auth-container input[type="checkbox"] {
  margin-right: 0.5rem;
  vertical-align: middle;
}

/* Help text for forms */
.helptext {
  font-size: 0.9rem;
  color: var(--text-color);
  margin-top: 0.5rem;
  display: block;
}

/* lists */
.auth-container ul {
  color: var(--text-color);
  font-size: small;
  list-style: none;
  padding: 0;
  margin: 0;
}
ul.errorlist {
  color: var(--accent-color);
}

.auth-container li {
  margin-bottom: 0.5rem;
  padding-left: 1.5rem;
}

/* ================================
Allauth buttons 
=================================== */

/* Make the Allauth forms layout flex so we can right-align the action row */
.auth-container form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;           /* gentle spacing between fields and actions */
}

/* Treat common Allauth "action" regions as right-aligned rows */
.auth-container :is(.actions, .button-group, .btn-group, .form-actions) {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}

/* If Allauth renders the actions slot as just the button itself, this still works */
.auth-container form :is(button[type="submit"], a[role="button"]) {
  align-self: flex-end;   /* right-align the lone action if no wrapper exists */
}

/* Unify visual style: Allauth button primitives */
.auth-container :is(button[type="submit"], a[role="button"], .btn, .button) {
  /* Base: mirror .nc-btn + primary variant */
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  
  height: 2.5rem;
  padding: 0.6rem 1rem;
  border-radius: 12px;
  
  font-family: var(--brand-font);
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  
  /* Primary fill tokens */
  background: var(--primary-color-dark);
  color: #fff;
  border: 1px solid var(--primary-color-dark);
  
  transition: background-color .15s ease, color .15s ease,
  border-color .15s ease, box-shadow .15s ease, transform .05s ease;
}

/* Hover / active / focus match your .nc-btn interactions */
.auth-container :is(button[type="submit"], a[role="button"], .btn, .button):hover {
  background: var(--primary-color);
  color: #fff;
  border-color: var(--primary-color);
}

.auth-container :is(button[type="submit"], a[role="button"], .btn, .button):active {
  transform: translateY(1px);
  background: var(--primary-color);
  color: #fff;
}

.auth-container :is(button[type="submit"], a[role="button"], .btn, .button):focus-visible {
  outline: 3px solid var(--accent-color);
  outline-offset: 2px;
}

/* Disabled state */
.auth-container :is(button[type="submit"], a[role="button"], .btn, .button)[disabled],
.auth-container :is(button[type="submit"], a[role="button"], .btn, .button)[aria-disabled="true"] {
  opacity: .6;
  cursor: not-allowed;
}

/* If Allauth emits "outline"/"primary" or other themed classes, force them to the primary look */
.auth-container :is(.btn-outline-primary, .btn-outline, .outline, .primary, [data-theme="outline"]) {
  background: var(--primary-color-dark) !important;
  color: #fff !important;
  border-color: var(--primary-color-dark) !important;
}

/* Vertical button groups stack but right-aligned */
.auth-container :is(.btn-group-vertical, .button-group[vertical], .button-group.vertical) {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;   /* right edge alignment */
  gap: 0.5rem;
}

/* Make anchor "buttons" behave like buttons for hover/focus */
.auth-container a[role="button"]:hover,
.auth-container a[role="button"]:focus-visible {
  text-decoration: none;
}


/* -------------------------------
EMAIL ADDRESSES
---------------------------------- */
.email-list {
  margin: 1rem 0 0.5rem;
  padding: 0;
  border: 0;
}

.email-item {
  display: grid;
  grid-template-columns: 24px 1fr; /* radio | label+badges */
  gap: 0.75rem;
  align-items: start;
  padding: 0.75rem 1rem;
  background: var(--background-color-light, #fff);
  border: 1px solid var(--divider-color);
  border-radius: 16px;
  margin-bottom: 0.5rem;
}

/* Make the Allauth radio+label render cleanly */
.email-item input[type="radio"] {
  accent-color: var(--accent-color);
  margin-top: 0.35rem;
}
.email-item label {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.5rem;
  margin: 0;
  min-width: 0; /* allow flex wrapping */
  overflow-wrap: anywhere;
}
.email-text {
  font-weight: 600;
}

/* Badges (compact chips) */
.badge,
.tag,
[data-tag] {
  display: inline-block;
  padding: 0.125rem 0.5rem;
  border-radius: 999px;
  font-size: 0.8125rem;
  line-height: 1.2;
}
.badge[tags*="success"],
.badge-success {
  background: #e6f4ea;
  color: #0f5132;
}
.badge[tags*="warning"],
.badge-warning {
  background: #fff4e5;
  color: #664d03;
}
.badge[tags*="primary"] {
  background: var(--primary-color-light);
  color: var(--text-color-dark);
}

/* -------------------------------
MESSAGES
---------------------------------- */

/* Put flash messages on top, centered, without affecting layout */
.message-overlay {
  position: fixed;
  top: calc(var(--header-height, 64px) + 8px); 
  left: 0;
  right: 0;
  z-index: 1055; 
  pointer-events: none; 
}

.message-overlay .alert {
  width: min(960px, calc(100% - 2rem)); 
  margin: 0.5rem auto;
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
  pointer-events: auto; 
}


/* -------------------------------
MEDIA QUERIES
---------------------------------- */

/* SMALL SCREEN */
@media (max-width: 767px) {
  .search-card {
    grid-template-areas:
    "scope  query"
    "filter query"
    "button button";
  }
  
  /* Explicit area assignment  */
  .search-card select[name="field"] {
    grid-area: scope;
  }
  .search-card input[name="q"] {
    grid-area: query;
  }
  .search-card select[name="filter"] {
    grid-area: filter;
  }
  .search-card button[type="submit"] {
    grid-area: button;
  }
}

@media (max-width: 575.98px) {
  .library-table .nc-btn { padding: 0.5rem 0.75rem; } 
}

@media (min-width: 576px) {
  dropdown-submenu > .dropdown-menu {
    top: 0;
    left: 100%;
    right: auto;
    margin-top: 0;
    margin-left: .125rem;
    max-height: none;  /* roomier on desktop */
  }
  /* if parent is right-aligned, open to the LEFT */
  .dropdown-menu.dropdown-menu-end > .dropdown-submenu > .dropdown-menu {
    left: auto;
    right: 100%;
    margin-left: 0;
    margin-right: .125rem;
  }
}

/* MEDIUM+ SCREEN */
@media (min-width: 768px) {
  h1 { font-size: 2.5rem; }
  h2 { font-size: 2rem; }
  h3 { font-size: 1.625rem; }
  article h1,
  section h1,
  nav h1,
  aside h1 { font-size: 2rem; }

  .hero-title {
    font-size: 2.8rem;
  }

  .hero-text {
    font-size: 1.8rem;
    } 
  .search-card {
    /* 4 cols: scope | query | filter | button */
    grid-template-areas: none; /* stop using named areas */
    grid-template-columns: minmax(130px, 170px) 1fr minmax(140px, 180px) auto;
    gap: 10px;
    transform: translateY(25%); /* card dips further */
  }

  .search-row {
    height: 15px;
  }

  /* Actions row inside auth forms: put primary + secondary side by side */
  .auth-actions {
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  .auth-actions .btn,
  .auth-actions [type="submit"] {
    width: auto;
    min-width: 10rem; /* keeps buttons usable */
  }

  .email-item {
    padding: 1rem 1.25rem;
  }
}