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

}

@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;

}

/* 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;
}

.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;
    max-height: calc(100vh - 80px);
    overflow-y: auto;
  }

  .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;
}

.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;
}

/* 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;
  }

  .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);
}

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 {
    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);
  }
}

/* Rehearsal Room card blue tint */
.band-card--rehearsal {
  background: rgba(96, 165, 250, 0.05);
  border-color: rgba(96, 165, 250, 0.15);
}

html[data-theme="dark"] .band-cards .band-card--rehearsal {
  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--rehearsal {
    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;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
  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%;
  max-height: 90vh;
  overflow-y: auto;
}

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

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

.modal-body {
  padding: 24px;
}

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

/* 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 -------------------------------------------------- */
.pdf-preview-modal {
  max-width: 760px;
  width: 760px;
  /* Lay out as a column so the header and footer stay put and only the body
     scrolls - keeps the Generate/Preview buttons always reachable. */
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* 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;
}

.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;
  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-secondary, 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-secondary, 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;
  }

  /* 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 {
  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 {
  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;
}

.tip-card-body a {
  color: inherit;
  text-decoration: underline;
}

.tip-card-body a: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-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;
}

.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;
}

.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;
}