/* static/css/custom_styles.css */
/* This file contains custom CSS rules and component styles using @apply. */

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  /* Globally remove the default summary marker (the triangle/arrow) for details/summary elements. */
  summary::-webkit-details-marker {
    display: none;
  }
  summary {
    list-style: none;
  }
  /* --- High Contrast Mode Base Styles --- */
  .high-contrast a {
    @apply underline;
  }
}

@layer components {
  /* --- Button Styles --- */
  .btn {
    @apply inline-flex items-center justify-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2 transition-colors disabled:opacity-50 disabled:cursor-not-allowed;
  }
  .btn-primary {
    @apply text-white bg-primary-light hover:bg-primary-light/90 dark:bg-primary-dark dark:text-black dark:hover:bg-primary-dark/90 focus:ring-primary-light;
  }
  .btn-secondary {
    @apply text-primary-light bg-primary-light/10 hover:bg-primary-light/20 dark:text-primary-dark dark:bg-primary-dark/20 dark:hover:bg-primary-dark/30 focus:ring-primary-light;
  }
  .btn-accent {
    @apply text-black bg-accent-light hover:bg-accent-light/90 dark:text-black dark:bg-accent-dark dark:hover:bg-accent-dark/90 focus:ring-accent-light;
  }
  .btn-danger {
    @apply text-white bg-status-red hover:bg-status-red/90 focus:ring-status-red;
  }
  .btn-outline {
    @apply bg-transparent border-border-light dark:border-border-dark text-text-primary-light dark:text-text-primary-dark hover:bg-gray-50 dark:hover:bg-surface-dark;
  }
  .btn-icon {
    @apply p-1.5 rounded-full text-text-secondary-light dark:text-text-secondary-dark transition-colors;
  }
  .btn-icon-primary:hover {
    @apply bg-primary-light/10 text-primary-light dark:bg-primary-dark/20 dark:text-primary-dark;
  }
  .btn-icon-danger:hover {
    @apply bg-status-red-bg text-status-red;
  }
  .btn-icon-amber:hover {
    @apply bg-status-amber-bg text-status-amber;
  }
  .btn-icon-success:hover {
    @apply bg-status-green-bg text-status-green;
  }

  /* --- Card Style --- */
  .card {
    @apply bg-surface-light dark:bg-surface-dark p-4 sm:p-6 rounded-lg shadow-md;
  }

  /* --- Form Input Styles --- */
  .input-field {
    @apply block w-full rounded-md border-border-light dark:border-border-dark shadow-sm focus:border-primary-light focus:ring-primary-light text-base bg-background-light dark:bg-surface-dark px-3 py-2;
  }
  .form-check {
    @apply h-5 w-5 rounded border-border-light dark:border-border-dark bg-surface-light dark:bg-surface-dark focus:ring-primary-light;
  }
  .form-radio {
    @apply form-check accent-accent-light dark:accent-accent-dark;
  }
  .form-checkbox {
    @apply form-check accent-primary-light dark:accent-primary-dark;
  }
  .form-checkbox:indeterminate {
    @apply bg-primary-light/50 border-primary-light/80;
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='rgb(var(--primary-light))' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M2 8a1 1 0 0 1 1-1h10a1 1 0 1 1 0 2H3a1 1 0 0 1-1-1z'/%3e%3c/svg%3e");
  }
  .dark .form-checkbox:indeterminate {
     background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='rgb(var(--primary-dark))' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M2 8a1 1 0 0 1 1-1h10a1 1 0 1 1 0 2H3a1 1 0 0 1-1-1z'/%3e%3c/svg%3e");
  }
  .input-label {
    @apply block text-sm font-medium text-text-secondary-light dark:text-text-secondary-dark;
  }

  /* --- Typographic Styles --- */
  .page-title {
    @apply text-3xl font-bold text-text-primary-light dark:text-text-primary-dark;
  }
  .card-title {
    @apply text-xl font-semibold mb-4;
  }
  .text-muted {
    @apply text-sm text-text-secondary-light dark:text-text-secondary-dark;
  }

  /* --- Icon Styles --- */
  .icon-sm { @apply w-5 h-5; }
  .icon-md { @apply w-6 h-6; }
  .icon-lg { @apply w-8 h-8; }
  .icon-xl { @apply w-12 h-12; }

  /* --- Chatbot styles --- */
  .chatbot-container {
      @apply flex flex-col h-full;
  }
  .chatbot-message-area {
      @apply flex-grow p-4 space-y-4 overflow-y-auto min-h-0;
  }
  .chatbot-message {
      @apply p-3 rounded-lg w-4/5;
  }
  .chatbot-message-ai {
      @apply bg-primary-light/10 text-text-primary-light dark:bg-primary-dark/10 dark:text-text-primary-dark;
  }
  .chatbot-message-user {
      @apply bg-surface-light dark:bg-surface-dark ml-auto;
  }
  .chatbot-input-area {
      @apply p-4 border-t border-border-light dark:border-border-dark flex-shrink-0;
  }

  /* --- Question Numbering Styles --- */
  .questions-list-container {
    counter-reset: question-counter;
  }
  .question-card {
    counter-increment: question-counter;
  }
  .question-number::before {
    content: "Question " counter(question-counter);
  }

  /* --- Modal Components --- */
  .modal-backdrop {
    @apply fixed inset-0 bg-black bg-opacity-50 items-center justify-center z-50 animate-fade-in;
  }
  .modal-content {
    @apply bg-surface-light dark:bg-surface-dark rounded-lg shadow-xl p-6 w-full max-w-md;
  }

  /* --- Accordion Components --- */
  .accordion {
    @apply bg-surface-light dark:bg-surface-dark rounded-lg border border-border-light dark:border-border-dark;
  }
  .accordion-summary {
    @apply flex items-center justify-between p-3 cursor-pointer bg-surface-accent-light dark:bg-surface-accent-dark rounded-t-lg;
  }
}

@layer utilities {
  /* --- Utility Safelist --- */
  /* These classes are explicitly defined in the utilities layer to ensure they are generated. */
  /* This is a workaround for classes used in JS or within other @apply rules that might be missed by the JIT compiler. */
  .text-text-primary-light { color: rgb(var(--text-primary-light)); }
  .text-text-primary-dark { color: rgb(var(--text-primary-dark)); }
  .text-text-secondary-light { color: rgb(var(--text-secondary-light)); }
  .text-text-secondary-dark { color: rgb(var(--text-secondary-dark)); }

  .fill-status-green { fill: rgb(var(--status-green)); }
  .fill-status-red { fill: rgb(var(--status-red)); }
  .stroke-status-green { stroke: rgb(var(--status-green)); }
  .stroke-status-red { stroke: rgb(var(--status-red)); }

  .stroke-primary-light { stroke: rgb(var(--primary-light)); }
  .stroke-primary-dark { stroke: rgb(var(--primary-dark)); }

  .fill-surface-light { fill: rgb(var(--surface-light)); }
  .fill-surface-dark { fill: rgb(var(--surface-dark)); }

  .fill-text-primary-light { fill: rgb(var(--text-primary-light)); }
  .fill-text-primary-dark { fill: rgb(var(--text-primary-dark)); }

  .fill-background-light { fill: rgb(var(--background-light)); }
  .stroke-border-light { stroke: rgb(var(--border-light)); }
  .stroke-border-dark { stroke: rgb(var(--border-dark)); }

  .fill-primary-light { fill: rgb(var(--primary-light)); }

  .stroke-text-secondary-light { stroke: rgb(var(--text-secondary-light)); }
  .stroke-text-secondary-dark { stroke: rgb(var(--text-secondary-dark)); }

  /* Custom Scrollbar Styles */
  .scrollbar-pretty::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }
  .scrollbar-pretty::-webkit-scrollbar-track {
    background: transparent;
  }
  .scrollbar-pretty::-webkit-scrollbar-thumb {
    background-color: rgb(var(--border-light));
    border-radius: 10px;
    border: 2px solid transparent;
    background-clip: content-box;
  }
  .dark .scrollbar-pretty::-webkit-scrollbar-thumb {
    background-color: rgb(var(--border-dark));
  }
  .scrollbar-pretty::-webkit-scrollbar-thumb:hover {
    background-color: rgb(var(--text-secondary-light));
  }
  .dark .scrollbar-pretty::-webkit-scrollbar-thumb:hover {
    background-color: rgb(var(--text-secondary-dark));
  }
}


/* --- Accessibility and Other Custom Styles --- */

/* Apply dyslexia-friendly font when the class is present on the body */
.font-dyslexia {
    font-family: 'Lexend', sans-serif;
}

/* High Contrast Global Overrides */
/* These are plain CSS rules that apply on top of Tailwind's utilities. */
/* They are not processed by @apply, thus avoiding circular dependencies. */
.high-contrast .border,
.high-contrast .border-t,
.high-contrast .border-b,
.high-contrast .border-l,
.high-contrast .border-r {
  border-width: 2px !important;
}
.high-contrast .card,
.high-contrast .hc-border {
  border: 2px solid rgb(var(--border-light));
}
.dark .high-contrast .card,
.dark .high-contrast .hc-border {
  border-color: rgb(var(--border-dark));
}
.high-contrast .bg-status-green-bg {
  background-color: transparent !important;
  border: 2px solid rgb(var(--status-green));
}
.high-contrast .bg-status-amber-bg {
  background-color: transparent !important;
  border: 2px solid rgb(var(--status-amber));
}
.high-contrast .bg-status-red-bg {
  background-color: transparent !important;
  border: 2px solid rgb(var(--status-red));
}
.high-contrast .bg-gray-200 { /* For pending status pill */
  background-color: transparent !important;
  border: 2px solid rgb(var(--text-primary-light));
}
.dark .high-contrast .bg-gray-200 {
  border-color: rgb(var(--text-primary-dark));
}
.high-contrast .bg-primary-light\/10 {
  background-color: transparent !important;
  border: 2px solid rgb(var(--primary-light));
}
.dark .high-contrast .dark\:bg-primary-dark\/20 {
  background-color: transparent !important;
  border: 2px solid rgb(var(--primary-dark));
}

.high-contrast .opacity-20,
.high-contrast .opacity-50 {
  opacity: 1 !important;
}
.high-contrast .bg-opacity-50 {
  --tw-bg-opacity: 1 !important;
}


/* Make chatbot text non-selectable to discourage copy-pasting answers */
.chatbot-non-selectable::selection {
    background-color: transparent;
}
.chatbot-non-selectable {
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10+ */
    user-select: none; /* Standard syntax */
}

.bg-pattern {
    background-color: rgb(var(--background-light));
}
.dark .bg-pattern {
    background-color: rgb(var(--background-dark));
}

/* Globally remove the default summary marker (the triangle/arrow) */
details > summary {
  list-style: none;
}
summary::-webkit-details-marker {
  display: none;
}