header.heading-with-actions {
  display: flex;
  align-items: center;

  & > :is(h1, h2, h3, h4, h5) {
    display: inline-block;
  }
}


/**
 * Icon buttons which have glow effects on hover and click
 */

.icon-button {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  margin: 0;
  transition: transform 0.1s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: inherit;
  font-size: inherit;
}

.icon-button i {
  font-size: inherit;
  line-height: inherit;
  color: #000;
  transition: text-shadow 0.2s ease, transform 0.1s ease;
}

.icon-button:hover i {
  text-shadow: 0 0 4px rgba(0, 123, 255, 1); /* blue glow on hover */
}

.icon-button:active i {
  transform: scale(0.95) translateY(1px); /* slight depress */
  text-shadow:
    0 4px 6px rgba(0, 123, 255, 0.8),  /* downward glow */
    0 0 10px rgba(0, 123, 255, 0.6);   /* ambient glow */
}



/**
 * Action buttons are hidden by default and show on hover
 */

.show-on-hover {
  opacity: 0;
  transition: opacity 150ms ease-in-out;
}

.show-on-hover-parent:hover .show-on-hover {
  opacity: 1;
}

.mobile-trigger {
  display: none;
}

@media (max-width: 560px) {
  /* Section header + buttons always visible on mobile */
  .heading-with-actions .show-on-hover {
    opacity: 1;
  }

  /* Row action cells always visible on mobile */
  td.show-on-hover {
    opacity: 1;
  }
}

/* -----------------------------------------------
   Form validation errors
----------------------------------------------- */

.form-errors {
  background: hsl(0, 100%, 97%);
  border: 1px solid hsl(0, 65%, 80%);
  border-radius: 4px;
  padding: 0.5rem 0.75rem;
  margin-bottom: 1rem;
  color: hsl(0, 65%, 40%);
  font-size: 0.9rem;
}

.form-errors ul {
  margin: 0;
  padding-left: 1.2rem;
}

.field_with_errors {
  display: contents;
}

.field_with_errors input,
.field_with_errors select,
.field_with_errors textarea {
  border-color: hsl(0, 65%, 65%);
  outline-color: hsl(0, 65%, 65%);
}

/* -----------------------------------------------
   Status badge indicators in name cells
----------------------------------------------- */

.status-badge {
  display: inline-flex;
  align-items: center;
  position: relative;
  cursor: default;
  margin-left: 0.35rem;
  vertical-align: middle;
}

.status-badge i { font-size: 0.8em; line-height: 1; }

.status-badge--paused       i { color: hsl(0, 0%, 55%);    }
.status-badge--ending-soon  i { color: hsl(25, 90%, 55%);  }
.status-badge--future-price i { color: hsl(210, 80%, 50%); }
.status-badge--starts-soon  i { color: hsl(40, 90%, 50%);  }

.status-badge::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: hsl(220, 15%, 20%);
  color: hsl(0, 0%, 95%);
  font-size: 0.72rem;
  white-space: nowrap;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 150ms ease;
  z-index: 100;
  font-weight: normal;
}

.status-badge::before {
  content: "";
  position: absolute;
  bottom: calc(100% + 1px);
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: hsl(220, 15%, 20%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 150ms ease;
  z-index: 100;
}

.status-badge:hover::after,
.status-badge:hover::before { opacity: 1; }

/* -----------------------------------------------
   Price history section inside edit dialogs
----------------------------------------------- */

.price-history-section {
  border-top: 1px solid hsl(0, 0%, 88%);
  margin-top: 1rem;
  padding-top: 0.75rem;
}

.price-history-section summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 0.9rem;
  color: hsl(0, 0%, 35%);
  user-select: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  list-style: none;
}

.price-history-table {
  width: 100%;
  margin-top: 0.75rem;
  font-size: 0.88rem;
  border-collapse: collapse;
}

.price-history-table th {
  text-align: left;
  font-weight: 600;
  color: hsl(0, 0%, 40%);
  border-bottom: 1px solid hsl(0, 0%, 85%);
  padding: 0.2rem 0.4rem;
  white-space: nowrap;
}

.price-history-table td {
  padding: 0.25rem 0.4rem;
  border-bottom: 1px solid hsl(0, 0%, 93%);
  vertical-align: middle;
}

.price-history-table tr.future-row td {
  color: hsl(210, 80%, 45%);
  font-style: italic;
}

.price-history-table input[type="date"],
.price-history-table input[type="number"],
.price-history-table select {
  width: 100%;
  font-size: 0.85rem;
  padding: 0.2rem 0.3rem;
  border: 1px solid hsl(0, 0%, 75%);
  border-radius: 3px;
}

/* -----------------------------------------------
   Graph dialogs (Plotly)
----------------------------------------------- */

dialog.graph-dialog {
  width: min(90vw, 960px);
  max-height: 90vh;
  overflow: auto;
}

.graph-container {
  width: 100%;
  min-height: 380px;
}


/* ─── Auth pages ─────────────────────────────────────────────── */

.auth-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: hsl(210, 100%, 95%);
  padding: 1rem;
}

.auth-card {
  width: 100%;
  max-width: 380px;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.auth-title {
  font-size: 1.6rem;
  font-weight: 600;
  margin: 0;
}

.auth-subtitle {
  color: hsl(0, 0%, 40%);
  margin: 0;
}

.auth-field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.auth-field input {
  padding: 0.45rem 0.6rem;
  border: 1px solid hsl(0, 0%, 75%);
  border-radius: 4px;
  font-size: 1rem;
  font-family: inherit;
}

.auth-field input:focus {
  outline: none;
  border-color: hsl(210, 80%, 55%);
  box-shadow: 0 0 0 3px hsl(210, 100%, 90%);
}

.auth-actions {
  display: flex;
  flex-direction: column;
}

.auth-button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 1rem;
  background: white;
  border: 1px solid hsl(0, 0%, 75%);
  border-radius: 4px;
  font-size: 1rem;
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.auth-button:hover:not(:disabled) {
  border-color: hsl(210, 80%, 55%);
  box-shadow: 0 0 0 3px hsl(210, 100%, 90%);
}

.auth-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.auth-button .bi-fingerprint {
  font-size: 1.2rem;
  color: hsl(210, 80%, 50%);
}

.auth-error {
  color: hsl(0, 65%, 40%);
  background: hsl(0, 100%, 97%);
  border: 1px solid hsl(0, 65%, 80%);
  border-radius: 4px;
  padding: 0.5rem 0.75rem;
  font-size: 0.9rem;
}

.auth-footer {
  font-size: 0.9rem;
  color: hsl(0, 0%, 50%);
  margin: 0;
}

.auth-optional {
  color: hsl(0, 0%, 60%);
  font-size: 0.85rem;
}