/* DealAlarm Experience v5
   Adds search-vs-track flow, preview states, richer dashboards, filters and editors
   without replacing the established base theme. */

.system-banner {
  margin: 18px auto 0;
  padding: 14px 16px;
  border: 1px solid #fecaca;
  background: #fff7f7;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.system-banner[hidden] { display: none !important; }
.system-banner > div { display: grid; gap: 3px; }
.system-banner strong { color: #991b1b; }
.system-banner span { color: #7f1d1d; font-size: .9rem; }

.smart-progress {
  margin: 16px auto 0;
  max-width: 920px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.smart-progress[hidden] { display: none !important; }
.smart-progress > div {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 10px 12px;
  border-radius: 12px;
  background: #f7f8fb;
  color: #7b8190;
  font-size: .82rem;
  font-weight: 700;
}
.smart-progress i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #cfd4dc;
  flex: 0 0 auto;
}
.smart-progress > div.active {
  background: #eef4ff;
  color: #1d4ed8;
}
.smart-progress > div.active i {
  background: #2563eb;
  box-shadow: 0 0 0 5px rgba(37, 99, 235, .12);
  animation: dealAlarmPulse 1s ease-in-out infinite;
}
.smart-progress > div.done {
  background: #effcf4;
  color: #18794e;
}
.smart-progress > div.done i { background: #22a06b; }

@keyframes dealAlarmPulse {
  0%, 100% { transform: scale(.9); opacity: .75; }
  50% { transform: scale(1.15); opacity: 1; }
}

.smart-preview-panel {
  max-width: 1040px;
  margin: 20px auto 0;
  background: #fff;
  border: 1px solid #e4e7ec;
  border-radius: 22px;
  box-shadow: 0 18px 55px rgba(16, 24, 40, .09);
  padding: 22px;
  text-align: left;
}
.smart-preview-panel[hidden] { display: none !important; }
.preview-head {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: flex-start;
  margin-bottom: 18px;
}
.preview-head h2 {
  margin: 4px 0 5px;
  font-size: clamp(1.25rem, 2vw, 1.7rem);
}
.preview-head p { margin: 0; color: #667085; }
.preview-close { flex: 0 0 auto; }

.preview-result-grid {
  display: grid;
  gap: 10px;
}
.preview-result-card {
  position: relative;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  border: 1px solid #edf0f5;
  border-radius: 15px;
  padding: 13px 14px;
  background: #fcfcfd;
}
.preview-rank {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: #eef4ff;
  color: #1d4ed8;
  font-weight: 800;
}
.preview-result-main { min-width: 0; }
.preview-result-main h3 {
  margin: 4px 0;
  font-size: .96rem;
  line-height: 1.35;
}
.preview-result-main p {
  margin: 0 0 7px;
  color: #667085;
  font-size: .84rem;
  line-height: 1.45;
}
.preview-price-line {
  display: flex;
  gap: 10px;
  align-items: baseline;
}
.preview-price-line strong { font-size: 1.08rem; }
.preview-price-line span { color: #667085; font-size: .78rem; }

.preview-actions {
  margin-top: 18px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.url-preview-card {
  display: grid;
  grid-template-columns: 168px minmax(0, 1fr);
  gap: 22px;
  border: 1px solid #edf0f5;
  border-radius: 18px;
  padding: 18px;
  background: #fcfcfd;
}
.url-preview-image {
  min-height: 150px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid #edf0f5;
  overflow: hidden;
  display: grid;
  place-items: center;
}
.url-preview-image img {
  width: 100%;
  height: 100%;
  max-height: 190px;
  object-fit: contain;
}
.url-preview-image.empty {
  color: #3157d5;
  font-weight: 900;
  font-size: 1.6rem;
  background: linear-gradient(145deg, #f6f8ff, #eef4ff);
}
.url-preview-main h3 { margin: 6px 0 8px; }
.url-preview-main p { color: #667085; line-height: 1.55; }
.url-preview-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 14px 0;
}
.url-preview-facts > div {
  padding: 10px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid #edf0f5;
  display: grid;
  gap: 3px;
}
.url-preview-facts small { color: #7b8190; }
.url-preview-facts strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.compact-empty {
  min-height: 120px;
  display: grid;
  place-items: center;
  gap: 6px;
  text-align: center;
}
.compact-empty span { color: #667085; }

.notification-fieldset {
  margin: 16px 0 0;
  padding: 14px;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
}
.notification-fieldset legend {
  padding: 0 7px;
  color: #344054;
  font-size: .88rem;
  font-weight: 800;
}
.notification-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
}
.notification-grid label {
  min-height: 44px;
  padding: 9px 10px;
  border: 1px solid #edf0f5;
  border-radius: 11px;
  background: #fff;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .84rem;
}
.notification-grid input[type="checkbox"] { width: 17px; height: 17px; }
.notification-grid .drop-rule input[type="number"] {
  width: 62px;
  min-width: 62px;
  padding: 6px 7px;
}

.metric-grid-v5 {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}
.metric-grid-v5 .metric-card strong {
  font-size: clamp(1.4rem, 2.6vw, 2.1rem);
}

.list-toolbar {
  margin: 0 0 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
}
.list-toolbar > label {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #667085;
  font-size: .8rem;
  white-space: nowrap;
}
.list-toolbar select {
  min-width: 150px;
  padding: 8px 10px;
  border: 1px solid #d8dde6;
  border-radius: 10px;
  background: #fff;
}
.filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.filter-chips button {
  appearance: none;
  border: 1px solid #dfe3ea;
  background: #fff;
  color: #475467;
  border-radius: 999px;
  padding: 7px 11px;
  font-size: .78rem;
  font-weight: 700;
  cursor: pointer;
}
.filter-chips button:hover { border-color: #b9c6ed; }
.filter-chips button.active {
  color: #1746bf;
  background: #eef4ff;
  border-color: #bfd0ff;
}

.status-pill.muted {
  background: #f2f4f7;
  color: #667085;
}

.price-grid-v5 {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}
.price-grid-v5 > div { min-width: 0; }
.price-grid-v5 strong {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.product-card-v5 {
  grid-template-columns: 108px minmax(0, 1fr) auto;
}
.card-actions-v5 {
  min-width: 126px;
  align-content: start;
}
.card-actions-v5 .button {
  justify-content: center;
  width: 100%;
}
.card-actions-v5 .danger-text { margin-top: 3px; }

.error-copy {
  color: #b42318 !important;
  background: #fff5f3;
  border: 1px solid #fee4e2;
  border-radius: 10px;
  padding: 8px 10px;
}

.watch-inline-results {
  margin-top: 13px;
  padding-top: 12px;
  border-top: 1px solid #edf0f5;
}
.watch-inline-results[hidden] { display: none !important; }
.loading-inline {
  color: #667085;
  font-size: .84rem;
}
.mini-result-list {
  display: grid;
  gap: 7px;
}
.mini-result-list a {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  border: 1px solid #edf0f5;
  border-radius: 10px;
  color: inherit;
  text-decoration: none;
}
.mini-result-list a:hover { background: #f8faff; }
.mini-result-list span {
  color: #667085;
  font-size: .75rem;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mini-result-list strong {
  font-size: .82rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mini-result-list b { white-space: nowrap; }

.edit-dialog {
  width: min(760px, calc(100vw - 28px));
  max-height: min(88vh, 850px);
  border: 0;
  border-radius: 22px;
  padding: 0;
  box-shadow: 0 28px 100px rgba(16, 24, 40, .25);
}
.edit-dialog::backdrop {
  background: rgba(15, 23, 42, .48);
  backdrop-filter: blur(4px);
}
.edit-dialog form {
  padding: 22px;
  overflow: auto;
  max-height: inherit;
}
.edit-dialog-head {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: flex-start;
  margin-bottom: 18px;
}
.edit-dialog-head h2 { margin: 4px 0 0; }
.edit-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.edit-grid label,
.edit-full {
  display: grid;
  gap: 6px;
  color: #344054;
  font-size: .84rem;
  font-weight: 700;
}
.edit-grid input,
.edit-grid select,
.edit-full input {
  width: 100%;
  box-sizing: border-box;
}
.edit-full { margin-top: 12px; }
.toggle-line {
  margin-top: 16px;
  display: flex;
  align-items: center;
  gap: 9px;
  font-weight: 800;
}
.edit-actions {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

@media (max-width: 1080px) {
  .metric-grid-v5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .price-grid-v5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
  .smart-progress { grid-template-columns: repeat(2, 1fr); }
  .url-preview-card { grid-template-columns: 1fr; }
  .url-preview-image { min-height: 180px; }
  .url-preview-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .notification-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .product-card-v5 { grid-template-columns: 84px minmax(0, 1fr); }
  .product-card-v5 .card-actions-v5 { grid-column: 1 / -1; }
  .card-actions-v5 {
    min-width: 0;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .smart-progress { grid-template-columns: 1fr; }
  .smart-preview-panel { padding: 16px; border-radius: 17px; }
  .preview-result-card { grid-template-columns: 30px minmax(0, 1fr); }
  .preview-result-card > .button { grid-column: 2; justify-self: start; }
  .preview-actions { flex-direction: column-reverse; }
  .preview-actions .button { width: 100%; }
  .url-preview-facts { grid-template-columns: 1fr 1fr; }
  .notification-grid { grid-template-columns: 1fr; }
  .metric-grid-v5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .list-toolbar { align-items: stretch; flex-direction: column; }
  .list-toolbar > label { justify-content: space-between; }
  .list-toolbar select { flex: 1; }
  .price-grid-v5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .product-card-v5 { grid-template-columns: 70px minmax(0, 1fr); }
  .card-actions-v5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mini-result-list a { grid-template-columns: 1fr auto; }
  .mini-result-list span { grid-column: 1 / -1; }
  .edit-grid { grid-template-columns: 1fr; }
}

@media (max-width: 430px) {
  .metric-grid-v5 { grid-template-columns: 1fr 1fr; }
  .url-preview-facts { grid-template-columns: 1fr; }
  .price-grid-v5 { grid-template-columns: 1fr 1fr; }
  .filter-chips { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; }
  .filter-chips button { flex: 0 0 auto; }
}