/**
 * styles.css — Custom styles không cover được bởi Tailwind
 * Design tokens: design_v2/DESIGN.md
 */

/* Smooth scrolling */
html {
  scroll-behavior: smooth;
}

/* Material Symbols alignment */
.material-symbols-outlined {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* Custom thin teal scrollbar */
.custom-scrollbar::-webkit-scrollbar {
  width: 6px;
}
.custom-scrollbar::-webkit-scrollbar-track {
  background: transparent;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
  background-color: #bcc9c6;
  border-radius: 9999px;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background-color: #6d7a77;
}

/* Card shadow consistent với DESIGN.md */
.card-shadow {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
}

/* Toast slide-up + fade animation */
@keyframes toastSlideUp {
  from {
    opacity: 0;
    transform: translate(-50%, 12px);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

.toast-slide-up {
  animation: toastSlideUp 0.2s ease-out forwards;
}

.toast-fade-out {
  opacity: 0;
  transform: translate(-50%, 8px);
  transition: opacity 0.2s ease-out, transform 0.2s ease-out;
}

/* Scoring pill hover animation */
.scoring-pill {
  transition: transform 0.15s ease-out, background-color 0.15s ease-out;
}
.scoring-pill:hover {
  transform: scale(1.05);
}

/* Active pill state */
.active-pill {
  background-color: #00685f;
  color: #ffffff;
  font-weight: 700;
}

/* Accordion content transition */
.accordion-content {
  overflow: hidden;
  transition: max-height 0.25s ease-out, opacity 0.2s ease-out;
}

/* Utility: focus ring */
.focus-ring:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px rgba(0, 104, 95, 0.2);
}

/* Dark mode overrides */
html.dark,
html.dark body {
  background-color: #1c1b1b;
  color: #f3f0ef;
}

html.dark .bg-surface-taupe {
  background-color: #1c1b1b;
}

html.dark .bg-surface {
  background-color: #313030 !important;
}

html.dark .bg-surface-container-low,
html.dark .bg-surface-container {
  background-color: #3d4947 !important;
}

html.dark .bg-surface-container-high,
html.dark .bg-surface-container-highest,
html.dark .bg-surface-container-lowest {
  background-color: #2a2a2a !important;
}

html.dark .text-on-surface {
  color: #f3f0ef !important;
}

html.dark .text-on-surface-variant {
  color: #bcc9c6 !important;
}

html.dark .border-outline-variant,
html.dark .border-outline {
  border-color: #525e5c !important;
}

html.dark .bg-primary {
  background-color: #6bd8cb !important;
}

html.dark .text-on-primary {
  color: #00201d !important;
}

html.dark .hover\:bg-surface-container-high:hover {
  background-color: #4a5755 !important;
}

html.dark .bg-inverse-surface {
  background-color: #e5e2e1 !important;
}

html.dark .text-inverse-on-surface {
  color: #1c1b1b !important;
}

html.dark .active-pill {
  background-color: #6bd8cb !important;
  color: #00201d !important;
}

html.dark .bg-green-50,
html.dark .bg-amber-50,
html.dark .bg-red-50 {
  background-color: rgba(255, 255, 255, 0.08) !important;
}

html.dark .bg-accent-teal-soft {
  background-color: rgba(107, 216, 203, 0.15) !important;
}

html.dark .bg-primary\/10 {
  background-color: rgba(107, 216, 203, 0.15) !important;
}

html.dark .text-primary {
  color: #6bd8cb !important;
}

html.dark .bg-primary-container,
html.dark .hover\:bg-primary-container:hover {
  background-color: #005048 !important;
}

html.dark .text-amber-600 {
  color: #fbbf24 !important;
}

html.dark .bg-amber-500 {
  background-color: #d97706 !important;
}

html.dark .text-error {
  color: #ffb4ab !important;
}

html.dark .bg-error {
  background-color: #93000a !important;
}

html.dark .text-success-emerald {
  color: #6bd8cb !important;
}

html.dark .bg-success-emerald {
  background-color: #005048 !important;
}

html.dark .border-error {
  border-color: #ffb4ab !important;
}

html.dark .bg-surface\/90,
html.dark .bg-surface\/95 {
  background-color: rgba(49, 48, 48, 0.95) !important;
}

html.dark .bg-surface\/50 {
  background-color: rgba(49, 48, 48, 0.5) !important;
}

html.dark .border-primary\/20 {
  border-color: rgba(107, 216, 203, 0.2) !important;
}

html.dark input,
html.dark textarea,
html.dark select {
  background-color: #3d4947 !important;
  color: #f3f0ef !important;
  border-color: #525e5c !important;
}

html.dark input::placeholder,
html.dark textarea::placeholder {
  color: rgba(188, 201, 198, 0.6) !important;
}

html.dark input:focus,
html.dark textarea:focus,
html.dark select:focus {
  border-color: #6bd8cb !important;
  box-shadow: 0 0 0 4px rgba(107, 216, 203, 0.15) !important;
}

html.dark input[readonly] {
  background-color: #2a2a2a !important;
}

html.dark .shadow-card {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2) !important;
}

html.dark .shadow-overlay {
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
}

/* Mobile polish */
@media (max-width: 767px) {
  .toast-slide-up {
    bottom: 6rem !important;
  }
}

@media (max-width: 374px) {
  .scoring-pill {
    width: 2.25rem;
    height: 2.25rem;
    font-size: 0.8125rem;
  }
}