/*-----------------------------------------------------------------
  Stock Swing Evaluator – Custom Stylesheet
  Author: Ngọc Ánh & ChatGPT (2025‑07‑30)
  Description: Tối ưu trải nghiệm người dùng (UX) cho shortcode
  [stock_swing_evaluator] – bổ sung màu chủ đạo, dark‑mode, hiệu
  ứng hover / focus, cải thiện khả năng đọc & bo góc đồng nhất.
-------------------------------------------------------------------*/

/* ---------- Root color system ---------- */
:root {
  --sse-primary: #2563eb;          /* Blue‑600 */
  --sse-primary-hover: #1d4ed8;   /* Blue‑700 */
  --sse-bg: #ffffff;
  --sse-surface: #f9fafb;         /* Gray‑50 */
  --sse-border: #e5e7eb;          /* Gray‑200 */
  --sse-text: #111827;            /* Gray‑900 */
  --sse-muted: #6b7280;           /* Gray‑500 */
  --sse-success-bg: #dcfce7;      /* Green‑50 */
  --sse-warning-bg: #fef9c3;      /* Yellow‑50 */
}
@media (prefers-color-scheme: dark) {
  :root {
    --sse-primary: #3b82f6;        /* Blue‑500 */
    --sse-primary-hover: #60a5fa;  /* Blue‑400 */
    --sse-bg: #111827;             /* Gray‑900 */
    --sse-surface: #1f2937;        /* Gray‑800 */
    --sse-border: #374151;         /* Gray‑700 */
    --sse-text: #f9fafb;           /* Gray‑50 */
    --sse-muted: #9ca3af;          /* Gray‑400 */
    --sse-success-bg: #052e16;     /* Green‑900/opacity */
    --sse-warning-bg: #5f4d14;     /* Yellow‑900/opacity */
  }
}

/* ---------- General container ---------- */
.sse-wrapper {
  background-color: var(--sse-surface);
  border: 1px solid var(--sse-border);
  color: var(--sse-text);
  border-radius: 1rem;            /* 2xl rounded */
  box-shadow: 0 4px 12px rgb(0 0 0 / 0.05);
  transition: box-shadow 0.2s ease;
}
.sse-wrapper:hover {
  box-shadow: 0 6px 20px rgb(0 0 0 / 0.07);
}

/* ---------- Fieldsets & legends ---------- */
.sse-wrapper fieldset {
  border: 1px solid var(--sse-border);
  background-color: var(--sse-bg);
  border-radius: 0.75rem;         /* xl rounded */
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.sse-wrapper fieldset legend {
  padding: 0 0.5rem;
  font-weight: 600;
}
.sse-wrapper fieldset:hover {
  border-color: var(--sse-primary);
}

/* ---------- Checkbox styling ---------- */
.sse-wrapper input[type="checkbox"] {
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 0.25rem;
  accent-color: var(--sse-primary);
  cursor: pointer;
  transition: transform 0.15s ease;
}
.sse-wrapper input[type="checkbox"]:active {
  transform: scale(0.9);
}

/* ---------- Button ---------- */
.sse-wrapper button[type="submit"] {
  background-color: var(--sse-primary);
  color: #fff;
  border: none;
  padding: 0.6rem 1.75rem;
  border-radius: 0.5rem;
  font-weight: 600;
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}
.sse-wrapper button[type="submit"]:hover {
  background-color: var(--sse-primary-hover);
  box-shadow: 0 4px 8px rgb(0 0 0 / 0.15);
}
.sse-wrapper button[type="submit"]:focus-visible {
  outline: 2px dashed var(--sse-primary-hover);
  outline-offset: 3px;
}

/* ---------- Score boxes ---------- */
.sse-wrapper .bg-green-100 {
  background-color: var(--sse-success-bg);
}
.sse-wrapper .bg-yellow-100 {
  background-color: var(--sse-warning-bg);
}

/* ---------- Utility: fade‑in animation ---------- */
@keyframes sse-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.sse-wrapper form, .sse-wrapper > div {
  animation: sse-fade-in 0.3s ease forwards;
}

/* ---------- Responsive tweaks ---------- */
@media (max-width: 640px) {
  .sse-wrapper {
    padding: 1rem;
  }
  .sse-wrapper fieldset {
    padding: 0.75rem;
  }
  .sse-wrapper legend {
    font-size: 0.95rem;
  }
}

/* ---------- Accessibility: focus ring ---------- */
:focus-visible {
  outline: 2px dashed var(--sse-primary);
  outline-offset: 2px;
}