/* Watchlists workspace — page-scoped refinements for list browsing and editing. */
body.watchlists-page {
  background:
    radial-gradient(ellipse at 16% 0%, rgba(59, 130, 246, 0.055), transparent 38rem),
    var(--bg-secondary, #0a0e17);
  font-family: "DM Sans", system-ui, sans-serif;
}

body.watchlists-page > .container.my-5 {
  width: min(100% - 2rem, 1440px);
  max-width: 1440px;
  margin-top: clamp(1rem, 2.6vw, 2rem) !important;
  margin-bottom: 2.4rem !important;
}

body.watchlists-page .page-header {
  position: relative;
  overflow: hidden;
  margin-bottom: 1.35rem;
  padding: clamp(1.2rem, 2.6vw, 1.8rem);
  border: 1px solid rgba(148, 163, 184, 0.15);
  border-radius: 15px;
  background: linear-gradient(112deg, rgba(20, 31, 49, 0.98), rgba(17, 29, 49, 0.95));
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.16), inset 0 1px rgba(255, 255, 255, 0.035);
}

body.watchlists-page .page-header::after {
  position: absolute;
  top: -140px;
  right: 12%;
  width: 250px;
  height: 250px;
  border-radius: 50%;
  background: rgba(0, 232, 157, 0.075);
  content: "";
  filter: blur(56px);
  pointer-events: none;
}

body.watchlists-page .page-header > .d-flex { position: relative; z-index: 1; }
body.watchlists-page .page-header h1 { color: #eef5fc; font-size: clamp(1.45rem, 2.6vw, 1.9rem); font-weight: 750; letter-spacing: -0.04em; }
body.watchlists-page .page-header p { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem; color: #92a2b6 !important; font-size: 0.8rem; }
body.watchlists-page .page-header .badge.bg-warning { border: 1px solid rgba(250, 204, 21, 0.2); border-radius: 999px; color: #f3d57a !important; background: rgba(250, 204, 21, 0.09) !important; font-size: 0.64rem; font-weight: 650 !important; max-width: 100%; line-height: 1.35; text-align: left; white-space: normal; }
body.watchlists-page .header-illustration { position: relative; z-index: 1; display: grid; width: 62px; height: 62px; flex: 0 0 62px; place-items: center; border: 1px solid rgba(250, 204, 21, 0.16); border-radius: 15px; background: rgba(250, 204, 21, 0.045); }
body.watchlists-page .header-illustration i { color: #f4c84b !important; font-size: 1.8rem !important; filter: drop-shadow(0 5px 14px rgba(250, 204, 21, 0.18)); }

body.watchlists-page #watchlists-container {
  --bs-gutter-x: 1.1rem;
  --bs-gutter-y: 0.2rem;
}

body.watchlists-page #watchlists-container > [class*="col-"]:not(#loading-state):not(#empty-state) { display: flex; min-width: 0; }

body.watchlists-page .watchlist-card {
  display: flex;
  width: 100%;
  min-height: 250px;
  overflow: hidden;
  border: 1px solid rgba(110, 139, 173, 0.19);
  border-radius: 13px;
  background: linear-gradient(148deg, rgba(20, 31, 49, 0.99), rgba(15, 24, 39, 0.99));
  box-shadow: 0 8px 21px rgba(0, 0, 0, 0.14), inset 0 1px rgba(255, 255, 255, 0.025);
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

body.watchlists-page .watchlist-card:hover {
  transform: translateY(-3px);
  border-color: rgba(86, 160, 208, 0.38);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.22), 0 0 20px rgba(59, 130, 246, 0.045);
}

body.watchlists-page .watchlist-header {
  min-height: 76px;
  padding: 1rem 5rem 0.85rem 1.05rem;
  border-bottom: 1px solid rgba(82, 139, 196, 0.17);
  border-radius: 0;
  background: linear-gradient(115deg, rgba(37, 72, 113, 0.6), rgba(26, 49, 78, 0.42));
}

body.watchlists-page .watchlist-title {
  overflow: hidden;
  margin-bottom: 0.18rem;
  color: #eef5fc;
  font-size: 0.98rem;
  font-weight: 750;
  letter-spacing: 0.01em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.watchlists-page .stock-count { color: #9cacc0; font-size: 0.7rem; }

body.watchlists-page .watchlist-actions { top: 0.72rem; right: 0.75rem; gap: 0.35rem; }
body.watchlists-page .action-btn { width: 31px; height: 31px; border-color: rgba(148, 163, 184, 0.13); border-radius: 8px; color: #aebdd0; background: rgba(9, 16, 27, 0.38); font-size: 0.8rem; }
body.watchlists-page .action-btn:hover { transform: translateY(-1px); border-color: rgba(0, 232, 157, 0.3); color: #75ddb9; background: rgba(0, 232, 157, 0.08); }

body.watchlists-page .watchlist-body {
  display: flex;
  flex: 1;
  align-items: flex-start;
  padding: 0.9rem 0.9rem 0.75rem;
  background: rgba(8, 15, 25, 0.28);
}

body.watchlists-page .stocks-container { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 0.42rem; width: 100%; }

body.watchlists-page .stock-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  min-height: 37px;
  margin: 0;
  padding: 0.25rem 0.65rem 0.25rem 0.32rem;
  border: 1px solid rgba(110, 139, 173, 0.16);
  border-radius: 999px;
  color: #cfdae7;
  background: linear-gradient(100deg, rgba(29, 44, 66, 0.95), rgba(24, 37, 57, 0.95));
  font: 700 0.68rem ui-monospace, "Cascadia Code", monospace;
  letter-spacing: 0.025em;
  transition: transform 140ms ease, border-color 140ms ease, background 140ms ease;
}

body.watchlists-page .stock-badge:hover {
  transform: translateY(-1px);
  border-color: rgba(0, 232, 157, 0.28);
  color: #e7fff7;
  background: rgba(31, 58, 70, 0.96);
}

body.watchlists-page .stock-badge .stock-logo {
  display: block;
  width: 25px;
  height: 25px;
  flex: 0 0 25px;
  border: 1px solid rgba(148, 163, 184, 0.12);
  border-radius: 50%;
  background: #f7fafc;
  object-fit: contain;
}

body.watchlists-page .watchlist-footer {
  min-height: 45px;
  padding: 0.7rem 1rem;
  border-top: 1px solid rgba(148, 163, 184, 0.09);
  border-radius: 0;
  background: rgba(7, 13, 23, 0.48);
}

body.watchlists-page .watchlist-footer small { color: #8292a7 !important; font-size: 0.67rem; }

body.watchlists-page .create-watchlist-card {
  display: flex;
  width: 100%;
  min-height: 250px;
  height: 100%;
  border: 1px dashed rgba(115, 132, 167, 0.33);
  border-radius: 13px;
  background: linear-gradient(145deg, rgba(17, 25, 42, 0.38), rgba(13, 20, 34, 0.35));
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

body.watchlists-page .create-watchlist-card:hover {
  transform: translateY(-3px);
  border-color: rgba(112, 89, 232, 0.62);
  background: linear-gradient(145deg, rgba(67, 55, 120, 0.11), rgba(0, 232, 157, 0.035));
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.16);
}

body.watchlists-page .create-content { padding: 1.2rem; color: #c6d2e0; }
body.watchlists-page .create-content > div:first-child { display: grid; width: 48px; height: 48px; margin: 0 auto 0.8rem !important; place-items: center; border: 1px solid rgba(132, 107, 244, 0.22); border-radius: 14px; color: #a89aff; background: rgba(124, 97, 238, 0.1); font-size: 1.65rem !important; }
body.watchlists-page .create-content h5 { color: #e6edf6; font-size: 0.9rem; font-weight: 700; }
body.watchlists-page .create-content p { color: #8797ad !important; font-size: 0.75rem; }

body.watchlists-page .empty-state {
  padding: 3.5rem 1.5rem !important;
  border: 1px solid rgba(110, 139, 173, 0.16);
  border-radius: 14px;
  background: rgba(18, 28, 45, 0.72);
}
body.watchlists-page .empty-state h3 { color: #e6edf6; }
body.watchlists-page .empty-state p { color: #92a2b7 !important; }

body.watchlists-page .alert { border-radius: 10px; }

body.watchlists-page .modal-content {
  overflow: hidden;
  border: 1px solid rgba(110, 139, 173, 0.24);
  border-radius: 13px;
  color: #dce6f2;
  background: #141f31;
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.42);
}
body.watchlists-page .modal-header,
body.watchlists-page .modal-footer { border-color: rgba(148, 163, 184, 0.14); background: rgba(255, 255, 255, 0.018); }
body.watchlists-page .modal-title { color: #edf5fc; font-weight: 700; }
body.watchlists-page .modal-body { color: #bdc9d8; }
body.watchlists-page .modal-body .form-label { color: #c4d0de; font-size: 0.78rem; font-weight: 650; }
body.watchlists-page .modal-body .form-control { border-color: rgba(148, 163, 184, 0.2); border-radius: 8px; color: #e3edf7; background: #0e1726; }
body.watchlists-page .modal-body .form-control:focus { border-color: rgba(0, 232, 157, 0.5); box-shadow: 0 0 0 3px rgba(0, 232, 157, 0.09); }
body.watchlists-page .modal-body .form-text { color: #8495aa; }
body.watchlists-page #selected-stocks { min-height: 100px; border-color: rgba(148, 163, 184, 0.18) !important; background: rgba(7, 13, 23, 0.36); }
body.watchlists-page .btn-close { filter: invert(1) grayscale(1); opacity: 0.75; }

body.watchlists-page .footer { border-top: 1px solid rgba(148, 163, 184, 0.11); background: #111a29 !important; }
body.watchlists-page .footer p,
body.watchlists-page .footer small,
body.watchlists-page .footer a { color: #8292a7 !important; }

@media (max-width: 767px) {
  body.watchlists-page > .container.my-5 { width: calc(100% - 1.1rem); margin-top: 0.8rem !important; }
  body.watchlists-page .page-header { padding: 1.05rem; }
  body.watchlists-page .header-illustration { width: 48px; height: 48px; flex-basis: 48px; }
  body.watchlists-page .header-illustration i { font-size: 1.4rem !important; }
  body.watchlists-page #watchlists-container { --bs-gutter-x: 0.75rem; }
  body.watchlists-page .watchlist-card,
  body.watchlists-page .create-watchlist-card { min-height: 220px; }
  body.watchlists-page .watchlist-header { padding-left: 0.85rem; }
  body.watchlists-page .watchlist-body { padding: 0.75rem; }
}

@media (max-width: 420px) {
  body.watchlists-page .page-header h1 { font-size: 1.35rem; }
  body.watchlists-page .page-header p { font-size: 0.73rem; }
  body.watchlists-page .watchlist-card,
  body.watchlists-page .create-watchlist-card { min-height: 205px; }
  body.watchlists-page .watchlist-actions { top: 0.6rem; right: 0.6rem; }
  body.watchlists-page .stock-badge { min-height: 34px; padding-right: 0.55rem; font-size: 0.64rem; }
  body.watchlists-page .stock-badge .stock-logo { width: 23px; height: 23px; flex-basis: 23px; }
}

@media (prefers-reduced-motion: reduce) {
  body.watchlists-page *, body.watchlists-page *::before, body.watchlists-page *::after { transition-duration: 0.01ms !important; }
  body.watchlists-page .watchlist-card:hover,
  body.watchlists-page .stock-badge:hover,
  body.watchlists-page .create-watchlist-card:hover { transform: none; }
}