/*
 * 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.
 */

/* Self-hosted webfonts - files live in public/fonts/ so static error pages can reference them too */
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/caveat-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/caveat-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Leckerli One';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/leckerli-one-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/roboto-500-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Light/Dark mode variables */
:root {
  color-scheme: light dark;

  /* Accent color - default blue, can be overridden by user preference */
  --accent-color: #3288bd;
  /* Lighter variant for links in dark mode (readable on dark backgrounds) */
  --dark-link-color: color-mix(in srgb, var(--accent-color) 70%, white);
  /* Contrast color for text/icons on accent backgrounds (white or dark) */
  --accent-contrast: #ffffff;

  /* Light mode colors */
  --bg-color: #fafafc;
  --text-color: #333333;
  --border-color: #dddde0;
  --input-bg: #ffffff;
  --input-border: #ccccd0;
  --link-color: var(--accent-color);
  --button-bg: var(--accent-color);
  --button-text: var(--accent-contrast);
  --icon-color: var(--accent-color);
  --notice-bg: #d4edda;
  --notice-text: #155724;
  --alert-bg: #f8d7da;
  --alert-text: #721c24;
  --header-bg: #fafafc;
  --header-border: #e0e0e4;
  --dropdown-bg: #ffffff;
  --dropdown-shadow: rgba(0, 0, 0, 0.1);
  --hover-bg: #f5f5f8;
  --sidebar-bg: #f8f8fc;
  --sidebar-border: #e0e0e4;
  --sidebar-width: 250px;

  /* De-emphasised text. Three names are used across the codebase for the same
     idea; --text-muted is the canonical one and the other two are aliases.
     They resolve to `inherit` deliberately: the app grew ~570 `color:
     var(--text-muted)` declarations while these tokens were undefined, which
     the browser treats as invalid-at-computed-value-time and, for an inherited
     property like color, falls back to the parent's colour. Defining them as
     `inherit` reproduces that exactly, so the current appearance is preserved
     while the tokens become real. To introduce actual muting later, set a
     colour here (and per-theme below) and it takes effect everywhere at once.
     Colour-independent, so deliberately NOT repeated in the theme blocks.
     See docs/log/2026-09-10-muted-text-tokens.md */
  --text-muted: inherit;
  --muted-color: var(--text-muted);
  --text-secondary: var(--text-muted);

}

@media (prefers-color-scheme: dark) {
  :root {
    /* Dark mode colors */
    --bg-color: #1a1a1e;
    --text-color: #e0e0e0;
    --border-color: #444448;
    --input-bg: #2a2a2e;
    --input-border: #555559;
    --link-color: var(--dark-link-color);
    --button-bg: var(--accent-color);
    --button-text: var(--accent-contrast);
    --icon-color: var(--accent-color);
    --notice-bg: #2d5a3d;
    --notice-text: #a3d9b1;
    --alert-bg: #5a2d2d;
    --alert-text: #f1b3b6;
    --header-bg: #24242a;
    --header-border: #333338;
    --dropdown-bg: #2a2a2e;
    --dropdown-shadow: rgba(0, 0, 0, 0.5);
    --hover-bg: #333338;
    --sidebar-bg: #1e1e24;
    --sidebar-border: #333338;
    --sidebar-width: 250px;
  
  }
}

/* Manual theme overrides */
html[data-theme="light"] {
  color-scheme: light;
  --bg-color: #fafafc;
  --text-color: #333333;
  --border-color: #dddde0;
  --input-bg: #ffffff;
  --input-border: #ccccd0;
  --link-color: var(--accent-color);
  --button-bg: var(--accent-color);
  --button-text: var(--accent-contrast);
  --icon-color: var(--accent-color);
  --notice-bg: #d4edda;
  --notice-text: #155724;
  --alert-bg: #f8d7da;
  --alert-text: #721c24;
  --header-bg: #fafafc;
  --header-border: #e0e0e4;
  --dropdown-bg: #ffffff;
  --dropdown-shadow: rgba(0, 0, 0, 0.1);
  --hover-bg: #f5f5f8;
  --sidebar-bg: #f8f8fc;
  --sidebar-border: #e0e0e4;
  --sidebar-width: 250px;

}

html[data-theme="dark"] {
  color-scheme: dark;
  --bg-color: #1a1a1e;
  --text-color: #e0e0e0;
  --border-color: #444448;
  --input-bg: #2a2a2e;
  --input-border: #555559;
  --link-color: var(--dark-link-color);
  --button-bg: var(--accent-color);
  --button-text: var(--accent-contrast);
  --icon-color: var(--accent-color);
  --notice-bg: #2d5a3d;
  --notice-text: #a3d9b1;
  --alert-bg: #5a2d2d;
  --alert-text: #f1b3b6;
  --header-bg: #24242a;
  --header-border: #333338;
  --dropdown-bg: #2a2a2e;
  --dropdown-shadow: rgba(0, 0, 0, 0.5);
  --hover-bg: #333338;
  --sidebar-bg: #1e1e24;
  --sidebar-border: #333338;
  --sidebar-width: 250px;

}

/* De-emphasised text as a class, for markup that reaches for one instead of an
   inline style. Both were in use while undefined, so they rendered as nothing;
   they now route through the same tokens as the inline `color: var(--text-muted)`
   declarations and change appearance in exactly the same place. */
.text-muted {
  color: var(--text-muted);
}

.text-secondary {
  color: var(--text-secondary);
}

/* Base styles */
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background-color: var(--bg-color);
  color: var(--text-color);
  margin: 0;
  padding: 0;
  line-height: 1.6;
  /* Subtle gradient background for all pages */
  background: linear-gradient(135deg, #d8d8e4 0%, #e8e8f0 25%, #e0e0ec 50%, #eaeaf2 75%, #dcdce8 100%);
  background-attachment: fixed;
}

html[data-theme="dark"] body {
  background: linear-gradient(135deg, #1a1a22 0%, #1e1e28 25%, #22222a 50%, #1a1a1e 75%, #1c1c24 100%);
  background-attachment: fixed;
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) body {
    background: linear-gradient(135deg, #1a1a22 0%, #1e1e28 25%, #22222a 50%, #1a1a1e 75%, #1c1c24 100%);
    background-attachment: fixed;
  }
}

h1 {
  font-size: 1.75rem;
}

/* Container for centered content */
.container {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
}

/* Authentication pages (login, signup, forgot password) */
.auth-page-wrapper {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 80px);
  margin: -20px;
}

.auth-page-wrapper .auth-page {
  min-height: auto;
  margin: 0;
}

.auth-page {
  min-height: calc(100vh - 80px);
  display: flex;
  flex: 1;
  align-items: flex-start;
  justify-content: center;
  padding: 60px 20px 20px 20px;
  margin: -20px;
}

.auth-footer {
  text-align: center;
  padding: 20px;
  border-top: 1px solid var(--border-color);
  color: var(--text-color);
}

.auth-footer p {
  margin: 8px 0;
  font-size: 0.95rem;
  opacity: 0.8;
}

.auth-footer a {
  color: var(--link-color);
  text-decoration: none;
}

.auth-footer a:hover {
  text-decoration: underline;
}

.auth-card {
  width: 100%;
  max-width: 400px;
  padding: 2rem;
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

html[data-theme="dark"] .auth-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .auth-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  }
}

.auth-card h2 {
  margin: 0 0 1.5rem 0;
  text-align: center;
}

.auth-card .field {
  margin-bottom: 1rem;
}

.auth-card .actions {
  margin-top: 1.5rem;
}

.auth-card .actions input[type="submit"] {
  width: 100%;
}

.auth-card a {
  color: var(--link-color);
}

html[data-theme="dark"] .auth-card a {
  color: #5aa3ff;
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .auth-card a {
    color: #5aa3ff;
  }
}

/* --- Auth page conversion styling (signup / login) --- */
.auth-title {
  margin: 0 0 0.5rem 0;
  text-align: center;
}

.auth-subtitle {
  margin: 0 0 1.25rem 0;
  text-align: center;
  font-size: 0.95rem;
  opacity: 0.8;
}

.auth-trust {
  margin: 0 0 1.5rem 0;
  text-align: center;
}

.auth-trust-badges {
  margin: 0;
  font-size: 0.85rem;
  opacity: 0.75;
}

/* "or sign up with email" divider with a rule on each side */
.auth-divider {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 1.25rem 0;
  font-size: 0.85rem;
  opacity: 0.7;
}

.auth-divider::before,
.auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border-color);
}

.field-hint {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.8rem;
  font-style: italic;
  opacity: 0.7;
}

/* Password input with an inline show/hide toggle */
.password-field {
  position: relative;
}

.password-field input {
  width: 100%;
  padding-right: 2.75rem;
}

.password-toggle {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 2.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--text-color);
  opacity: 0.6;
}

.password-toggle:hover {
  opacity: 1;
}

.password-toggle .btn-icon-svg {
  width: 20px;
  height: 20px;
}

.auth-alt-action {
  margin-top: 1.5rem;
  padding-top: 1rem;
  text-align: center;
  border-top: 1px solid var(--border-color);
  font-size: 0.95rem;
}

@media (max-width: 768px) {
  .auth-card {
    padding: 1.5rem;
  }

  /* Comfortable tap targets on mobile */
  .auth-card .field input,
  .auth-card .btn {
    min-height: 44px;
  }
}

/* Ghost "Log in" affordance in the public-facing top bars (always dark).
   Quieter than a filled button so it doesn't compete with the hero CTA.
   Shared across the landing, public, about, help, faq and legal headers. */
.landing-nav .header-login-btn,
.public-nav .header-login-btn,
.about-nav .header-login-btn,
.help-nav .header-login-btn,
.info-nav .header-login-btn,
.top-bar-actions .header-login-btn {
  padding: 6px 16px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 6px;
  color: #ffffff;
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.landing-nav .header-login-btn:hover,
.public-nav .header-login-btn:hover,
.about-nav .header-login-btn:hover,
.help-nav .header-login-btn:hover,
.info-nav .header-login-btn:hover,
.top-bar-actions .header-login-btn:hover {
  opacity: 1;
  background-color: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.7);
}

/* Help icon link beside the logged-out header Log in button */
.top-bar-actions .top-bar-help-link {
  display: inline-flex;
  align-items: center;
  color: var(--text-color);
}

.top-bar-actions .top-bar-help-link:hover {
  opacity: 0.7;
}

.top-bar-actions .top-bar-help-link svg {
  width: 24px;
  height: 24px;
}

.auth-links {
  margin-top: 1rem;
  text-align: center;
  font-size: 0.9em;
}

.auth-signup-prompt {
  margin-top: 1.5rem;
  padding: 1rem;
  text-align: center;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.05);
}

html[data-theme="dark"] .auth-signup-prompt {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .auth-signup-prompt {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
  }
}

.auth-signup-prompt span {
  color: var(--text-secondary);
  margin-right: 0.5rem;
}

/* Flash messages */
.notice, .alert {
  padding: 15px;
  margin-bottom: 20px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  transition: opacity 0.3s, transform 0.3s;
}

.notice {
  background-color: var(--notice-bg);
  color: var(--notice-text);
}

.alert {
  background-color: var(--alert-bg);
  color: var(--alert-text);
}

.flash-content {
  flex: 1;
}

.flash-dismiss {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: background-color 0.2s, opacity 0.2s;
  flex-shrink: 0;
}

.flash-dismiss:hover {
  opacity: 0.7;
}

.flash-dismiss svg,
.flash-dismiss img {
  width: 20px;
  height: 20px;
  color: currentColor;
}

/* Links */
a {
  color: var(--link-color);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* Forms */
form {
  margin: 20px 0;
}

.field {
  margin-bottom: 15px;
}

label {
  display: block;
  margin-bottom: 5px;
  font-weight: 500;
}

input[type="email"],
input[type="password"],
input[type="text"],
input[type="number"],
input[type="date"],
input[type="datetime-local"],
textarea,
select {
  width: 100%;
  padding: 10px;
  border: 1px solid var(--input-border);
  border-radius: 4px;
  background-color: var(--input-bg);
  color: var(--text-color);
  font-size: 16px;
  box-sizing: border-box;
}

input[type="email"]:focus,
input[type="password"]:focus,
input[type="text"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
input[type="datetime-local"]:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--button-bg);
}

select option {
  background-color: var(--input-bg);
  color: var(--text-color);
}

input[type="checkbox"] {
  margin-right: 5px;
}

/* Star Rating */
.star-rating {
  display: inline-flex;
  gap: 4px;
}

.star-rating-star {
  font-size: 28px;
  cursor: pointer;
  color: var(--text-muted);
  transition: color 0.15s;
  user-select: none;
  line-height: 1;
}

.star-rating-star:hover,
.star-rating-star.active {
  color: #f5a623;
}

/* Buttons */
input[type="submit"],
button,
.button {
  background-color: var(--button-bg);
  color: var(--button-text);
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  text-decoration: none;
  display: inline-block;
}

input[type="submit"]:hover,
button:hover,
.button:hover {
  opacity: 0.9;
  text-decoration: none;
}

/* Top Navigation Bar */
.top-bar {
  background-color: var(--header-bg);
  border-bottom: 1px solid var(--header-border);
  position: sticky;
  top: 0;
  z-index: 100;
}

.top-bar-content {
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 60px;
}

.top-bar-left {
  display: flex;
  align-items: center;
  gap: 15px;
}

.site-branding {
  display: flex;
  align-items: center;
}

.site-name {
  font-family: 'Leckerli One', cursive;
  font-size: 2rem;
  font-weight: 400;
  color: var(--text-color);
  text-decoration: none;
}

.site-name:hover {
  text-decoration: none;
  opacity: 0.8;
}

.site-name-with-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.site-logo {
  width: 40px;
  height: 40px;
}

/* Navigation Menu */
.nav-menu {
  position: relative;
}

.nav-menu-toggle {
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  transition: background-color 0.2s;
}

.nav-menu-toggle:hover {
  background-color: var(--hover-bg);
}

.nav-menu-icon {
  width: 28px;
  height: 28px;
  color: var(--icon-color);
}

/* User Menu */
.user-menu {
  position: relative;
}

.user-menu-toggle {
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: 20px;
  transition: background-color 0.2s;
}

.user-menu-toggle:hover {
  background-color: var(--hover-bg);
}

.username-display {
  color: var(--text-color);
  font-size: 0.95rem;
  font-weight: 500;
}

.user-icon {
  width: 28px;
  height: 28px;
  color: var(--icon-color);
}

.user-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
}

.user-avatar-placeholder {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: bold;
  font-size: 0.85em;
}

/* Avatar wrapper for notification dot overlay */
.avatar-wrapper {
  position: relative;
  display: inline-flex;
}

.changelog-notification-dot {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 10px;
  height: 10px;
  background-color: #e53e3e;
  border-radius: 50%;
  border: 2px solid var(--header-bg);
  animation: changelog-dot-pulse 2s ease-in-out 3;
}

@keyframes changelog-dot-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.3); }
}

.changelog-new-badge {
  display: inline-block;
  background-color: #e53e3e;
  color: #ffffff;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 8px;
  margin-left: 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  vertical-align: middle;
  line-height: 1.4;
}

/* Dropdown Menu */
.dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  background-color: var(--dropdown-bg);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  box-shadow: 0 4px 12px var(--dropdown-shadow);
  min-width: 200px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: opacity 0.2s, transform 0.2s, visibility 0.2s;
  overflow: hidden;
}

.nav-menu .dropdown-menu {
  left: 0;
  right: auto;
  /* Tall menus scroll rather than run off the bottom of the screen */
  max-height: calc(100vh - 80px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--border-color) transparent;
}

/*
 * macOS hides overlay scrollbars until you scroll, which makes it look like a
 * long menu is simply cut off. Force a persistent scrollbar in WebKit/Blink.
 */
.nav-menu .dropdown-menu::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 10px;
}

.nav-menu .dropdown-menu::-webkit-scrollbar-track {
  background: transparent;
}

.nav-menu .dropdown-menu::-webkit-scrollbar-thumb {
  background-color: var(--border-color);
  border: 2px solid var(--dropdown-bg);
  border-radius: 5px;
}

.nav-menu .dropdown-menu::-webkit-scrollbar-thumb:hover {
  background-color: var(--text-color);
}

.user-menu .dropdown-menu {
  right: 0;
  left: auto;
}

.dropdown-menu.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.dropdown-item {
  display: block;
  width: 100%;
  padding: 8px 16px;
  text-align: left;
  background: none;
  border: none;
  color: var(--text-color);
  text-decoration: none;
  cursor: pointer;
  font-size: 0.95rem;
  transition: background-color 0.2s;
}

.dropdown-item:first-child {
  border-radius: 8px 8px 0 0;
}

.dropdown-item:last-child {
  border-radius: 0 0 8px 8px;
}

.dropdown-item:hover {
  background-color: var(--hover-bg);
  text-decoration: none;
}

.dropdown-item-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.dropdown-item-with-icon {
  display: flex;
  align-items: center;
  gap: 8px;
}

.dropdown-section {
  padding: 8px 0;
  border-top: 1px solid var(--border-color);
}

.dropdown-section:first-child {
  border-top: none;
}

.dropdown-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 8px 16px 4px;
  background: none;
  border: none;
  cursor: pointer;
  transition: background-color 0.2s;
}

.dropdown-section-header:hover {
  background-color: var(--hover-bg);
}

.dropdown-section-label {
  padding: 0;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-color);
  opacity: 0.6;
}

.collapsible-icon {
  width: 16px;
  height: 16px;
  color: var(--text-color);
  opacity: 0.6;
  transition: transform 0.2s ease;
  flex-shrink: 0;
}

.collapsible-content {
  overflow: hidden;
  transition: max-height 0.2s ease;
}

.collapsible--open .collapsible-icon {
  transform: rotate(180deg);
}

.dropdown-divider {
  height: 1px;
  background-color: var(--border-color);
  margin: 8px 0;
}

.band-selector {
  width: 100%;
  padding: 8px 12px;
  margin: 4px 12px;
  width: calc(100% - 24px);
  border: 1px solid var(--input-border);
  border-radius: 4px;
  background-color: var(--input-bg);
  color: var(--text-color);
  font-size: 0.9rem;
  cursor: pointer;
  transition: border-color 0.2s;
}

.band-selector:focus {
  outline: none;
  border-color: var(--accent-color);
}

.band-selector option {
  background-color: var(--input-bg);
  color: var(--text-color);
}

/* Modal Select - styled like band-selector */
.modal-select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--input-border);
  border-radius: 4px;
  background-color: var(--input-bg);
  color: var(--text-color);
  font-size: 0.95rem;
  cursor: pointer;
  transition: border-color 0.2s;
}

.modal-select:focus {
  outline: none;
  border-color: var(--accent-color);
}

.modal-select option {
  background-color: var(--input-bg);
  color: var(--text-color);
}

/* Main Content */
.main-content {
  padding: 20px;
}

/* Preferences Page */
/* Generic glass card - reusable for forms and content */
.glass-card {
  padding: 1rem;
  margin: 30px 0;
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

html[data-theme="dark"] .glass-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .glass-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  }
}

.glass-card-title {
  margin: 0 0 1rem 0;
  font-size: 1.5rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--border-color);
}

.glass-card-title-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin: 0 0 1rem 0;
  padding: 0 0 0.75rem 0;
  font-size: 1.5rem;
  font-weight: bold;
  font-family: inherit;
  color: inherit;
  background: none;
  border: none;
  border-bottom: 1px solid var(--border-color);
  cursor: pointer;
  transition: border-color 0.2s;
}

.glass-card-title-toggle:hover {
  opacity: 0.8;
}

.glass-card:not(.collapsible--open) .glass-card-title-toggle {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom-color: transparent;
}

/* YouTube video selector list */
.youtube-video-item {
  display: block;
  padding: 0.5rem 0.75rem;
  color: var(--link-color);
  text-decoration: none;
}

.youtube-video-item.active {
  font-weight: 600;
}

/* Preferences section styling within glass cards */
.glass-card .preferences-section {
  margin: 0 0 2rem 0;
}

.glass-card .preferences-section:last-child {
  margin-bottom: 0;
}

.glass-card .preferences-section h3 {
  margin-bottom: 10px;
  font-size: 1.1rem;
}

.preferences-section {
  margin: 30px 0;
}

.preferences-section h2 {
  margin-bottom: 10px;
  font-size: 1.3rem;
}

.preference-description {
  color: var(--text-color);
  opacity: 0.8;
  margin-bottom: 20px;
}

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

.theme-option {
  display: flex;
  align-items: center;
}

.theme-option input[type="radio"] {
  margin-right: 12px;
  width: 20px;
  height: 20px;
  cursor: pointer;
}

.theme-option label {
  cursor: pointer;
  display: block;
  flex: 1;
  margin: 0;
}

.theme-label {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  transition: background-color 0.2s, border-color 0.2s;
}

.theme-option:has(input[type="radio"]:checked) .theme-label {
  background-color: var(--hover-bg);
  border-color: var(--button-bg);
}

.theme-label:hover {
  background-color: var(--hover-bg);
}

.theme-icon {
  width: 24px;
  height: 24px;
  color: var(--icon-color);
}

.theme-note {
  margin-top: 15px;
  font-size: 0.9rem;
  color: var(--text-color);
  opacity: 0.7;
}

/* Notification Preferences */
.notification-options {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.notification-option {
  display: flex;
  align-items: flex-start;
}

.notification-option label {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
  margin: 0;
  width: 100%;
}

.notification-option input[type="checkbox"] {
  margin-top: 2px;
  cursor: pointer;
}

.notification-label {
  flex: 1;
}

.notification-description {
  font-size: 0.9em;
  color: var(--text-color);
  opacity: 0.7;
}

/* Accent Color Options */
.color-options {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  max-width: 400px;
}

.color-option {
  display: flex;
  align-items: center;
  justify-content: center;
}

.color-option input[type="radio"] {
  display: none;
}

.color-option label {
  cursor: pointer;
  display: block;
  margin: 0;
  width: 100%;
}

.color-swatch {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 8px;
  border: 3px solid var(--border-color);
  transition: border-color 0.2s, transform 0.2s;
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.color-swatch:hover {
  transform: scale(1.05);
}

.color-option:has(input[type="radio"]:checked) .color-swatch {
  border-color: var(--accent-color);
  border-width: 4px;
}

.color-option:has(input[type="radio"]:checked) .color-swatch::after {
  content: "✓";
  color: var(--swatch-contrast, white);
  font-size: 24px;
  font-weight: bold;
  text-shadow: 0 0 3px rgba(0, 0, 0, 0.3), 0 0 6px rgba(0, 0, 0, 0.2);
}


/* Mobile responsive */
@media (max-width: 768px) {
  .top-bar-content {
    padding: 0 15px;
  }

  .site-name {
    font-size: 1.25rem;
  }

  .site-logo {
    width: 30px;
    height: 30px;
  }

  .main-content {
    padding: 15px;
  }

  .container {
    padding: 10px;
  }

  input[type="email"],
  input[type="password"],
  input[type="text"] {
    font-size: 16px; /* Prevents zoom on iOS */
  }

  .nav-menu .dropdown-menu {
    left: -8px;
  }

  .user-menu .dropdown-menu {
    right: -8px;
  }

  .theme-options {
    gap: 10px;
  }

  .theme-label {
    padding: 10px;
  }

  .username-display {
    display: none;
  }

  .top-bar-left {
    gap: 10px;
  }
}


/* Admin Pages */
.users-section {
  margin-top: 20px;
}

.section-description {
  color: var(--text-color);
  opacity: 0.8;
  margin-bottom: 20px;
}

.users-table-container {
  overflow-x: auto;
  border-radius: 8px;
  border: 1px solid var(--border-color);
}

.users-table {
  width: 100%;
  border-collapse: collapse;
  background-color: var(--bg-color);
}

.users-table thead {
  background-color: var(--sidebar-bg);
  border-bottom: 2px solid var(--border-color);
}

.users-table th,
.users-table td {
  padding: 12px 15px;
  text-align: left;
  border-bottom: 1px solid var(--border-color);
}

.users-table th {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--text-color);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Sortable table headers */
.sortable-header {
  color: var(--text-color);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  transition: color 0.2s;
}

.sortable-header:hover {
  color: var(--accent-color);
  text-decoration: none;
}

.sortable-header.active {
  color: var(--accent-color);
}

.users-table tbody tr:hover {
  background-color: var(--hover-bg);
}

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

.users-table td.actions {
  white-space: nowrap;
}

/* Small status pills (e.g. email verified / profile complete in admin tables) */
.status-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 500;
  white-space: nowrap;
  vertical-align: middle;
}

.status-badge-ok {
  background-color: var(--notice-bg);
  color: var(--notice-text);
}

.status-badge-warn {
  background-color: var(--alert-bg);
  color: var(--alert-text);
}

.users-table td.actions form {
  display: inline-block;
  margin: 0;
}

.users-table .btn {
  padding: 6px 12px;
  font-size: 0.85rem;
  margin-right: 5px;
  line-height: 1.5;
  vertical-align: middle;
  box-sizing: border-box;
}

/* Button styles */
.btn {
  display: inline-block;
  padding: 10px 20px;
  background-color: var(--button-bg);
  color: var(--button-text);
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  text-decoration: none;
  transition: all 0.2s ease;
  font-family: inherit;
  line-height: 1.5;
  vertical-align: middle;
  box-sizing: border-box;
  text-align: center;
  position: relative;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 50%;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0));
  pointer-events: none;
  border-radius: 4px 4px 0 0;
}

.btn:hover {
  opacity: 0.95;
  text-decoration: none;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.btn-with-icon {
  padding-left: 12px;
  padding-right: 12px;
}

.btn:active {
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08), inset 0 1px 1px rgba(0, 0, 0, 0.05);
}

.btn-sm {
  padding: 6px 12px;
  font-size: 0.85rem;
}

.btn-xs {
  padding: 4px 8px;
  font-size: 0.8rem;
}

.btn-secondary {
  background-color: var(--input-border);
  color: var(--text-color);
}

.btn-warning {
  background-color: #f46d43;
  color: white;
}

.btn-warning:hover {
  background-color: #d95f3a;
}

.btn-danger,
.btn-danger:enabled {
  background-color: #dc3545 !important;
  color: white !important;
}

.btn-danger:hover:enabled {
  background-color: #c82333 !important;
}

.btn-danger:disabled {
  background-color: #dc3545 !important;
  color: white !important;
  opacity: 0.6;
  cursor: not-allowed;
}

.btn-success {
  background-color: #28a745;
  color: white;
}

.btn-success:hover {
  background-color: #218838;
}

.btn-glass {
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  color: var(--text-color);
}

.btn-glass:hover {
  background: rgba(255, 255, 255, 0.7);
}

html[data-theme="dark"] .btn-glass {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

html[data-theme="dark"] .btn-glass:hover {
  background: rgba(255, 255, 255, 0.08);
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .btn-glass {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  }

  html:not([data-theme="light"]) .btn-glass:hover {
    background: rgba(255, 255, 255, 0.08);
  }
}

/* Google Sign-In button per https://developers.google.com/identity/branding-guidelines */
.btn-google {
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  -webkit-appearance: none;
  background-color: #ffffff;
  background-image: none;
  border: 1px solid #747775;
  border-radius: 4px;
  box-sizing: border-box;
  color: #1f1f1f;
  cursor: pointer;
  font-family: 'Roboto', arial, sans-serif;
  font-size: 14px;
  height: 40px;
  letter-spacing: 0.25px;
  outline: none;
  overflow: hidden;
  padding: 0 12px;
  position: relative;
  text-align: center;
  transition: background-color .218s, border-color .218s, box-shadow .218s;
  vertical-align: middle;
  white-space: nowrap;
  width: auto;
  max-width: 400px;
  min-width: min-content;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  box-shadow: none;
}

.btn-google::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  transition: opacity .218s;
}

.btn-google:not(:disabled):hover {
  box-shadow: 0 1px 2px 0 rgba(60, 64, 67, .30), 0 1px 3px 1px rgba(60, 64, 67, .15);
}

.btn-google:not(:disabled):hover::before {
  background-color: #303030;
  opacity: 0.08;
}

.btn-google:not(:disabled):active::before,
.btn-google:not(:disabled):focus::before {
  background-color: #303030;
  opacity: 0.12;
}

.btn-google-icon {
  height: 20px;
  margin-right: 10px;
  min-width: 20px;
  width: 20px;
  flex-shrink: 0;
}

html[data-theme="dark"] .btn-google {
  background-color: #131314;
  color: #e3e3e3;
  border-color: #8e918f;
}

html[data-theme="dark"] .btn-google:not(:disabled):hover::before,
html[data-theme="dark"] .btn-google:not(:disabled):active::before,
html[data-theme="dark"] .btn-google:not(:disabled):focus::before {
  background-color: white;
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .btn-google {
    background-color: #131314;
    color: #e3e3e3;
    border-color: #8e918f;
  }

  html:not([data-theme="light"]) .btn-google:not(:disabled):hover::before,
  html:not([data-theme="light"]) .btn-google:not(:disabled):active::before,
  html:not([data-theme="light"]) .btn-google:not(:disabled):focus::before {
    background-color: white;
  }
}

.btn-icon {
  padding: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.btn-icon-svg {
  width: 24px;
  height: 24px;
  color: currentColor;
  display: block;
}

.btn-sm.btn-icon {
  padding: 6px;
}

.btn-sm.btn-icon .btn-icon-svg {
  width: 20px;
  height: 20px;
}

.btn-xs.btn-icon {
  padding: 4px;
}

.btn-xs.btn-icon .btn-icon-svg {
  width: 19px;
  height: 19px;
}

/* User details page */
.user-details {
  background-color: var(--sidebar-bg);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 20px;
  margin: 20px 0;
}

.detail-group {
  margin-bottom: 20px;
}

.detail-group:last-child {
  margin-bottom: 0;
}

.detail-group label {
  font-weight: 600;
  color: var(--text-color);
  opacity: 0.8;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 5px;
}

.detail-group p {
  margin: 5px 0 0 0;
  font-size: 1rem;
  color: var(--text-color);
}

/* Actions */
.actions {
  margin-top: 30px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.actions form {
  display: inline-block;
  margin: 0;
}

.actions .btn {
  line-height: 1.5;
  vertical-align: middle;
  box-sizing: border-box;
}

/* Error messages */
.error-messages {
  background-color: var(--alert-bg);
  color: var(--alert-text);
  padding: 15px;
  border-radius: 8px;
  margin-bottom: 20px;
}

.error-messages h2 {
  margin-top: 0;
  font-size: 1.1rem;
}

.error-messages ul {
  margin: 10px 0 0 20px;
}

/*
 * Middle width tier, between the 600px default and .wide.
 *
 * The default suits a column of prose, and it is too tight for an editing
 * surface: a form with a label/input pair, or the comment composer with its
 * chip row and footer, gets squashed on a desktop screen for no reason. Nothing
 * changes on mobile - max-width does not force a width, so a narrow viewport
 * still fills it and picks up the 10px padding from the 768px query above.
 *
 * Currently on the discussion pages only. Worth spreading to the other editing
 * surfaces if it reads well there.
 */
.container.medium {
  max-width: 800px;
}

/* Wide container for admin pages */
.container.wide {
  max-width: 1200px;
}

/* Full-width container with minimal side padding */
.container.full-width {
  max-width: none;
  padding-left: 1rem;
  padding-right: 1rem;
}

/* Mobile responsiveness for tables */
@media (max-width: 768px) {
  .users-table-container {
    overflow-x: scroll;
  }

  .users-table {
    min-width: 600px;
  }

  .actions {
    flex-direction: column;
  }

  /* button_to wraps its button in a form, so the form must stretch too
     or the 100% width button only fills the shrink-wrapped form */
  .actions form {
    display: block;
    width: 100%;
  }

  .actions .btn {
    width: 100%;
  }
}

/* Avatar Upload and Cropping */
.avatar-section {
  margin: 20px 0;
}

.current-avatar {
  margin-bottom: 20px;
}

.avatar-preview-large {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--border-color);
}

.avatar-preview-small {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--border-color);
  margin-right: 10px;
}

.cropper-container {
  margin: 20px 0;
  max-width: 600px;
}

.cropper-image {
  max-width: 100%;
  display: block;
}

.cropper-controls {
  display: flex;
  gap: 10px;
  margin-top: 15px;
  flex-wrap: wrap;
}

.avatar-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 15px;
}

.hidden {
  display: none !important;
}

/* Cropper.js styles */
.cropper-container {
  direction: ltr;
  font-size: 0;
  line-height: 0;
  position: relative;
  touch-action: none;
  user-select: none;
}

.cropper-container img {
  display: block;
  height: 100%;
  image-orientation: 0deg;
  max-height: none !important;
  max-width: none !important;
  min-height: 0 !important;
  min-width: 0 !important;
  width: 100%;
}

.cropper-wrap-box,
.cropper-canvas,
.cropper-drag-box,
.cropper-crop-box,
.cropper-modal {
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

.cropper-wrap-box,
.cropper-canvas {
  overflow: hidden;
}

.cropper-drag-box {
  background-color: #fff;
  opacity: 0;
}

.cropper-modal {
  background-color: #000;
  opacity: 0.5;
}

.cropper-view-box {
  display: block;
  height: 100%;
  outline: 1px solid var(--button-bg);
  outline-color: rgba(51, 153, 255, 0.75);
  overflow: hidden;
  width: 100%;
}

.cropper-dashed {
  border: 0 dashed #eee;
  display: block;
  opacity: 0.5;
  position: absolute;
}

.cropper-dashed.dashed-h {
  border-bottom-width: 1px;
  border-top-width: 1px;
  height: calc(100% / 3);
  left: 0;
  top: calc(100% / 3);
  width: 100%;
}

.cropper-dashed.dashed-v {
  border-left-width: 1px;
  border-right-width: 1px;
  height: 100%;
  left: calc(100% / 3);
  top: 0;
  width: calc(100% / 3);
}

.cropper-center {
  display: block;
  height: 0;
  left: 50%;
  opacity: 0.75;
  position: absolute;
  top: 50%;
  width: 0;
}

.cropper-center::before,
.cropper-center::after {
  background-color: #eee;
  content: ' ';
  display: block;
  position: absolute;
}

.cropper-center::before {
  height: 1px;
  left: -3px;
  top: 0;
  width: 7px;
}

.cropper-center::after {
  height: 7px;
  left: 0;
  top: -3px;
  width: 1px;
}

.cropper-face,
.cropper-line,
.cropper-point {
  display: block;
  height: 100%;
  opacity: 0.1;
  position: absolute;
  width: 100%;
}

.cropper-face {
  background-color: #fff;
  left: 0;
  top: 0;
}

.cropper-line {
  background-color: var(--button-bg);
}

.cropper-line.line-e {
  cursor: ew-resize;
  right: -3px;
  top: 0;
  width: 5px;
}

.cropper-line.line-n {
  cursor: ns-resize;
  height: 5px;
  left: 0;
  top: -3px;
}

.cropper-line.line-w {
  cursor: ew-resize;
  left: -3px;
  top: 0;
  width: 5px;
}

.cropper-line.line-s {
  bottom: -3px;
  cursor: ns-resize;
  height: 5px;
  left: 0;
}

.cropper-point {
  background-color: var(--button-bg);
  height: 5px;
  opacity: 0.75;
  width: 5px;
}

.cropper-point.point-e {
  cursor: ew-resize;
  margin-top: -3px;
  right: -3px;
  top: 50%;
}

.cropper-point.point-n {
  cursor: ns-resize;
  left: 50%;
  margin-left: -3px;
  top: -3px;
}

.cropper-point.point-w {
  cursor: ew-resize;
  left: -3px;
  margin-top: -3px;
  top: 50%;
}

.cropper-point.point-s {
  bottom: -3px;
  cursor: s-resize;
  left: 50%;
  margin-left: -3px;
}

.cropper-point.point-ne {
  cursor: nesw-resize;
  right: -3px;
  top: -3px;
}

.cropper-point.point-nw {
  cursor: nwse-resize;
  left: -3px;
  top: -3px;
}

.cropper-point.point-sw {
  bottom: -3px;
  cursor: nesw-resize;
  left: -3px;
}

.cropper-point.point-se {
  bottom: -3px;
  cursor: nwse-resize;
  right: -3px;
}

.cropper-invisible {
  opacity: 0;
}

.cropper-bg {
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC');
}

.cropper-hide {
  display: block;
  height: 0;
  position: absolute;
  width: 0;
}

.cropper-hidden {
  display: none !important;
}

.cropper-move {
  cursor: move;
}

.cropper-crop {
  cursor: crosshair;
}

.cropper-disabled .cropper-drag-box,
.cropper-disabled .cropper-face,
.cropper-disabled .cropper-line,
.cropper-disabled .cropper-point {
  cursor: not-allowed;
}

/* Mobile responsive for avatar */
@media (max-width: 768px) {
  .avatar-preview-large {
    width: 120px;
    height: 120px;
  }

  .cropper-container {
    max-width: 100%;
  }

  .cropper-controls {
    flex-direction: column;
  }

  .cropper-controls .btn {
    width: 100%;
  }

  .avatar-actions {
    flex-direction: column;
  }

  .avatar-actions .btn {
    width: 100%;
  }
}

/* Messages Styles */
.top-bar-actions {
  display: flex;
  align-items: center;
  gap: 15px;
}

.messages-icon-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 20px;
  transition: background-color 0.2s;
}

.messages-icon-link:hover {
  background-color: var(--hover-bg);
  text-decoration: none;
}

.messages-icon {
  width: 24px;
  height: 24px;
  color: var(--icon-color);
}

.unread-count {
  background-color: var(--accent-color);
  color: var(--accent-contrast);
  font-size: 0.85rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 12px;
  min-width: 20px;
  text-align: center;
  line-height: 1.4;
}

.admin-icon-link {
  display: flex;
  align-items: center;
  padding: 8px;
  border-radius: 50%;
  transition: background-color 0.2s;
}

.admin-icon-link:hover {
  background-color: var(--hover-bg);
  text-decoration: none;
}

.admin-icon {
  width: 24px;
  height: 24px;
  color: var(--icon-color);
}

.messages-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 30px;
  gap: 15px;
}

.messages-header h1 {
  margin: 0;
}

.unread-badge {
  background-color: var(--notice-bg);
  color: var(--notice-text);
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 0.9rem;
  font-weight: 500;
  vertical-align: middle;
}

.messages-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  flex-wrap: wrap;
  gap: 15px;
}

.toolbar-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.toolbar-left label {
  margin: 0;
  cursor: pointer;
  font-weight: 500;
}

.toolbar-right {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.messages-list {
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  overflow: hidden;
}

html[data-theme="dark"] .messages-list {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .messages-list {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  }
}

.message-item {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 15px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  background-color: transparent;
  transition: background-color 0.2s;
}

html[data-theme="dark"] .message-item {
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .message-item {
    border-bottom-color: rgba(255, 255, 255, 0.08);
  }
}

.message-item:last-child {
  border-bottom: none;
}

.message-item:hover {
  background-color: rgba(255, 255, 255, 0.3);
}

html[data-theme="dark"] .message-item:hover {
  background-color: rgba(255, 255, 255, 0.05);
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .message-item:hover {
    background-color: rgba(255, 255, 255, 0.05);
  }
}

.message-item.unread {
  background-color: rgba(255, 255, 255, 0.2);
}

html[data-theme="dark"] .message-item.unread {
  background-color: rgba(255, 255, 255, 0.03);
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .message-item.unread {
    background-color: rgba(255, 255, 255, 0.03);
  }
}

.message-checkbox-wrapper {
  flex-shrink: 0;
}

.message-checkbox {
  width: 18px;
  height: 18px;
  cursor: pointer;
}

.message-content {
  flex: 1;
  min-width: 0;
}

.message-link {
  display: block;
  color: var(--text-color);
  text-decoration: none;
}

.message-link:hover {
  text-decoration: none;
}

.message-subject {
  font-weight: 500;
  font-size: 1rem;
  margin-bottom: 5px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.unread-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  background-color: var(--accent-color);
  border-radius: 50%;
  flex-shrink: 0;
}

.message-meta {
  font-size: 0.85rem;
  color: var(--text-color);
  opacity: 0.7;
}

.message-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
  flex-wrap: wrap;
  align-items: center;
}

.message-actions form {
  display: inline-block;
  margin: 0;
}

.message-actions .btn {
  white-space: nowrap;
}

.message-actions .vote-buttons {
  display: flex;
  gap: 4px;
  align-items: center;
}

.message-actions .admin-buttons {
  display: flex;
  gap: 4px;
  align-items: center;
  margin-left: auto;
}

.empty-state {
  text-align: center;
  padding: 80px 20px;
}

.empty-state-icon {
  width: 80px;
  height: 80px;
  color: var(--icon-color);
  opacity: 0.5;
  margin: 0 auto 20px;
}

.empty-state h2 {
  margin: 0 0 10px 0;
  font-size: 1.5rem;
}

.empty-state p {
  color: var(--text-color);
  opacity: 0.7;
  font-size: 1rem;
}

/* Getting Started Cards */
.getting-started-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
  max-width: 700px;
  margin: 0 auto;
}

.getting-started-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 1.5rem 1rem;
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  text-decoration: none;
  color: var(--text-color);
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

.getting-started-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  border-color: var(--accent-color);
}

.getting-started-card-icon {
  width: 40px;
  height: 40px;
  color: var(--accent-color);
}

.getting-started-card-title {
  font-weight: 600;
  font-size: 1rem;
}

.getting-started-card-desc {
  font-size: 0.85rem;
  color: var(--muted-color);
}

html[data-theme="dark"] .getting-started-card {
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

html[data-theme="dark"] .getting-started-card:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
  border-color: var(--accent-color);
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .getting-started-card {
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  }

  html:not([data-theme="light"]) .getting-started-card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
    border-color: var(--accent-color);
  }
}

.message-navigation {
  margin-bottom: 20px;
}

.message-detail {
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  padding: 30px;
}

html[data-theme="dark"] .message-detail {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .message-detail {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  }
}

/* Set cards in setlist view */
.set-card {
  background: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

html[data-theme="dark"] .set-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .set-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  }
}

/* Analytics toggle button - sized to sit inline with the Songs/Duration text */
.btn-analytics-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 3px 9px;
  font-size: 0.8rem;
  line-height: 1.4;
}

.btn-analytics-toggle-svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

/* Analytics panel shown above the sets */
.analytics-panel {
  position: relative;
  background: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  padding: 1.25rem 1.5rem;
  margin-bottom: 2rem;
}

.analytics-panel-close {
  position: absolute;
  top: 12px;
  right: 12px;
  background: transparent;
  border: none;
  color: inherit;
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s;
  opacity: 0.7;
}

.analytics-panel-close:hover {
  background-color: rgba(0, 0, 0, 0.1);
  opacity: 1;
}

.analytics-panel-close svg {
  width: 20px;
  height: 20px;
}

html[data-theme="dark"] .analytics-panel {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .analytics-panel {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  }
}

.analytics-panel-header {
  margin-bottom: 1.25rem;
}

.analytics-panel-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  font-size: 1.25rem;
}

.analytics-panel-title-svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  color: var(--text-secondary);
}

.analytics-panel-subsection {
  margin-top: 1.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border-color);
}

.analytics-panel-subheading {
  margin: 0 0 1rem 0;
  font-size: 1rem;
  color: var(--text-secondary);
}

/* "Disk space used" style tag distribution bar */
.tag-distribution {
  margin-bottom: 1.25rem;
}

.tag-distribution:last-child {
  margin-bottom: 0;
}

.tag-distribution-title {
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.tag-distribution-empty {
  color: var(--text-secondary);
  font-size: 0.85rem;
  margin: 0;
}

.tag-distribution-bar {
  display: flex;
  width: 100%;
  height: 16px;
  border-radius: 9999px;
  overflow: hidden;
  background: var(--border-color);
}

.tag-distribution-segment {
  height: 100%;
  min-width: 2px;
  /* Subtle top-lit sheen layered over the inline background-color for a soft 3D look */
  background-image: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.35) 0%,
    rgba(255, 255, 255, 0.12) 45%,
    rgba(0, 0, 0, 0.06) 100%
  );
}

.tag-distribution-segment + .tag-distribution-segment {
  box-shadow: -1px 0 0 rgba(255, 255, 255, 0.35);
}

.tag-distribution-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  margin-top: 0.6rem;
}

.tag-distribution-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.8rem;
}

.tag-distribution-swatch {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  flex-shrink: 0;
}

.tag-distribution-legend-count {
  color: var(--text-secondary);
}

/* Song cards in setlist sets */
.song-card {
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 6px;
}

html[data-theme="dark"] .song-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

/* Custom field values on a song card, shown via the setlist Display Options modal.
   Wraps rather than scrolls: a band with several fields would otherwise push the
   card wider than the horizontal-layout column it sits in. */
.song-card-custom-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.75rem;
  margin-top: 0.25rem;
  font-size: 0.85em;
  color: var(--text-secondary);
}

.song-card-custom-field {
  display: inline-flex;
  align-items: baseline;
  gap: 0.25rem;
  min-width: 0;
}

.song-card-custom-field-name {
  font-weight: 600;
  color: var(--text-color);
  opacity: 0.75;
}

html[data-theme="dark"] .song-card a {
  color: #5aa3ff;
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .song-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
  }

  html:not([data-theme="light"]) .song-card a {
    color: #5aa3ff;
  }
}

/* Drop zone for dragging songs between sets */
.set-songs {
  min-height: 3rem;
  border-radius: 6px;
  transition: background-color 0.2s;
}

.set-songs-empty {
  pointer-events: none;
}

/* Setlist layout toggle - desktop only */
.setlist-layout-toggle {
  display: none;
}

@media (min-width: 769px) {
  .setlist-layout-toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }
}

/* Horizontal masonry layout for sets */
.setlist-sets--horizontal {
  column-count: 2;
  column-gap: 2rem;
}

.setlist-sets--horizontal .set-card {
  break-inside: avoid;
  margin-bottom: 2rem;
}

.message-detail.compact {
  padding: 15px 20px;
  margin-bottom: 15px;
}

.message-detail.compact h2 {
  margin: 0 0 10px 0;
  font-size: 1.1rem;
}

.message-header {
  margin-bottom: 30px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border-color);
}

.message-header h1 {
  margin: 0 0 15px 0;
  font-size: 1.8rem;
}

.message-meta-info {
  display: flex;
  align-items: center;
  gap: 20px;
  color: var(--text-color);
  opacity: 0.8;
  font-size: 0.9rem;
}

.message-body {
  margin-bottom: 30px;
  line-height: 1.8;
  color: var(--text-color);
}

.message-body h1,
.message-body h2,
.message-body h3,
.message-body h4,
.message-body h5,
.message-body h6 {
  margin-top: 1.5em;
  margin-bottom: 0.5em;
  color: var(--text-color);
}

.message-body h1 {
  font-size: 1.8rem;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 0.3em;
}

.message-body h2 {
  font-size: 1.5rem;
}

.message-body h3 {
  font-size: 1.3rem;
}

.message-body p {
  margin: 1em 0;
}

.message-body ul,
.message-body ol {
  margin: 1em 0;
  padding-left: 2em;
}

.message-body li {
  margin: 0.5em 0;
}

.message-body a {
  color: var(--link-color);
  text-decoration: underline;
}

.message-body code {
  background-color: var(--input-bg);
  border: 1px solid var(--border-color);
  padding: 2px 6px;
  border-radius: 4px;
  font-family: 'Courier New', monospace;
  font-size: 0.9em;
}

.message-body pre {
  background-color: var(--input-bg);
  border: 1px solid var(--border-color);
  padding: 15px;
  border-radius: 8px;
  overflow-x: auto;
  margin: 1em 0;
}

.message-body pre code {
  background: none;
  border: none;
  padding: 0;
}

.message-body blockquote {
  border-left: 4px solid var(--accent-color);
  padding-left: 1em;
  margin: 1em 0;
  color: var(--text-color);
  opacity: 0.8;
  font-style: italic;
}

.message-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 1em 0;
}

.message-body table th,
.message-body table td {
  padding: 10px;
  border: 1px solid var(--border-color);
  text-align: left;
}

.message-body table th {
  background-color: var(--sidebar-bg);
  font-weight: 600;
}

.message-body img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  margin: 1em 0;
}

.message-buttons {
  display: flex;
  gap: 10px;
  margin-bottom: 30px;
  flex-wrap: wrap;
}

.message-actions-footer {
  display: flex;
  gap: 10px;
  padding-top: 20px;
  border-top: 1px solid var(--border-color);
  flex-wrap: wrap;
}

.message-actions-footer form {
  display: inline-block;
  margin: 0;
}

/* Mobile responsive for messages header */
@media (max-width: 400px) {
  .messages-header {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Setlist header - stack on mobile */
@media (max-width: 768px) {
  .messages-header.setlist-header,
  .messages-header.poll-header,
  .messages-header.finances-header,
  .messages-header.custom-fields-header {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Finances report charts (Phase 11).
   Chart text is sized in SVG user units, so on a narrow screen the whole chart -
   labels included - scales down uniformly and the axis text becomes tiny. Below
   the mobile breakpoint we enlarge the font (still in user units, so it scales
   with the chart) to keep labels legible; desktop is left untouched. overflow is
   allowed to spill so the widened y-axis labels are not clipped at the left edge. */
@media (max-width: 600px) {
  .fr-chart {
    overflow: visible;
  }

  .fr-chart text {
    font-size: 20px;
  }

  /* The larger mobile font would crowd the date axis, so drop the secondary
     x-axis labels and keep only the ~4 evenly-spaced (plus first/last) ones. */
  .fr-chart .fr-x-secondary {
    display: none;
  }
}

/* Mobile responsive for messages */
@media (max-width: 768px) {
  .messages-toolbar {
    flex-direction: column;
    align-items: flex-start;
  }

  .toolbar-right {
    width: 100%;
  }

  .toolbar-right .btn {
    flex: 1;
  }

  .message-item {
    flex-wrap: wrap;
    gap: 10px;
  }

  .message-checkbox-wrapper {
    order: -1;
  }

  .message-content {
    order: 0;
    width: 100%;
  }

  .message-actions {
    order: 1;
    width: 100%;
    justify-content: space-between;
  }

  .message-detail {
    padding: 20px;
  }

  .message-header h1 {
    font-size: 1.5rem;
  }

  .message-buttons {
    flex-direction: column;
  }

  .message-buttons .btn {
    width: 100%;
  }

  .message-actions-footer {
    flex-direction: column;
  }

  .message-actions-footer .btn {
    width: 100%;
  }

  .messages-icon-link {
    padding: 6px 10px;
    gap: 6px;
  }

  .messages-icon {
    width: 20px;
    height: 20px;
  }

  .unread-count {
    font-size: 0.75rem;
    padding: 2px 6px;
    min-width: 18px;
  }

  .admin-icon-link {
    padding: 6px;
  }

  .admin-icon {
    width: 20px;
    height: 20px;
  }
}

/* User Search Component */
.user-search-container {
  position: relative;
  max-width: 600px;
  margin-bottom: 20px;
}

/* Ensure search results appear above other content */
.message-detail:has(.user-search-container) {
  overflow: visible;
  position: relative;
  z-index: 10;
}

.user-search-input {
  width: 100%;
  padding: 12px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background-color: var(--bg-color);
  color: var(--text-color);
  font-size: 1rem;
  transition: border-color 0.2s;
}

.user-search-input:focus {
  outline: none;
  border-color: var(--accent-color);
}

.user-search-results {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 4px;
  background-color: var(--bg-color);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  max-height: 400px;
  overflow-y: auto;
  z-index: 1000;
}

.user-search-results.visible {
  display: block;
}

.search-result-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  cursor: pointer;
  transition: background-color 0.2s;
  border-bottom: 1px solid var(--border-color);
}

.search-result-item:last-child {
  border-bottom: none;
}

.search-result-item:hover {
  background-color: var(--hover-bg);
}

.search-result-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.search-result-avatar-placeholder {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: bold;
  font-size: 1.1em;
}

.search-result-info {
  flex: 1;
  min-width: 0;
}

.search-result-username {
  font-weight: 500;
  color: var(--text-color);
}

.search-result-email {
  font-size: 0.875rem;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 768px) {
  .user-search-container {
    max-width: 100%;
  }
}

/* Member Avatars */
.member-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.member-avatar-placeholder {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: var(--sidebar-bg);
  flex-shrink: 0;
}

/* Broadcast Message Styles */
.broadcast-preview {
  margin-top: 2rem;
  padding: 1.5rem;
  background-color: var(--sidebar-bg);
  border: 1px solid var(--border-color);
  border-radius: 8px;
}

.broadcast-preview h2 {
  margin-top: 0;
  margin-bottom: 1rem;
  color: var(--text-color);
}

.message-preview-container {
  background-color: var(--bg-color);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  padding: 1rem;
}

.message-preview-header {
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border-color);
  font-size: 1.1em;
}

.message-preview-body {
  color: var(--text-color);
}

.message-preview-body h1,
.message-preview-body h2,
.message-preview-body h3 {
  margin-top: 1rem;
  margin-bottom: 0.5rem;
}

.message-preview-body p {
  margin-bottom: 0.5rem;
}

.message-preview-body ul,
.message-preview-body ol {
  margin-bottom: 0.5rem;
  padding-left: 1.5rem;
}

.message-preview-body code {
  background-color: var(--sidebar-bg);
  padding: 0.2rem 0.4rem;
  border-radius: 3px;
  font-family: monospace;
}

.message-preview-body pre {
  background-color: var(--sidebar-bg);
  padding: 1rem;
  border-radius: 4px;
  overflow-x: auto;
}

.message-preview-body pre code {
  background-color: transparent;
  padding: 0;
}

/* Section Headings with fading divider */
.section-heading {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: 1.1rem;
}

.section-heading::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, var(--text-color), transparent);
  opacity: 0.2;
}

/* Band Cards */
.band-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}

.band-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem;
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  text-decoration: none;
  color: var(--text-color);
  transition: all 0.2s ease;
}

html[data-theme="dark"] .band-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .band-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  }
}

html[data-theme="dark"] .band-cards .band-card {
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.14);
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .band-cards .band-card {
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.14);
  }
}

.band-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  border-color: var(--accent-color);
}

html[data-theme="dark"] .band-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .band-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  }
}

.band-card-icon {
  flex-shrink: 0;
}

.band-card-icon .icon {
  width: 48px;
  height: 48px;
  color: var(--accent-color);
}

.band-card-content {
  flex: 1;
}

.band-card-content h2 {
  margin: 0 0 0.5rem 0;
  font-size: 1.25rem;
  color: var(--text-color);
}

.band-card-count {
  margin: 0;
  font-size: 0.875rem;
  color: var(--text-color);
  opacity: 0.7;
}

@media (max-width: 768px) {
  .band-cards {
    grid-template-columns: 1fr;
  }
}

/* Approved card green tint */
.band-card--approved {
  background: rgba(34, 197, 94, 0.05);
  border-color: rgba(34, 197, 94, 0.15);
}

.band-card--approved .icon {
  color: #22c55e;
}

html[data-theme="dark"] .band-cards .band-card--approved {
  background: rgba(34, 197, 94, 0.12);
  border-color: rgba(34, 197, 94, 0.20);
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .band-cards .band-card--approved {
    background: rgba(34, 197, 94, 0.12);
    border-color: rgba(34, 197, 94, 0.20);
  }
}

/* Events/Calendar/Venues card lilac tint */
.band-card--events {
  background: rgba(167, 139, 250, 0.05);
  border-color: rgba(167, 139, 250, 0.15);
}

.band-card--events .icon {
  color: #a78bfa;
}

html[data-theme="dark"] .band-cards .band-card--events {
  background: rgba(167, 139, 250, 0.12);
  border-color: rgba(167, 139, 250, 0.20);
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .band-cards .band-card--events {
    background: rgba(167, 139, 250, 0.12);
    border-color: rgba(167, 139, 250, 0.20);
  }
}

/* Rejected card red tint */
.band-card--rejected {
  background: rgba(239, 68, 68, 0.05);
  border-color: rgba(239, 68, 68, 0.15);
}

.band-card--rejected .icon {
  color: #ef4444;
}

html[data-theme="dark"] .band-cards .band-card--rejected {
  background: rgba(239, 68, 68, 0.12);
  border-color: rgba(239, 68, 68, 0.20);
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .band-cards .band-card--rejected {
    background: rgba(239, 68, 68, 0.12);
    border-color: rgba(239, 68, 68, 0.20);
  }
}

/*
 * Practicing and Backlog card blue tint.
 *
 * This was the Rehearsal Room tint. Moved so that all four song-state cards are
 * tinted and the untinted cards below them are the tools - which groups the
 * states by colour rather than by where the grid happens to wrap them. Both
 * share one tint on purpose: they are the two "not settled yet" states, and
 * green/red already carry the decided ones.
 */
.band-card--practicing,
.band-card--backlog {
  background: rgba(96, 165, 250, 0.05);
  border-color: rgba(96, 165, 250, 0.15);
}

html[data-theme="dark"] .band-cards .band-card--practicing,
html[data-theme="dark"] .band-cards .band-card--backlog {
  background: rgba(96, 165, 250, 0.12);
  border-color: rgba(96, 165, 250, 0.20);
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .band-cards .band-card--practicing,
  html:not([data-theme="light"]) .band-cards .band-card--backlog {
    background: rgba(96, 165, 250, 0.12);
    border-color: rgba(96, 165, 250, 0.20);
  }
}

/* Quick Links card */
.quick-links-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.quick-link-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  border-radius: 8px;
  text-decoration: none;
  color: var(--text-color);
  font-size: 0.9em;
  border: 1px solid var(--border-color);
  transition: all 0.2s ease;
}

.quick-link-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  border-color: var(--accent-color);
  text-decoration: none;
  color: var(--text-color);
}

html[data-theme="dark"] .quick-link-item {
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.14);
}

html[data-theme="dark"] .quick-link-item:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .quick-link-item {
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.14);
  }
  html:not([data-theme="light"]) .quick-link-item:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  }
}

.quick-link-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.quick-links-cog {
  display: inline-flex;
  color: var(--muted-color);
  opacity: 0.5;
  transition: opacity 0.2s ease;
  cursor: pointer;
}

.quick-links-cog svg {
  width: 14px;
  height: 14px;
}

.quick-links-cog:hover {
  opacity: 1;
}

/* Quick Links edit mode */
.quick-links-edit-list {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.quick-link-edit-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.5rem;
  border-radius: 6px;
  border: 1px solid var(--border-color);
  font-size: 0.9em;
  background: var(--card-bg);
}

.quick-link-drag-handle {
  cursor: move;
  color: var(--muted-color);
  font-size: 1rem;
  width: 1.25rem;
  text-align: center;
  flex-shrink: 0;
  user-select: none;
}

.quick-links-disabled-section {
  opacity: 0.7;
}

/* Event card RSVP status stripe (left border) */
.glass-card.event-card--all-available,
html[data-theme="dark"] .glass-card.event-card--all-available {
  border-left: 4px solid #66c2a5;
}

.glass-card.event-card--has-maybe,
html[data-theme="dark"] .glass-card.event-card--has-maybe {
  border-left: 4px solid #fdae61;
}

.glass-card.event-card--has-unavailable,
html[data-theme="dark"] .glass-card.event-card--has-unavailable {
  border-left: 4px solid #d53e4f;
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .glass-card.event-card--all-available {
    border-left: 4px solid #66c2a5;
  }
  html:not([data-theme="light"]) .glass-card.event-card--has-maybe {
    border-left: 4px solid #fdae61;
  }
  html:not([data-theme="light"]) .glass-card.event-card--has-unavailable {
    border-left: 4px solid #d53e4f;
  }
}

/* Beta Badge */
.beta-badge {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  background: #f59e0b;
  color: #000;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 0.15rem 0.4rem;
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Inside dropdown menu items the badge should flow inline after the label
   rather than pinning to the menu corner. */
.dropdown-item .beta-badge {
  position: static;
  margin-left: 0.35rem;
}

/* Event Status Badges */
.event-status-badge {
  display: inline-block;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-size: 0.85em;
  font-weight: 600;
}

.event-status-confirmed {
  background: #d1fae5;
  color: #065f46;
}

.event-status-tentative {
  background: #fef3c7;
  color: #92400e;
}

.event-status-cancelled {
  background: #fee2e2;
  color: #991b1b;
}

html[data-theme="dark"] .event-status-confirmed {
  background: rgba(16, 185, 129, 0.2);
  color: #6ee7b7;
}

html[data-theme="dark"] .event-status-tentative {
  background: rgba(245, 158, 11, 0.2);
  color: #fcd34d;
}

html[data-theme="dark"] .event-status-cancelled {
  background: rgba(239, 68, 68, 0.2);
  color: #fca5a5;
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .event-status-confirmed {
    background: rgba(16, 185, 129, 0.2);
    color: #6ee7b7;
  }

  html:not([data-theme="light"]) .event-status-tentative {
    background: rgba(245, 158, 11, 0.2);
    color: #fcd34d;
  }

  html:not([data-theme="light"]) .event-status-cancelled {
    background: rgba(239, 68, 68, 0.2);
    color: #fca5a5;
  }
}

.event-status-paid {
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #f59e0b;
}

html[data-theme="dark"] .event-status-paid {
  background: rgba(245, 158, 11, 0.2);
  color: #fcd34d;
  border: 1px solid rgba(245, 158, 11, 0.5);
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .event-status-paid {
    background: rgba(245, 158, 11, 0.2);
    color: #fcd34d;
    border: 1px solid rgba(245, 158, 11, 0.5);
  }
}

/* Availability Status Badges */
.availability-status-badge {
  display: inline-block;
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 600;
}

.availability-status-unavailable {
  background: #fee2e2;
  color: #991b1b;
}

.availability-status-tentative {
  background: #fef3c7;
  color: #92400e;
}

html[data-theme="dark"] .availability-status-unavailable {
  background: rgba(239, 68, 68, 0.2);
  color: #fca5a5;
}

html[data-theme="dark"] .availability-status-tentative {
  background: rgba(245, 158, 11, 0.2);
  color: #fcd34d;
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .availability-status-unavailable {
    background: rgba(239, 68, 68, 0.2);
    color: #fca5a5;
  }

  html:not([data-theme="light"]) .availability-status-tentative {
    background: rgba(245, 158, 11, 0.2);
    color: #fcd34d;
  }
}

/* Availability cards */
.availability-card {
  margin: 0 0 0.75rem 0;
  padding-top: 0.65rem;
}

.availability-card-layout {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
}

.availability-card-details {
  flex: 1;
  min-width: 0;
}

.availability-card-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.25rem;
  flex-wrap: wrap;
}

.availability-card-reason {
  color: var(--text-muted);
  font-size: 0.9em;
  margin-top: 0.25rem;
}

.availability-card-date-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.5rem;
  flex-shrink: 0;
}

.availability-card-date {
  text-align: right;
}

.availability-card-end-date {
  color: var(--text-muted);
  font-size: 0.9em;
}

@media (max-width: 500px) {
  .availability-card-layout {
    flex-direction: column-reverse;
    gap: 0.25rem;
  }

  .availability-card-date-actions {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
  }

  .availability-card-date {
    text-align: left;
    color: var(--text-muted);
    font-size: 0.85em;
  }

  .availability-card-date > div {
    display: inline;
  }

  .availability-card-end-date::before {
    content: " — ";
  }
}

/* Modal Styles */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  /* 100% rather than 100vw so a desktop scrollbar does not push the overlay
     wider than the page. */
  width: 100%;
  /*
   * On a real phone 100vh is the *large* viewport: it measures the screen as
   * if the URL bar and toolbars were hidden, so a centred dialog sits partly
   * below the visible area with no way to reach it. dvh tracks the viewport
   * that is actually on screen; the vh line stays first as a fallback for
   * browsers without dvh.
   */
  height: 100vh;
  height: 100dvh;
  background-color: rgba(0, 0, 0, 0.5);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
  /* Stay clear of the notch and the home indicator. env() is 0 (or the whole
     declaration is dropped) where there is no inset, hence the max(). */
  padding-top: max(20px, env(safe-area-inset-top));
  padding-bottom: max(20px, env(safe-area-inset-bottom));
  box-sizing: border-box;
}

.modal-overlay.visible {
  display: flex;
}

.modal-content {
  background-color: var(--bg-color);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  box-shadow: 0 8px 32px var(--dropdown-shadow);
  max-width: 450px;
  width: 100%;
  /* 100% of the overlay's content box, i.e. the visible viewport less its
     padding, so the whole dialog is always on screen. */
  max-height: 100%;
  /* Column layout: the header and footer keep their size and only the body
     scrolls, so the footer buttons are always reachable. */
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Several modals wrap the body + footer in a form. It has to pass the height
   constraint through, or the body inside it never becomes the scroller. */
.modal-content > form {
  display: flex;
  flex-direction: column;
  min-height: 0;
  margin: 0;
}

.modal-header {
  padding: 20px 24px;
  border-bottom: 1px solid var(--border-color);
  flex: 0 0 auto;
}

.modal-header h2 {
  margin: 0;
  font-size: 1.25rem;
  color: var(--text-color);
}

/* Less on top than the other three sides: the header above already contributes
   20px of its own padding plus its rule, so a full 24px here left the first line
   of body text floating well clear of the title. */
.modal-body {
  padding: 16px 24px 24px;
  /* The body is the only part that scrolls. min-height: 0 is required or the
     flex item refuses to shrink below its content and the overflow never
     kicks in. */
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--border-color) transparent;
}

/*
 * macOS and iOS hide overlay scrollbars until you scroll, which makes a long
 * list of results look like it is simply cut off. Force a persistent bar in
 * WebKit/Blink (same treatment as the nav dropdown menus).
 */
.modal-body::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 10px;
}

.modal-body::-webkit-scrollbar-track {
  background: transparent;
}

.modal-body::-webkit-scrollbar-thumb {
  background-color: var(--border-color);
  border: 2px solid var(--bg-color);
  border-radius: 5px;
}

.modal-body::-webkit-scrollbar-thumb:hover {
  background-color: var(--text-color);
}

.modal-footer {
  padding: 16px 24px;
  border-top: 1px solid var(--border-color);
  display: flex;
  gap: 12px;
  justify-content: flex-start;
  flex: 0 0 auto;
}

/* Checkbox group styles */
.checkbox-group {
  margin-bottom: 16px;
}

.checkbox-group:last-child {
  margin-bottom: 0;
}

.checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
  padding: 12px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  transition: background-color 0.2s, border-color 0.2s;
}

.checkbox-label:hover {
  background-color: var(--hover-bg);
}

.checkbox-label input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 0;
  flex-shrink: 0;
  cursor: pointer;
}

.checkbox-label-content {
  flex: 1;
}

.checkbox-label-title {
  font-weight: 500;
  color: var(--text-color);
  margin-bottom: 4px;
}

.checkbox-label-description {
  font-size: 0.875rem;
  color: var(--text-color);
  opacity: 0.7;
}

.modal-content-compact {
  max-width: 320px;
  width: 320px;
}

@media (max-width: 768px) {
  .modal-content {
    max-width: calc(100% - 20px);
    margin: 0 auto;
  }

  .modal-content-compact {
    width: auto;
    max-width: min(320px, calc(100% - 20px));
  }

  .modal-footer {
    flex-direction: column;
  }

  .modal-footer .btn {
    width: 100%;
  }
}

/* PDF print preview modal -------------------------------------------------- */
/* The column layout that keeps the header and footer put while only the body
   scrolls now lives on .modal-content, so this only needs the width. */
.pdf-preview-modal {
  max-width: 760px;
  width: 760px;
}

/* Mobile-only Options | Preview switcher */
.pdf-modal-tabs {
  display: none;
  padding: 12px 16px 0;
}

.pdf-modal-body {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

.pdf-modal-options {
  flex: 0 0 280px;
  min-width: 0;
}

/* Checkbox list: a simple stacked column on desktop. Goes to a 2-column grid
   on mobile (see the breakpoint below) to shorten the modal. */
.pdf-opt-checks {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.pdf-slider-head {
  margin-bottom: 0.5rem;
}

.pdf-modal-options .slider-group {
  margin-top: 1rem;
}

/* Verbose labels on desktop; the short variants are swapped in on mobile. */
.opt-label-short {
  display: none;
}

/* Setlist Display Options modal. Deliberately mirrors the compact .pdf-opt-checks
   list above - small text, tight rows, no bordered cards - so the two modals read
   as siblings rather than as two different designs.

   Unlike .pdf-opt-checks this stays a single column at every width: the list is
   short, and the custom-fields hint and preset picker do not sit well in a grid. */
.display-opt-checks {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.display-opt-check {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  font-size: 0.875rem;
}

.display-opt-intro {
  margin: 0 0 0.75rem 0;
  font-size: 0.85rem;
  color: var(--text-secondary);
}

/* Indented to sit under its checkbox's label text rather than its box. */
.display-opt-subgroup {
  margin: 0.15rem 0 0.25rem 1.5rem;
}

/* Shared with the PDF modal's custom-fields group so both modals explain print
   presets in the same voice and the same type size. */
.display-opt-hint,
.pdf-opt-hint {
  margin: 0 0 0.5rem 0;
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.display-opt-field-label {
  display: block;
  margin-bottom: 0.3rem;
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.display-opt-select {
  width: 100%;
  padding: 0.35rem 0.5rem;
  border-radius: 6px;
  border: 1px solid var(--border-color);
  background: var(--card-bg);
  color: var(--text-color);
  font-size: 0.85rem;
}

.pdf-modal-preview {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.pdf-preview-stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Drive size from height (capped to the viewport) and let the A4 aspect
     ratio set the width, so the page never grows taller than the screen. */
  height: 52vh;
  height: 52dvh;
  aspect-ratio: 1 / 1.414;
  width: auto;
  max-width: 100%;
  margin: 0 auto;
  padding: 12px;
  box-sizing: border-box;
  background: var(--hover-bg, rgba(0, 0, 0, 0.04));
  border: 1px solid var(--border-color);
  border-radius: 8px;
  overflow: hidden;
}

.pdf-preview-image {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 2px;
  box-shadow: 0 2px 12px var(--dropdown-shadow);
  transition: opacity 0.2s;
}

.pdf-preview-stage--stale .pdf-preview-image {
  opacity: 0.4;
}

.pdf-preview-placeholder {
  font-size: 0.875rem;
  text-align: center;
  color: var(--text-color);
  opacity: 0.7;
}

.pdf-preview-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--border-color);
  border-top-color: var(--accent-color);
  border-radius: 50%;
  animation: pdf-preview-spin 0.8s linear infinite;
}

@keyframes pdf-preview-spin {
  to { transform: rotate(360deg); }
}

.pdf-preview-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

/* The explicit `display: flex` above beats the UA `[hidden] { display: none }`
   rule, so without this the nav stays visible (with a stale page count) when
   the controller toggles its `hidden` attribute - e.g. a multi-page preview
   re-rendered down to a single page. */
.pdf-preview-nav[hidden] {
  display: none;
}

.pdf-preview-nav .btn-icon-svg {
  width: 15px;
  height: 15px;
}

.pdf-preview-nav span {
  min-width: 84px;
  text-align: center;
  font-size: 0.8rem;
  color: var(--text-color);
}

.pdf-preview-stale {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  max-width: 80%;
  padding: 8px 14px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  font-size: 0.8rem;
  line-height: 1.3;
  text-align: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

@media (max-width: 768px) {
  .pdf-preview-modal {
    width: auto;
    max-width: calc(100% - 20px);
  }

  .pdf-modal-tabs {
    display: block;
    text-align: center;
  }

  .pdf-modal-tabs .pill-toggle {
    padding: 3px;
  }

  .pdf-modal-tabs .pill-toggle-option {
    padding: 5px 12px;
    font-size: 0.8rem;
    border-radius: 5px;
  }

  .pdf-modal-tabs .pill-toggle-pill {
    top: 3px;
    bottom: 3px;
    border-radius: 5px;
  }

  .pdf-modal-body {
    flex-direction: column;
  }

  .pdf-modal-options,
  .pdf-modal-preview {
    flex: 1 1 100%;
    width: 100%;
  }

  /* Condense the options pane so the whole modal fits on small screens:
     two-column checkbox grid, short labels, and tighter slider spacing. */
  .pdf-opt-checks {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.4rem 0.75rem;
    align-items: start;
  }

  /* The custom-fields preset dropdown spans the full width below its checkbox. */
  .pdf-opt-checks > [data-pdf-modal-target="customFieldsPresetGroup"] {
    grid-column: 1 / -1;
    margin-left: 0 !important;
  }

  .opt-label-full {
    display: none;
  }

  .opt-label-short {
    display: inline;
  }

  .pdf-modal-options .slider-group {
    margin-top: 0.6rem;
  }

  .pdf-slider-head {
    margin-bottom: 0.3rem;
  }

  /* Show only the pane selected by the pill-toggle */
  .pdf-modal-body[data-mobile-view="options"] .pdf-modal-preview {
    display: none;
  }

  .pdf-modal-body[data-mobile-view="preview"] .pdf-modal-options {
    display: none;
  }

  /* Mobile shows the pill tabs + footer too, so give the page less height to
     keep the whole modal on screen. */
  .pdf-preview-stage {
    height: 38vh;
    height: 38dvh;
  }

  /* The Preview pill tab triggers the render on mobile, so the footer Preview
     button is redundant there - leave only Generate PDF. */
  .pdf-preview-btn {
    display: none;
  }
}

/* Tip Card Styles */
.tip-card {
  position: relative;
  background-color: var(--accent-color);
  color: var(--accent-contrast);
  border-radius: 8px;
  padding: 16px 48px 16px 20px;
  margin-bottom: 20px;
  animation: tipCardSlideIn 0.3s ease-out;
}

/* Orange variant for warning/info tips (spectral-10 red) */
.tip-card-orange {
  background-color: #d53e4f;
  color: #ffffff;
}

/* Amber/yellow variant for beta warnings */
.tip-card-amber {
  background-color: #f59e0b;
  color: #451a03;
}

.tip-card-amber a:not(.btn) {
  color: #451a03;
}

.tip-card-amber .tip-card-dismiss:hover {
  background-color: rgba(0, 0, 0, 0.15);
}

/* Beta warning variant (spectral-10 orange, black text) */
.tip-card-beta {
  background-color: #fdae61;
  color: #000000;
}

.tip-card-beta a:not(.btn) {
  color: #000000;
}

.tip-card-beta .tip-card-dismiss:hover {
  background-color: rgba(0, 0, 0, 0.15);
}

@keyframes tipCardSlideIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.tip-card-header {
  font-family: 'Caveat', cursive;
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 6px;
  line-height: 1;
}

.tip-card-body {
  font-size: 0.95rem;
  line-height: 1.5;
}

/* Inline links in tip prose. Excludes .btn so a link_to styled as a button keeps
   its button colours - otherwise it inherits the card's text colour and ends up
   as dark text on the secondary button's grey. */
.tip-card-body a:not(.btn) {
  color: inherit;
  text-decoration: underline;
}

.tip-card-body a:not(.btn):hover {
  opacity: 0.8;
}

.tip-card-dismiss {
  position: absolute;
  top: 12px;
  right: 12px;
  background: transparent;
  border: none;
  color: inherit;
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s;
  opacity: 0.7;
}

.tip-card-dismiss:hover {
  background-color: rgba(0, 0, 0, 0.1);
  opacity: 1;
}

.tip-card-dismiss svg {
  width: 20px;
  height: 20px;
}

/* Tip card closing animation */
.tip-card.closing {
  animation: tipCardSlideOut 0.2s ease-in forwards;
}

@keyframes tipCardSlideOut {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-10px);
  }
}

@media (max-width: 768px) {
  .tip-card {
    padding: 14px 44px 14px 16px;
  }

  .tip-card-header {
    font-size: 1.35rem;
  }

  .tip-card-body {
    font-size: 0.9rem;
  }

  .tip-card-dismiss {
    top: 10px;
    right: 10px;
  }
}

/* Mention Dropdown */
.mention-dropdown {
  display: none;
  position: absolute;
  background-color: var(--bg-color);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  max-height: 240px;
  min-width: 250px;
  overflow-y: auto;
  z-index: 1000;
}

.mention-dropdown.visible {
  display: block;
}

.mention-result-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  cursor: pointer;
  transition: background-color 0.15s;
  border-bottom: 1px solid var(--border-color);
}

.mention-result-item:last-child {
  border-bottom: none;
}

.mention-result-item:hover,
.mention-result-item.selected {
  background-color: var(--hover-bg);
}

.mention-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.mention-avatar-placeholder {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: var(--sidebar-bg);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: bold;
  font-size: 0.9em;
}

.mention-info {
  flex: 1;
  min-width: 0;
}

.mention-display-name {
  font-weight: 500;
  color: var(--text-color);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mention-username {
  font-size: 0.85rem;
  color: var(--text-muted);
}

/* Mention styling in rendered comments */
.mention {
  background-color: color-mix(in srgb, var(--accent-color) 15%, transparent);
  color: var(--accent-color);
  padding: 1px 4px;
  border-radius: 3px;
  font-weight: 500;
}

/* Tag Dropdown (for song search) */
.tag-dropdown {
  display: none;
  position: absolute;
  background-color: var(--dropdown-bg);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  box-shadow: 0 4px 12px var(--dropdown-shadow);
  max-height: 240px;
  overflow-y: auto;
  z-index: 1000;
}

.tag-dropdown.visible {
  display: block;
}

.tag-result-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  cursor: pointer;
  transition: background-color 0.15s;
  border-bottom: 1px solid var(--border-color);
}

.tag-result-item:last-child {
  border-bottom: none;
}

.tag-result-item:hover,
.tag-result-item.selected {
  background-color: var(--hover-bg);
}

.tag-color-dot {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  flex-shrink: 0;
}

.tag-label {
  color: var(--text-color);
  font-size: 0.95rem;
}

/* Polls */
.polls-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.polls-list .glass-card {
  padding: 1rem;
  margin: 0;
}

.poll-card {
  display: block;
  text-decoration: none;
  color: var(--text-color);
  transition: all 0.2s ease;
  position: relative;
}

.poll-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  border-color: var(--accent-color);
}

.poll-card.poll-closed {
  opacity: 0.7;
}

.poll-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 0.5rem;
}

.poll-card-title {
  margin: 0;
  font-size: 1.1em;
  font-weight: 600;
  color: var(--text-color);
}

.poll-card-description {
  margin: 0 0 0.75rem 0;
  color: var(--text-muted);
  font-size: 0.9em;
  line-height: 1.4;
}

.poll-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  font-size: 0.85em;
  color: var(--text-muted);
}

.poll-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.poll-meta-item svg {
  opacity: 0.7;
}

.poll-expires {
  color: var(--accent-color);
}

.poll-status-badge {
  font-size: 0.75em;
  font-weight: 600;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  flex-shrink: 0;
}

.poll-status-open {
  background-color: rgba(40, 167, 69, 0.15);
  color: #28a745;
}

.poll-status-closed {
  background-color: rgba(108, 117, 125, 0.15);
  color: #6c757d;
}

.poll-card-badges {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-shrink: 0;
}

.poll-voted-badge {
  font-size: 0.75em;
  font-weight: 600;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  background-color: rgba(var(--accent-color-rgb, 0, 102, 204), 0.15);
  color: var(--accent-color);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Poll Options (voting form) */
.poll-options {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.poll-option-selectable {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  background: var(--input-bg);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s;
}

.poll-option-selectable:hover {
  border-color: var(--accent-color);
  background: rgba(var(--accent-color-rgb, 0, 102, 204), 0.05);
}

.poll-option-selectable input[type="radio"],
.poll-option-selectable input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--accent-color);
}

.poll-option-text {
  flex: 1;
  font-size: 0.95em;
}

/* Poll Results */
.poll-results {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.poll-results-note {
  color: #666;
  font-size: 0.9rem;
}

@media (prefers-color-scheme: dark) {
  .poll-results-note {
    color: #999;
  }
}

html[data-theme="dark"] .poll-results-note {
  color: #999;
}

.poll-result-option {
  padding: 0.75rem 1rem;
  background: var(--input-bg);
  border: 1px solid var(--border-color);
  border-radius: 8px;
}

.poll-result-option.poll-result-voted {
  border-color: var(--accent-color);
  background: rgba(var(--accent-color-rgb, 0, 102, 204), 0.05);
}

.poll-result-option.poll-result-leading .poll-result-bar {
  background: var(--accent-color);
}

.poll-result-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0.5rem;
}

.poll-result-count {
  font-size: 0.9em;
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
}

.poll-result-bar-container {
  height: 8px;
  background: rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  overflow: hidden;
}

.poll-result-bar {
  height: 100%;
  background: rgba(var(--accent-color-rgb, 0, 102, 204), 0.5);
  border-radius: 4px;
  transition: width 0.3s ease;
}

.poll-your-vote {
  font-size: 0.85em;
  color: var(--accent-color);
  font-weight: 500;
}

.poll-voters {
  margin-top: 0.5rem;
  font-size: 0.8em;
  color: var(--text-muted);
}

/* Dark mode for polls */
@media (prefers-color-scheme: dark) {
  .poll-result-bar-container {
    background: rgba(255, 255, 255, 0.1);
  }
}

html[data-theme="dark"] .poll-result-bar-container {
  background: rgba(255, 255, 255, 0.1);
}

/* Dashboard Cards - Masonry Layout */
.dashboard-cards {
  margin-top: 1.5rem;
  column-count: 1;
  column-gap: 1rem;
}

.dashboard-card {
  break-inside: avoid;
  margin-bottom: 1rem;
  padding: 1rem 1.25rem;
}

.dashboard-card-title-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin: 0 0 0.75rem 0;
  padding: 0;
  font-size: 1rem;
  font-weight: 600;
  font-family: inherit;
  color: var(--muted-color);
  background: none;
  border: none;
  cursor: pointer;
}

.dashboard-card-title-toggle:hover {
  opacity: 0.8;
}

.dashboard-card:not(.collapsible--open) .dashboard-card-title-toggle {
  margin-bottom: 0;
}

.dashboard-card-clickable {
  display: block;
  text-decoration: none;
  color: var(--text-color);
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 12px;
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
}

.dashboard-card-clickable::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 50%;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0));
  pointer-events: none;
  border-radius: 12px 12px 0 0;
}

.dashboard-card-clickable:hover {
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  border-color: var(--accent-color);
  background: rgba(255, 255, 255, 0.85);
}

html[data-theme="dark"] .dashboard-card-clickable {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

html[data-theme="dark"] .dashboard-card-clickable::before {
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0));
}

html[data-theme="dark"] .dashboard-card-clickable:hover {
  background: rgba(255, 255, 255, 0.12);
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .dashboard-card-clickable {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow:
      0 2px 8px rgba(0, 0, 0, 0.2),
      inset 0 1px 0 rgba(255, 255, 255, 0.1);
  }

  html:not([data-theme="light"]) .dashboard-card-clickable::before {
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0));
  }

  html:not([data-theme="light"]) .dashboard-card-clickable:hover {
    background: rgba(255, 255, 255, 0.12);
    box-shadow:
      0 4px 16px rgba(0, 0, 0, 0.3),
      inset 0 1px 0 rgba(255, 255, 255, 0.15);
  }
}

/* Two columns on wider screens */
@media (min-width: 900px) {
  .dashboard-cards {
    column-count: 2;
  }
}

/* Three columns on very wide screens */
@media (min-width: 1400px) {
  .dashboard-cards {
    column-count: 3;
  }
}

/* Pill Toggle (Segmented Control) */
.pill-toggle {
  display: inline-flex;
  position: relative;
  background: var(--input-bg);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 4px;
  gap: 0;
}

.pill-toggle-pill {
  position: absolute;
  top: 4px;
  bottom: 4px;
  background: var(--accent-color);
  border-radius: 6px;
  transition: left 0.2s ease, width 0.2s ease;
  z-index: 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.pill-toggle-option {
  position: relative;
  z-index: 1;
  padding: 8px 16px;
  border: none;
  background: transparent;
  color: var(--text-color);
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: color 0.2s ease;
  border-radius: 6px;
  white-space: nowrap;
}

.pill-toggle-option:hover:not(.pill-toggle-option--active) {
  color: var(--accent-color);
}

.pill-toggle-option--active {
  color: var(--accent-contrast);
}

/* Responsive: smaller padding on mobile */
@media (max-width: 480px) {
  .pill-toggle-option {
    padding: 6px 10px;
    font-size: 0.8rem;
  }

  .pill-toggle {
    padding: 3px;
  }

  .pill-toggle-pill {
    top: 3px;
    bottom: 3px;
    border-radius: 5px;
  }

  .pill-toggle-option {
    border-radius: 5px;
  }

  .pill-toggle-count {
    display: none;
  }
}

/* Small pill toggle - for tight spaces like inside the Online Lookup modal,
 * where the default size would push the result list down. Mirrors the
 * existing mobile-breakpoint compaction but applies at all widths. */
.pill-toggle--sm {
  padding: 3px;
}

.pill-toggle--sm .pill-toggle-option {
  padding: 4px 10px;
  font-size: 0.8rem;
  border-radius: 5px;
}

.pill-toggle--sm .pill-toggle-pill {
  top: 3px;
  bottom: 3px;
  border-radius: 5px;
}

/* Pill toggle notification badge */
.pill-toggle-badge {
  display: inline-block;
  width: 8px;
  height: 8px;
  background-color: #e53e3e;
  border-radius: 50%;
  margin-left: 4px;
  vertical-align: top;
  position: relative;
  top: -1px;
  animation: changelog-dot-pulse 2s infinite;
}

/* Songs filter bar - pill toggle + sort controls on same line */
.songs-filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  margin-bottom: 1rem;
}

.songs-sort-controls {
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* Events sub-navigation links */
.events-sub-nav {
  display: flex;
  gap: 1rem;
  align-items: center;
}

.events-sub-nav-link {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.85rem;
  color: var(--text-muted);
  text-decoration: none;
  /* The class started out on <a> only, but the setlist "Display Options" entry is
     a <button> that opens a modal. These six declarations are all no-ops for an
     anchor and strip the browser's button chrome so the two render identically. */
  background: none;
  border: 0;
  padding: 0;
  font-family: inherit;
  line-height: inherit;
  cursor: pointer;
}

.events-sub-nav-link:hover {
  color: var(--text-color);
}

.events-sub-nav-icon {
  width: 16px;
  height: 16px;
}

@media (max-width: 500px) {
  .events-sub-nav-link span,
  .events-sub-nav-link {
    font-size: 0.8rem;
  }
}

/* Event cards in list view - tighter spacing than default glass-card */
.event-card {
  margin: 0 0 0.75rem 0;
  padding-top: 0.65rem;
}

/* Event card layout - two-column on desktop, date-on-top on mobile */
.event-card-layout {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
}

.event-card-details {
  flex: 1;
  min-width: 0;
}

.event-card-date {
  text-align: right;
  flex-shrink: 0;
}

.event-card-time {
  color: var(--text-muted);
  font-size: 0.9em;
}

/* Sections reachable by URL fragment. Offsets the scroll so the heading clears
   the sticky .top-bar (60px) instead of landing underneath it. */
.anchor-target {
  scroll-margin-top: 80px;
}

/* Action row in the "set your calendar timezone" nudge. The button lives in a
   form and sits next to a link_to, so the container needs align-items: center
   and the form needs its margin cleared (docs/button-sizing-issue.md). */
.tz-nudge-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 0.75rem;
}

/* Must out-specify the rule above, or the Stimulus controller cannot hide it. */
.tz-nudge-actions[hidden] {
  display: none;
}

.tz-nudge-actions form {
  margin: 0;
}

/* Timezone suffix next to an event time ("19:00 BST"). Shown only when the
   event's zone differs from the viewer's - see timezone_badge_controller.js. */
.tz-badge {
  color: var(--text-muted);
  font-size: 0.8em;
  font-weight: 500;
  white-space: nowrap;
}

.event-card-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.25rem;
  flex-wrap: wrap;
}

.event-card-info {
  color: var(--text-muted);
  font-size: 0.9em;
  display: flex;
  gap: 0.5rem 1rem;
  flex-wrap: wrap;
  align-items: center;
}

.event-card-badges {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-shrink: 0;
}

@media (max-width: 500px) {
  .event-card-layout {
    flex-direction: column-reverse;
    gap: 0.25rem;
  }

  .event-card-date {
    text-align: left;
    color: var(--text-muted);
    font-size: 0.85em;
  }

  .event-card-date > div {
    display: inline;
  }

  .event-card-time::before {
    content: " · ";
  }

  .event-card-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .event-card-info {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
  }
}

.event-card-statuses {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

/* Event card clash avatars */
.event-card-clashes {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.event-card-clashes-icon {
  width: 14px;
  height: 14px;
  color: #f59e0b;
  flex-shrink: 0;
}

.clash-avatar-stack {
  display: inline-flex;
  align-items: center;
}

.clash-avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--glass-bg, #fff);
  margin-left: -6px;
}

.clash-avatar:first-child {
  margin-left: 0;
}

.clash-avatar-placeholder {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 600;
  font-size: 0.55em;
  flex-shrink: 0;
}

.event-card-rsvps {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.event-card-rsvp-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.rsvp-icon--available {
  color: #22c55e;
}

.rsvp-icon--maybe {
  color: #f59e0b;
}

.rsvp-icon--unavailable {
  color: #ef4444;
}

/* Kaminari pagination */
nav.pagination {
  display: flex;
  gap: 0.25rem;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 1.5rem;
}

nav.pagination a,
nav.pagination em,
nav.pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.25rem;
  height: 2rem;
  padding: 0.125rem 0.5rem;
  border-radius: 8px;
  font-size: 0.9rem;
  text-decoration: none;
  font-style: normal;
}

nav.pagination a {
  color: var(--text-color);
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid var(--border-color);
}

nav.pagination a:hover {
  background: var(--hover-bg);
}

nav.pagination em.current {
  background: var(--accent-color);
  color: var(--accent-contrast);
  font-weight: 600;
  border: 1px solid transparent;
}

nav.pagination span.gap {
  color: var(--text-color);
  border: none;
}

html[data-theme="dark"] nav.pagination a {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) nav.pagination a {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.08);
  }
}

/* Venue Map InfoWindow */
.venue-map-info {
  padding: 0.25rem;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 0.9rem;
  line-height: 1.4;
  color: #333;
}

.venue-map-info h4 {
  margin: 0 0 0.25rem 0;
  font-size: 1rem;
}

.venue-map-info p {
  margin: 0 0 0.25rem 0;
  color: #666;
  font-size: 0.85rem;
}

.venue-map-info a {
  color: #3288bd;
  text-decoration: none;
  font-size: 0.85rem;
}

.venue-map-info a:hover {
  text-decoration: underline;
}

@media (max-width: 768px) {
  [data-controller="venue-map"] {
    height: 400px !important;
  }
}

@media (max-width: 480px) {
  [data-controller="venue-map"] {
    height: 300px !important;
  }
}

/* Practice Sections Table */
.sections-table {
  width: 100%;
  border-collapse: collapse;
}

.sections-table th {
  text-align: left;
  padding: 0.5rem 0.75rem;
  font-size: 0.8em;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border-color);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.sections-table td {
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--border-color);
  font-size: 0.9em;
}

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

.sections-table tbody tr:hover {
  background-color: var(--bg-secondary);
}

/* Notes row should not have hover effect or bottom border removal */
.sections-table .section-notes-row td {
  border-bottom: 1px solid var(--border-color);
}
.sections-table .section-notes-row:hover {
  background-color: transparent;
}

/* Inline edit inputs */
.section-edit-input {
  font-family: inherit;
  font-size: inherit;
  padding: 0.2rem 0.4rem;
  border: 1px solid var(--accent-color);
  border-radius: 4px;
  background-color: var(--bg-primary);
  color: var(--text-primary);
  outline: none;
  box-sizing: border-box;
}

.section-edit-input:focus {
  box-shadow: 0 0 0 2px var(--accent-color-alpha, rgba(0, 102, 204, 0.25));
}

textarea.section-edit-input {
  line-height: 1.4;
}

/* Color picker popup */
.color-picker-popup {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 100;
  display: flex;
  gap: 4px;
  padding: 6px 8px;
  background-color: var(--bg-color);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  box-shadow: 0 4px 12px var(--dropdown-shadow);
  white-space: nowrap;
}

.color-picker-option {
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid transparent;
  transition: transform 0.1s, border-color 0.1s;
}

.color-picker-option:hover {
  transform: scale(1.2);
}

.color-picker-option.selected {
  border-color: var(--text-primary);
}

/* Speed editor */
.speed-editor {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  white-space: nowrap;
}

.speed-editor input[type="range"] {
  accent-color: var(--accent-color);
  cursor: pointer;
}

.speed-editor input[type="number"] {
  -moz-appearance: textfield;
}
.speed-editor input[type="number"]::-webkit-inner-spin-button,
.speed-editor input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Sections header with user switcher */
.sections-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.sections-header-left {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.sections-user-select {
  font-size: 0.85em;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  border: 1px solid var(--border-color);
  background-color: var(--bg-secondary);
  color: var(--text-primary);
  font-weight: normal;
}

.copy-sections-btn {
  display: inline-flex;
  white-space: nowrap;
  overflow: visible;
  padding-top: 6px;
  padding-bottom: 6px;
}

@media (max-width: 600px) {
  .sections-header {
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  .sections-header-left {
    width: 100%;
    justify-content: space-between;
  }
  .copy-sections-label {
    display: none;
  }
}

/* Responsive: desktop table vs mobile cards */
@media (max-width: 600px) {
  .practice-sections-desktop {
    display: none !important;
  }
  .color-picker-popup {
    left: auto;
    right: 0;
  }
}

@media (min-width: 601px) {
  .practice-sections-mobile {
    display: none !important;
  }
}

/* ===== Personal Setlists =====
 * --personal-tint is set inline as the user's accent colour (e.g. #3288bd).
 * The colour-mix() lets us derive a low-opacity tint that works in both
 * light and dark themes without hard-coding alpha hex suffixes.
 */
.message-item--personal {
  background-color: color-mix(in srgb, var(--personal-tint, #6c757d) 8%, transparent);
  border-left: 3px solid var(--personal-tint, #6c757d);
}

.message-item--personal:hover {
  background-color: color-mix(in srgb, var(--personal-tint, #6c757d) 14%, transparent);
}

html[data-theme="dark"] .message-item--personal {
  background-color: color-mix(in srgb, var(--personal-tint, #6c757d) 14%, transparent);
}

html[data-theme="dark"] .message-item--personal:hover {
  background-color: color-mix(in srgb, var(--personal-tint, #6c757d) 22%, transparent);
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .message-item--personal {
    background-color: color-mix(in srgb, var(--personal-tint, #6c757d) 14%, transparent);
  }

  html:not([data-theme="light"]) .message-item--personal:hover {
    background-color: color-mix(in srgb, var(--personal-tint, #6c757d) 22%, transparent);
  }
}

.personal-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-size: 0.875rem;
  background-color: color-mix(in srgb, var(--personal-tint, currentColor) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--personal-tint, currentColor) 60%, transparent);
  color: var(--text-color);
  white-space: nowrap;
}

.personal-badge-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.chart-bar .chart-tooltip { display: none; }
.chart-bar:hover .chart-tooltip { display: block; }
.chart-bar:hover .chart-bar-fill { opacity: 0.8; }

/* ===== Auto Setlists ===== */
.message-item--auto {
  background-color: color-mix(in srgb, #5e4fa2 8%, transparent);
  border-left: 3px solid #5e4fa2;
}

.message-item--auto:hover {
  background-color: color-mix(in srgb, #5e4fa2 14%, transparent);
}

html[data-theme="dark"] .message-item--auto {
  background-color: color-mix(in srgb, #5e4fa2 14%, transparent);
}

html[data-theme="dark"] .message-item--auto:hover {
  background-color: color-mix(in srgb, #5e4fa2 22%, transparent);
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .message-item--auto {
    background-color: color-mix(in srgb, #5e4fa2 14%, transparent);
  }

  html:not([data-theme="light"]) .message-item--auto:hover {
    background-color: color-mix(in srgb, #5e4fa2 22%, transparent);
  }
}

/* Auto Setlist Badge */
.auto-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-size: 0.875rem;
  font-weight: 500;
  white-space: nowrap;
  background-color: color-mix(in srgb, #5e4fa2 15%, transparent);
  border: 1px solid color-mix(in srgb, #5e4fa2 40%, transparent);
  color: #5e4fa2;
}

[data-theme="dark"] .auto-badge {
  background-color: color-mix(in srgb, #5e4fa2 20%, transparent);
  border-color: color-mix(in srgb, #5e4fa2 50%, transparent);
  color: #a99cd4;
}

.auto-badge-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

/* Archived Setlist Badge */
.archived-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-size: 0.875rem;
  font-weight: 500;
  white-space: nowrap;
  background-color: color-mix(in srgb, #c0392b 15%, transparent);
  border: 1px solid color-mix(in srgb, #c0392b 40%, transparent);
  color: #c0392b;
}

[data-theme="dark"] .archived-badge {
  background-color: color-mix(in srgb, #c0392b 20%, transparent);
  border-color: color-mix(in srgb, #c0392b 50%, transparent);
  color: #e98377;
}

.archived-badge-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

/* Setlist show action buttons: shrink slightly on narrow screens when the
   miniplayer button is present (extra icon causes the row to overflow). */
@media (max-width: 600px) {
  .setlist-action-buttons--compact {
    gap: 0.4rem !important;
  }
  .setlist-action-buttons--compact .btn-icon {
    padding: 8px;
  }
  .setlist-action-buttons--compact .btn-icon .btn-icon-svg {
    width: 22px;
    height: 22px;
  }
}

/* Query Builder */
.query-builder-row {
  background: var(--input-border);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: 0.5rem;
}

.query-builder-row select,
.query-builder-row input[type="text"] {
  padding: 0.4rem 0.5rem;
  border-radius: 6px;
  border: 1px solid var(--border-color);
  background: var(--input-bg);
  color: var(--text-color);
  font-size: 0.875rem;
}

@media (max-width: 600px) {
  .query-builder-row {
    flex-direction: column;
    align-items: stretch;
  }
  .query-builder-row .query-builder-label {
    min-width: auto;
  }
  .query-builder-row select,
  .query-builder-row input[type="text"] {
    width: 100%;
  }
  .query-builder-row > .btn-icon {
    align-self: flex-end;
  }
}

/* Sortable - selected song highlight */
.sortable-chosen {
  border: 3px solid var(--accent-color) !important;
  border-radius: 6px !important;
  background-color: color-mix(in srgb, var(--accent-color) 8%, transparent) !important;
}