/* ==========================================================================
   Price Intelligence – Price Alerts Modal (Modern Dark)
   Depends on tokens from settings.css (:root vars).
   ========================================================================== */

/* Wrapper ----------------------------------------------------------------- */
.pi-alerts-modal .modal-dialog {
  max-width: min(960px, 96vw);   /* a bit wider than Saved Views */
  margin: 4vh auto;
}

.pi-alerts-modal .modal-content {
  /* Flatter, more neutral surface */
  background: var(--surface-glass, rgba(8, 12, 22, 0.98));
  -webkit-backdrop-filter: blur(18px) saturate(115%);
  backdrop-filter: blur(18px) saturate(115%);
  color: var(--text-strong);
  border-radius: 12px;
  border: 1px solid var(--border-glass);
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.6);
  overflow: hidden;
}

/* Fallback when blur not supported */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .pi-alerts-modal .modal-content {
    background: #0b1220;
  }
}

/* Header ------------------------------------------------------------------ */
.pi-alerts-modal .modal-header {
  border-bottom: 1px solid var(--divider-glass);
  padding: 0.6rem 0.9rem;
}

.pi-alerts-modal .modal-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.2px;
}

.pi-alerts-modal .btn-close {
  filter: invert(1) opacity(0.75);
}
.pi-alerts-modal .btn-close:hover {
  opacity: 1;
}

/* Body layout ------------------------------------------------------------- */
.pi-alerts-modal .modal-body {
  padding: 1rem 0.95rem 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pi-alerts-modal .sentence-builder {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

/* Sections – simpler, less “cardy” --------------------------------------- */
.pi-alerts-modal .form-section {
  background: transparent;
  border-radius: 0;
  border: none;
  padding: 0.25rem 0 0.9rem;
}

.pi-alerts-modal h6 {
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.2px;
  margin-bottom: 0.5rem;
  color: var(--text-muted);
}

/* Inputs – flatter, quieter ---------------------------------------------- */
.pi-alerts-modal .form-control,
.pi-alerts-modal .input-select {
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-strong);
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: none;
}

.pi-alerts-modal .form-control::placeholder {
  color: var(--text-muted);
}

.pi-alerts-modal .form-control:focus {
  outline: none;
  box-shadow: var(--focus-ring);
  border-color: rgba(72, 168, 255, 0.65);
}

/* Dash dcc.Dropdown (outer div has .input-select) ------------------------ */
.pi-alerts-modal .input-select .Select-control,
.pi-alerts-modal .input-select .Select--single > .Select-control {
  background: transparent;
  border: none;
  box-shadow: none;
}

.pi-alerts-modal .input-select .Select-placeholder,
.pi-alerts-modal .input-select .Select-value-label {
  color: var(--text-strong);
}

/* Solid dropdown menu, same vibe as Saved Views -------------------------- */
.pi-alerts-modal .input-select .Select-menu-outer {
  background: #16264f;  /* solid deep navy */
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.6);
}

/* Make selects feel clickable (hand cursor) ------------------------------ */
.pi-alerts-modal .input-select,
.pi-alerts-modal .input-select .Select-control {
  cursor: pointer;
}

/* Small helper text ------------------------------------------------------ */
.pi-alerts-modal small.text-muted {
  color: var(--text-muted) !important;
}

/* Switch / checklist ----------------------------------------------------- */
.pi-alerts-modal .form-check.form-switch .form-check-input {
  background-color: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.16);
  box-shadow: none;
}
.pi-alerts-modal .form-check.form-switch .form-check-input:checked {
  background-color: var(--brand-accent);
  border-color: var(--brand-accent);
}

/* Footer ----------------------------------------------------------------- */
.pi-alerts-modal .modal-footer {
  border-top: 1px solid var(--divider-glass);
  background: transparent;         /* no extra dark band */
  padding: 0.65rem 0.9rem;
}

/* Buttons: primary + ghost secondary (same as Views) --------------------- */
.pi-alerts-modal .btn-primary {
  background-color: var(--brand-accent);
  border-color: var(--brand-accent);
  font-weight: 600;
  transition:
    background-color 0.15s ease,
    box-shadow 0.15s ease,
    transform 0.05s ease;
}
.pi-alerts-modal .btn-primary:hover {
  filter: brightness(1.03);
}
.pi-alerts-modal .btn-primary:active {
  filter: brightness(0.97);
}
.pi-alerts-modal .btn-primary:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* <<< This is the Cancel button style – mirrors .pi-views-modal >>> */
.pi-alerts-modal .btn-secondary {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: var(--text-strong);
}
.pi-alerts-modal .btn-secondary:hover {
  background: rgba(255, 255, 255, 0.04);
}

.pi-alerts-modal .btn:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* ------------------------------------------------------------------------
   Price alerts toolbar — make search + button match other pills
   ------------------------------------------------------------------------ */

.pi-alerts-toolbar .filter-input.pi-alerts-search {
  height: 40px;
  border-radius: var(--radius-md, 12px);
}

/* New alert CTA: same height & roundness */
.pi-alerts-toolbar .pi-alerts-new-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;

  height: 40px;
  padding: 0 1rem;

  border-radius: var(--radius-md, 12px);  /* <- same as search */
  font-weight: 600;
  white-space: nowrap;

  background-color: var(--brand-accent, #2FA0FF);
  border-color: var(--brand-accent, #2FA0FF);
  box-shadow: 0 8px 18px rgba(3, 35, 94, 0.25);
}

/* Optional: tiny plus icon styling */
.pi-alerts-new-icon {
  font-size: 1.1rem;
  line-height: 1;
  margin-top: -1px;
}

/* ------------------------------------------------------------------------
   Price alerts – selection bar under the grid
   ------------------------------------------------------------------------ */

.pi-alerts-card .pi-alerts-selection-bar {
  border-top: 1px solid #e3e7ef;
  background-color: #f7f9fc;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
}

/* Small, quiet selection label */
.pi-alerts-selection-label {
  color: #6b6b6b;
}

/* Compact, tidy button group */
.pi-alerts-actions-group .btn {
  font-size: 0.8125rem;
  padding-inline: 0.75rem;
}

/* Small gap between buttons inside the group */
.pi-alerts-actions-group .btn + .btn {
  margin-left: 0.25rem;
}

/* Make Edit / Pause ghost buttons – secondary to + New alert */
.pi-alerts-selection-bar .btn-outline-secondary {
  border-color: transparent;
}

.pi-alerts-selection-bar .btn-outline-secondary:hover,
.pi-alerts-selection-bar .btn-outline-secondary:focus {
  background-color: #edf3ff;
  border-color: #d0ddff;
}

/* Softer destructive style – text red, but not a huge red block */
.pi-alerts-selection-bar .btn-outline-danger {
  border-color: transparent;
  color: #d55e00; /* matches COL_NEG */
}

.pi-alerts-selection-bar .btn-outline-danger:hover,
.pi-alerts-selection-bar .btn-outline-danger:focus {
  background-color: #fff2e8;
  border-color: #f5c09e;
}

/* ------------------------------------------------------------------------
   Alerts pack dropdown — make multi‑line options readable
   ------------------------------------------------------------------------ */

.pi-alerts-root .input-select .Select-menu-outer {
  max-height: 360px;             /* scroll instead of giant menu */
}

/* Allow wrapping + add vertical spacing */
.pi-alerts-root .input-select .Select-option,
.pi-alerts-root .input-select .VirtualizedSelectOption {
  white-space: normal;           /* was nowrap; let text wrap */
  line-height: 2;
  padding-top: 4px;
  padding-bottom: 4px;
}

/* When the dropdown is closed, keep the selected value to one line */
.pi-alerts-root .input-select .Select-value-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Rows in the grid clickable */
.pi-alerts-root .custom-ag-grid .ag-row {
  cursor: pointer;
}

/* ------------------------------------------------------------------------
   Modal positioning tweak (generic)
   ------------------------------------------------------------------------ */

.modal-tweak .modal-dialog.modal-dialog-centered {
  align-items: flex-start;   /* use flexbox but not dead-center */
  margin-top: 100vh;         /* adjust this value to taste */
}
/* Fix Cancel text in Price Alerts modal so it matches Views modal */
.pi-alerts-modal .modal-footer .btn-secondary,
.pi-alerts-modal .modal-footer .btn-outline-secondary {
  color: #f9fafb !important;       /* crisp light text */
}

/* If your button label is wrapped in spans, inherit the same color */
.pi-alerts-modal .modal-footer .btn-secondary *,
.pi-alerts-modal .modal-footer .btn-outline-secondary * {
  color: inherit !important;
}