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

.dashboard-wrapper {
    @apply w-full bg-blue-100;
  }

  .btn-delete {
    @apply bg-red-500 text-white px-4 py-2 rounded;
  }

  .keywords-list {
    display: flex;
    flex-wrap: wrap; /* Ensure keywords wrap to the next line */
    gap: 0.5rem; /* Replace mr-2 and mb-2 with a consistent gap */
    overflow-x: hidden; /* Prevent horizontal overflow */
  }

  /* Base styles for all keywords */
.keyword-suggestion {
  padding: 0.25rem 0.5rem; /* px-2 py-1 */
  border-radius: 0.25rem; /* rounded */
  cursor: pointer;
  max-width: 150px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Hover effects for each source */
.keyword-suggestion--brainstorm:hover {
  background-color: #a5f3fc; /* Slightly darker cyan (equivalent to bg-cyan-300) */
}

.keyword-suggestion--notes:hover {
  background-color: #93c5fd; /* Slightly darker blue (equivalent to bg-blue-300) */
}

.keyword-suggestion--literature_review:hover {
  background-color: #d8b4fe; /* Slightly darker purple (equivalent to bg-purple-300) */
}

.keyword-suggestion--ai_suggested:hover {
  background-color: #86efac; /* Slightly darker green (equivalent to bg-green-300) */
}

.keyword-suggestion--content:hover {
  background-color: #d1d5db; /* Slightly darker gray (equivalent to bg-gray-300) */
}

  .w-1/4 {
    overflow-x: hidden; /* Prevent horizontal overflow */
  }

  .keywords-panel {
    padding: 0.2rem; /* Add some padding inside the panel */
  }

  .mb-4 {
    margin-bottom: 1rem; /* Already set, just confirming */
  }


  .keyword-item--brainstorm {
    background-color: #cffafe; /* bg-cyan-200 */
    color: #164e63; /* text-cyan-800 */
  }

  .keyword-item--notes {
    background-color: #c7d2fe; /* bg-indigo-200 */
    color: #3730a3; /* text-indigo-800 */
  }

  .keyword-item--literature_review {
    background-color: #e9d5ff; /* bg-purple-200 */
    color: #6b21a8; /* text-purple-800 */
  }

  .keyword-item--ai_suggested {
    background-color: #bbf7d0; /* bg-green-200 */
    color: #166534; /* text-green-800 */
  }

  .keyword-item--manual {
    background-color: #e5e7eb; /* bg-gray-200 */
    color: #1f2937; /* text-gray-800 */
  }

  .keyword-item--content {
    background-color: #fed7aa; /* bg-orange-200 */
    color: #9a3412; /* text-orange-800 */
  }

  /* style the toggle collapse for the outline instructions */
  #instructions-content {
    transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out;
    opacity: 1;
  }

  #instructions-content.hidden {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    padding-top: 0;
    padding-bottom: 0;
  }


   /* reference panel in writing */

  #references-panel {
    overflow-x: hidden; /* Hide horizontal scrollbar */
    overflow-y: auto; /* Keep vertical scrollbar */
    max-height: 24rem; /* Keep max-h-96 (96 * 0.25rem = 24rem in Tailwind) */
    width: 100%; /* Ensure panel takes full container width */
    box-sizing: border-box; /* Include padding/border in width */
  }

  #references-list,
  #all-references-list {
    max-width: 100%; /* Prevent overflow beyond panel */
    width: 100%; /* Fit within panel */
  }

  .reference-item {
    max-width: 100%; /* Ensure items don't exceed parent */
    overflow: hidden; /* Clip any overflow */
  }

  .reference-item p {
    word-break: break-word; /* Break long words to wrap */
    overflow-wrap: break-word; /* Modern equivalent for wrapping */
    white-space: normal; /* Allow wrapping */
    max-width: 100%; /* Prevent text from overflowing */
  }


/* Footnotes section */
#footnotes-list {
  margin-top: 1rem;
}

.footnote-item {
  margin-bottom: 0.5rem;
  font-size: 0.875rem;
}

/* Quill styles */

/* Improved fix for dropdown labels appearing outside the dropdown */
.ql-toolbar.ql-snow .ql-picker {
  position: relative;
  display: inline-block;
  min-width: 80px; /* Increase minimum width for dropdowns */
}

/* Critical fix for size dropdown specifically */
.ql-toolbar.ql-snow .ql-picker.ql-size {
  min-width: 80px;
  width: auto;
}

.ql-toolbar.ql-snow .ql-picker.ql-size .ql-picker-label {
  padding-right: 20px; /* Ensure space for dropdown arrow */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
  box-sizing: border-box;
}

/* Hide the default content and replace with custom content */
.ql-toolbar.ql-snow .ql-picker.ql-size .ql-picker-label::before {
  content: attr(data-value) !important;
  display: inline-block;
  width: 100%;
}

/* Fix for all picker labels */
.ql-toolbar.ql-snow .ql-picker-label {
  width: 100%;
  text-align: left;
  padding: 5px 7px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  box-sizing: border-box;
}

.ql-toolbar.ql-snow .ql-picker-options {
  min-width: 100%;
  width: auto;
  max-width: 200px; /* Prevent extremely wide dropdowns */
}

/* Specific fixes for font dropdown */
.ql-toolbar.ql-snow .ql-picker.ql-font {
  min-width: 120px; /* Wider for font names */
}

/* Specific fixes for line height dropdown */
.ql-toolbar.ql-snow .ql-picker.ql-lineheight {
  min-width: 80px;
}

/* Fix for alignment button */
.ql-toolbar.ql-snow .

/* Make Quill editor wider */
#editor-container {
  width: 100% !important; /* Full width of container */
  max-width: 1200px !important; /* Maximum width */
  margin: 0 auto !important; /* Center the editor */
}

.ql-container {
  width: 100% !important;
}

.ql-toolbar.ql-snow {
  width: 100% !important;
  display: flex !important;
  flex-wrap: wrap !important; /* Allow toolbar to wrap on smaller screens */
  justify-content: flex-start !important;
  gap: 5px !important; /* Add some spacing between toolbar groups */
}

.ql-toolbar.ql-snow .ql-formats {
  margin-right: 10px !important;
  display: inline-flex !important;
  align-items: center !important;
}

/* Ensure dropdown content is visible */
.ql-toolbar.ql-snow .ql-picker-options {
  z-index: 10 !important; /* Ensure dropdowns appear above other content */
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .ql-toolbar.ql-snow {
    padding: 8px 5px !important;
  }

  .ql-toolbar.ql-snow .ql-formats {
    margin-right: 5px !important;
  }
}
.ql-size-10pt { font-size: 10pt !important; }
.ql-size-12pt { font-size: 12pt !important; }
.ql-size-14pt { font-size: 14pt !important; }
.ql-size-16pt { font-size: 16pt !important; }
.ql-size-18pt { font-size: 18pt !important; }
.ql-size-20pt { font-size: 20pt !important; }
.ql-size-24pt { font-size: 24pt !important; }
.ql-size-36pt { font-size: 36pt !important; }


/* Flash Messages */
.flash-message {
  min-width: 200px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: opacity 0.3s ease;
}

.flash-message .close-flash {
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

/* Indicators */
#saving-indicator {
  display: inline-block;
  background-color: #ffc107;
  color: black;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 14px;
}

#saving-indicator.hidden {
  display: none !important;
}

#saved-indicator {
  display: inline-block;
  background-color: #28a745;
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 14px;
  transition: opacity 0.3s ease;
}

#saved-indicator.hidden {
  display: none !important;
}

 /* Navbar Styles */
        .navbar {
            background-color: #1a2b3c; /* Deep Indigo Blue */
            color: #c6d7ee; /* Light Blue-Gray text */
            padding: 1rem 2rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            z-index: 1000;
            box-sizing: border-box;
        }

        .navbar-brand {
            display: flex;
            align-items: center;
        }

        .navbar-brand img {
            height: 40px;
            margin-right: 10px;
        }

        .navbar-brand-text {
            font-family: 'Merriweather', serif;
            font-size: 1.5rem;
            font-weight: bold;
            color: #e2e8f0;
        }

        .navbar-links a {
            color: #e2e8f0;
            margin-left: 1.5rem;
            font-size: 1rem;
            transition: color 0.3s ease;
        }

        .navbar-links a:hover {
            color: #63b3ed; /* Lighter Blue accent on hover */
            text-decoration: none;
            underline: none;
        }

        .navbar-links .dropdown {
            position: relative;
            display: inline-block;
        }

        .navbar-links .dropdown-content {
            display: none;
            position: absolute;
            background-color: #2c3e50; /* Darker Blue-Gray for dropdown */
            min-width: 200px;
            box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
            z-index: 1;
            border-radius: 4px;
            padding: 0.5rem 0;
        }

        .navbar-links .dropdown-content a {
            color: #2c3e50;
            padding: 12px 16px;
            text-decoration: none;
            display: block;
            margin-left: 0;
        }

        .navbar-links .dropdown-content a:hover {background-color: #1a2b3c; color: #8ac2ea;}

        .navbar-links .dropdown:hover .dropdown-content {
            display: block;
        }

 /* Side Menu Styles */
.side-menu {
  position: sticky;
  top: 74px; /* Navbar height (64px) + 10px margin */
  height: calc(100vh - 74px);
  align-self: flex-start;
  width: 280px;
  background-color: #2c3e50;
  color: #63b3ed;
  padding: 1rem 1rem 1rem 1.5rem;
  margin-top: 0;
  padding-top: 0;
  transition: width 0.3s ease;
  box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  z-index: 1000;
}

.side-menu.collapsed {
  width: 60px;
}

.side-menu.collapsed .menu-item-text,
.side-menu.collapsed .side-menu-toggle .menu-item-text {
  display: none;
}

/* Logo Container */
.side-menu-logo-container {
  text-align: center;
  padding-top: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #4a5c6e;
  margin-bottom: 1rem;
  transition: all 0.3s ease;
}

.side-menu-logo-container img {
  height: 100px;
  width: auto;
  object-fit: contain;
  transition: height 0.3s ease;
}

.side-menu.collapsed .side-menu-logo-container img {
  height: 40px;
}

/* Toggle Button */
.side-menu-toggle {
  background: none;
  border: none;
  color: #63b3ed;
  font-size: 1.5rem;
  cursor: pointer;
  padding: 0.5rem;
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  width: 100%;
  text-align: left;
}

.side-menu-toggle:hover {
  color: #bfdbfe;
}

/* Menu Title */
.side-menu .menu-title {
  display: flex;
  align-items: center;
  padding: 0.7rem ;
  font-size: 1.0rem;
  /* font-weight: bold; */
  color: #bcdff8;
}

.menu-title .menu-item-icon {
  margin-right: 10px;
  min-width: 20px;
  text-align: center;
  font-size: 1em;
}

.side-menu.collapsed .menu-title .menu-item-icon {
  margin: 0 auto;
}

/* Menu Items */
.side-menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
  flex-grow: 1;
}

.side-menu .menu-item {
  display: flex;
  align-items: center;
  padding: 0.2rem 0.5rem;
  margin-bottom: 0.05rem;
  border-radius: 5px;
  transition: background-color 0.3s ease, color 0.3s ease;
  color: #63b3ed;
  position: relative;
}

.side-menu .menu-item:hover {
  background-color: #3182ce;
  color: #ffffff;
}

.side-menu .menu-item a {
  display: flex;
  align-items: center;
  width: 100%;
  color: inherit;
  text-decoration: none;
}

.menu-item-icon {
  margin-right: 10px;
  min-width: 20px;
  font-size: 1em;
  color: #63b3ed;
  text-align: center;
}

.side-menu.collapsed .menu-item-icon {
  margin: 0 auto;
  display: block;
  text-align: center;
}

/* Menu Item Content */
.menu-item-content {
  display: flex;
  align-items: center;
  flex-grow: 1;
}

/* Submenu Items */
.submenu-item {
  padding-left: 1.5rem;
  font-size: 0.85rem;
  color: #90cdf4;
}

.submenu-item:hover {
  background-color: #2b6cb0;
  color: #ffffff;
}

.submenu-item .menu-item-icon {
  font-size: 1em;
  margin-right: 10px;
  min-width: 20px;
}

.side-menu.collapsed .submenu-item {
  padding-left: 1rem;
}

.side-menu.collapsed .submenu-item .menu-item-icon {
  margin: 0 auto;
}

/* Responsive (Mobile) */
@media (max-width: 768px) {
  .side-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    margin: 0;
    padding: 1rem 0;
  }

  .side-menu.collapsed {
    width: 60px;
  }

  .side-menu-toggle {
    padding: 1rem;
    font-size: 1.6rem;
  }

  .side-menu .menu-title {
    padding: 0.5rem 1rem;
    font-size: 1.6rem;
  }

  .side-menu .menu-item,
  .submenu-item {
    padding: 0.5rem;
    margin-bottom: 0.1rem;
    font-size: 1rem;
  }

  .menu-item-icon,
  .submenu-item .menu-item-icon {
    font-size: 1.4em;
    min-width: 24px;
  }

  .side-menu.collapsed .menu-item-icon,
  .side-menu.collapsed .submenu-item .menu-item-icon {
    margin: 0 auto;
  }

  .submenu-item {
    padding-left: 1.2rem;
  }

  .side-menu-logo-container img {
    height: 80px;
  }

  .side-menu.collapsed .side-menu-logo-container img {
    height: 36px;
  }
}

/* 1. Center-align all icons in collapsed state */
.side-menu.collapsed .menu-item {
  justify-content: center;
  padding-left: 0;
  padding-right: 0;
}

/* 2. Ensure anchor inside each item is centered */
.side-menu.collapsed .menu-item a {
  justify-content: center;
}

/* 3. Center the icon only, hide text in collapsed state */
.side-menu.collapsed .menu-item-icon {
  margin: 0 auto;
  display: block;
  text-align: center;
}

/* 4. Hide text label in collapsed state */
.side-menu.collapsed .menu-item-text {
  display: none;
}

/* 5. Add more vertical spacing between items in collapsed state */
.side-menu.collapsed .menu-item,
.side-menu.collapsed .submenu-item {
  margin-bottom: 0.5rem;
  padding-top: 0.4rem;
  padding-bottom: 0.4rem;
}
/* Center the toggle button in collapsed state */
.side-menu.collapsed .side-menu-toggle {
  justify-content: center;
  text-align: center;
}
/* Center the title in collapsed state */
.side-menu.collapsed .menu-title {
  justify-content: center;
  text-align: center;
}

.side-menu .menu-item,
.side-menu .menu-title,
.side-menu-toggle {
  transition: all 0.3s ease;
}



  /* Content area for non-dashboard pages it lowers views down away from navbar */
.content-area {
  padding-top: 5rem;
  flex-grow: 1;
}

/* Target the thesis structure view specifically */
body.research-structure-show .thesis-structure-content {
  max-width: 800px; /* Adjust as needed */
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

.side-menu .menu-item,
.side-menu .menu-title,
.side-menu-toggle {
  transition: all 0.3s ease;
}


/* Ensure child elements respect the width */
body.research-structure-show .thesis-structure-content > * {
  width: 100%;
}

/* Mobile adjustment */
@media (max-width: 768px) {
  body.research-structure-show .thesis-structure-content {
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
}
/* Style for support modal */

dialog[open] {
  display: block;
}
dialog {
  display: none;
}

.modal-hidden {
  display: none !important;
}

.modal-visible {
  display: flex !important;
}


#mindmap-container {
  @apply relative bg-gray-50 z-0;
}

#mindmap-container canvas {
  @apply z-[1] opacity-100;
}

.progress {
  height: 20px;
  background-color: #525151;
  border-radius: 4px;
}
.progress-bar {
  background-color: #4caf50;
  color: #fff;
  text-align: center;
  line-height: 20px;
}

/* Tailwind CSS compatible styles for Research Topic Assistant */

/* Base layout styles */
.research-journeys-container,
.research-step {
  @apply max-w-7xl mx-auto px-4 py-8;
}

.page-header {
  @apply mb-8 text-center;
}

.page-header h1 {
  @apply text-4xl font-bold text-gray-800 mb-2;
}

.page-header .lead {
  @apply text-xl text-gray-600;
}

.form-section {
  @apply mb-12 bg-white rounded-lg p-8 shadow-sm;
}

.form-section h3 {
  @apply mb-6 text-2xl font-semibold text-gray-800 border-b border-gray-200 pb-3;
}

.form-actions {
  @apply flex justify-between mt-8;
}

/* Progress Tracker */
.progress-tracker {
  @apply mb-8;
}

.progress {
  @apply h-3 rounded-full bg-gray-100 mb-2;
}

.progress-bar {
  @apply rounded-full bg-gradient-to-r from-blue-500 to-blue-600 transition-all duration-500;
}

.progress-bar.progress-high {
  @apply bg-gradient-to-r from-green-500 to-green-600;
}

.progress-bar.progress-medium {
  @apply bg-gradient-to-r from-yellow-500 to-yellow-400;
}

.step-indicator {
  @apply text-right text-sm text-gray-500;
}

/* Journey Cards */
.journey-cards {
  @apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mt-8;
}

.journey-card {
  @apply bg-white rounded-lg shadow-md overflow-hidden transition-all duration-200 hover:shadow-lg hover:-translate-y-1;
}

.journey-card__header {
  @apply p-6 bg-gradient-to-r from-blue-500 to-blue-600 text-white flex justify-between items-center;
}

.journey-card__header h2 {
  @apply m-0 text-xl font-semibold;
}

.journey-card__body {
  @apply p-6;
}

.journey-info {
  @apply mb-6;
}

.info-item {
  @apply flex mb-2;
}

.info-item .label {
  @apply font-semibold w-24 text-gray-500;
}

.info-item .value {
  @apply text-gray-800;
}

.progress-container {
  @apply mt-4;
}

.progress-label {
  @apply flex justify-between mb-2 text-sm text-gray-500;
}

.progress-bar {
  @apply h-2 bg-gray-100 rounded-full overflow-hidden;
}

.progress-fill {
  @apply h-full bg-gradient-to-r from-blue-500 to-blue-600 rounded-full;
}

.current-step {
  @apply mt-2 text-sm text-gray-500;
}

.journey-card__footer {
  @apply p-4 px-6 border-t border-gray-100 flex justify-between items-center;
}

/* Path Selection */
.path-cards {
  @apply grid grid-cols-1 md:grid-cols-2 gap-8 my-8;
}

.path-card {
  @apply bg-white rounded-lg shadow-md p-8 text-center transition-all duration-200 hover:shadow-lg hover:-translate-y-1 cursor-pointer relative overflow-hidden;
}

.path-card.selected {
  @apply border-2 border-blue-500;
}

.path-card__icon {
  @apply text-5xl text-blue-500 mb-4;
}

.path-card h3 {
  @apply mb-4 text-xl font-semibold text-gray-800;
}

.path-card p {
  @apply text-gray-500 mb-6;
}

.path-details {
  @apply mt-6;
}

.path-details ul {
  @apply text-left mb-6 pl-6;
}

.path-details ul li {
  @apply mb-2 text-gray-500;
}

.journey-form-container {
  @apply max-w-2xl mx-auto hidden;
}

.journey-form-container.active {
  @apply block;
}

/* Field Selection */
.field-cards {
  @apply grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4 mb-8;
}

.field-card {
  @apply bg-white border border-gray-200 rounded-lg p-6 text-center cursor-pointer transition-all duration-200 hover:border-blue-500 hover:-translate-y-1 hover:shadow-md relative;
}

.field-card.selected {
  @apply border-blue-500 bg-blue-50;
}

.field-card__icon {
  @apply text-3xl text-blue-500 mb-4;
}

.field-card h4 {
  @apply m-0 text-base font-medium text-gray-800;
}

.selection-indicator {
  @apply absolute top-2 right-2 text-blue-500 opacity-0 transition-opacity duration-200;
}

.field-card.selected .selection-indicator {
  @apply opacity-100;
}

.subfields-section {
  @apply hidden;
}

.subfields-section.active {
  @apply block;
}

.subfields-container {
  @apply grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4;
}

.subfield-checkbox {
  @apply bg-gray-50 rounded p-3 transition-all duration-200 hover:bg-gray-100;
}

.subfield-checkbox.selected {
  @apply bg-blue-50;
}

.subfield-checkbox label {
  @apply flex items-center cursor-pointer w-full;
}

.subfield-checkbox input {
  @apply mr-3;
}

.knowledge-level-slider {
  @apply my-8;
}

.level-labels {
  @apply flex justify-between mb-2;
}

.knowledge-level-value {
  @apply text-center mt-2 font-semibold text-blue-500;
}

.knowledge-description {
  @apply text-center mt-2 text-gray-500 italic;
}

/* Trend Exploration */
.trends-container {
  @apply grid grid-cols-1 md:grid-cols-2 gap-6;
}

.trend-card {
  @apply bg-white border border-gray-200 rounded-lg overflow-hidden transition-all duration-200 cursor-pointer;
}

.trend-card:hover {
  @apply border-blue-500 -translate-y-1 shadow-md; /* Restore hover effect */
}

.trend-card.selected {
  @apply bg-blue-500 border-blue-500 text-white; /* Simplified, removed !important to test specificity */
  background-color: #3b82f6; /* Fallback for Tailwind's bg-blue-500 */
  border-color: #3b82f6; /* Fallback for Tailwind's border-blue-500 */
  color: #ffffff; /* Fallback for Tailwind's text-white */
}

.trend-card__header {
  @apply p-5 bg-gray-50 border-b border-gray-200 flex justify-between items-start;
}

.trend-card__header h4 {
  @apply m-0 text-lg font-medium text-gray-800;
}

.popularity {
  @apply flex flex-col items-end;
}

.popularity span {
  @apply text-xs text-gray-500 mb-1;
}

.stars {
  @apply text-yellow-500;
}

.trend-card__body {
  @apply p-5;
}

.trend-card__body p {
  @apply mt-0 text-gray-800;
}

.knowledge-gaps {
  @apply mt-4 border-t border-gray-100 pt-4;
}

.knowledge-gaps h5 {
  @apply mt-0 text-sm font-medium text-gray-500;
}

.knowledge-gaps ul {
  @apply m-0 pl-5;
}

.knowledge-gaps li {
  @apply text-sm text-gray-800 mb-2;
}

.trend-card__footer {
  @apply p-4 px-5 border-t border-gray-100 flex justify-end;
}

.trend-card .selection-indicator {
  @apply static flex items-center justify-end opacity-0 transition-opacity duration-200;
}

.trend-card.selected .selection-indicator {
  @apply opacity-100;
}

.trend-card .selection-indicator i {
  @apply mr-2;
}

.trend-card.selected h4,
.trend-card.selected p,
.trend-card.selected strong {
  @apply text-white;
  color: #ffffff; /* Fallback for Tailwind's text-white */
}

/* Topic Suggestion */
.filter-controls {
  @apply flex justify-between mb-6 flex-wrap gap-4;
}

.search-filter {
  @apply flex-1 min-w-[250px];
}

.complexity-filter {
  @apply flex items-center gap-3;
}

.topics-container {
  @apply grid grid-cols-1 md:grid-cols-2 gap-6;
}

.topic-card {
  @apply bg-white border border-gray-200 rounded-lg overflow-hidden transition-all duration-200 hover:border-blue-500 hover:-translate-y-1 hover:shadow-md cursor-pointer relative;
}

.topic-card.selected {
  @apply border-blue-500 bg-blue-50 border-2 shadow-lg;
}

.topic-card .check-icon {
  @apply absolute top-4 right-4 text-green-500 text-xl opacity-0 transition-opacity duration-200;
}

.topic-card:hover .check-icon {
  @apply opacity-30;
}

.topic-card.selected .check-icon {
  @apply opacity-100;
}

.topic-card__header {
  @apply p-5 bg-gray-50 border-b border-gray-200 flex justify-between items-start relative;
}

.topic-card__header h4 {
  @apply m-0 text-lg font-medium text-gray-800 pr-8;
}

.complexity-indicator {
  @apply flex flex-col items-end;
}

.complexity-indicator span {
  @apply text-xs text-gray-500 mb-1;
}

.complexity-level {
  @apply flex gap-[3px];
}

.complexity-dot {
  @apply w-2 h-2 rounded-full bg-blue-500;
}

.complexity-dot.empty {
  @apply bg-gray-200;
}

.topic-card__body {
  @apply p-5;
}

.topic-card__body p {
  @apply mt-0 text-gray-800;
}

.topic-metadata {
  @apply mt-4 border-t border-gray-100 pt-4;
}

.metadata-item {
  @apply mb-3;
}

.metadata-item .label {
  @apply text-sm text-gray-500 mb-1 block;
}

.keywords {
  @apply flex flex-wrap gap-2;
}

.keyword-tag {
  @apply bg-gray-100 rounded-full py-1 px-3 text-xs text-gray-800;
}

.topic-card__footer {
  @apply p-4 px-5 border-t border-gray-100 flex justify-between;
}

.topic-card__footer .btn {
  @apply px-3 py-1 text-xs;
}

.topic-card__footer .btn.selected {
  @apply bg-blue-600 text-white hover:bg-blue-700 border-blue-600;
}

/* Specificity overrides for topic-card */
.topic-card.border-blue-500 {
  border-color: #3B82F6 !important;
}

.topic-card.bg-blue-50 {
  background-color: #EFF6FF !important;
}

/* Question Development */
.question-type-card {
  @apply bg-white border border-gray-200 rounded-lg p-6 cursor-pointer transition-all duration-200 hover:border-blue-500 hover:-translate-y-1 hover:shadow-md relative;
}

.question-type-card.selected {
  @apply border-blue-500 bg-blue-50 border-2 shadow-lg;
}

.question-type-card .check-icon {
  @apply absolute top-4 right-4 text-green-500 text-xl opacity-0 transition-opacity duration-200;
}

.question-type-card:hover .check-icon {
  @apply opacity-30;
}

.question-type-card.selected .check-icon {
  @apply opacity-100;
}

/* Specificity overrides for question-type-card */
[data-question-development-target="questionTypeContainer"] .question-type-card.border-blue-500 {
  border-color: #3B82F6 !important;
}

[data-question-development-target="questionTypeContainer"] .question-type-card.bg-blue-50 {
  background-color: #EFF6FF !important;
}

/* Topic Details Modal */
.topic-details-modal {
  @apply fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 opacity-0 invisible transition-all duration-300;
}

.topic-details-modal.active {
  @apply opacity-100 visible;
}

.modal-content {
  @apply bg-white rounded-lg w-[90%] max-w-3xl max-h-[90vh] overflow-y-auto shadow-xl;
}

.modal-header {
  @apply p-6 border-b border-gray-100 flex justify-between items-center;
}

.modal-header h3 {
  @apply m-0 text-xl font-semibold text-gray-800;
}

.btn-close {
  @apply bg-transparent border-0 text-2xl text-gray-500 cursor-pointer;
}

.modal-body {
  @apply p-6;
}

.modal-footer {
  @apply p-6 border-t border-gray-100 flex justify-end gap-4;
}

/* Topic Comparison */
.topic-comparison {
  @apply fixed bottom-0 left-0 w-full bg-white shadow-lg z-40 transform translate-y-full transition-transform duration-300;
}

.topic-comparison.active {
  @apply translate-y-0;
}

.comparison-header {
  @apply p-4 px-6 border-b border-gray-100 flex justify-between items-center;
}

.comparison-header h3 {
  @apply m-0 text-xl font-semibold text-gray-800;
}

.comparison-body {
  @apply p-6 overflow-x-auto;
}

.comparison-table {
  @apply w-full border-collapse;
}

.comparison-table th,
.comparison-table td {
  @apply py-3 px-4 border-b border-gray-100 text-left;
}

.comparison-table th {
  @apply bg-gray-50 font-semibold text-gray-800;
}

.comparison-table tr:last-child td {
  @apply border-b-0;
}

.comparison-actions {
  @apply flex justify-center gap-4 mt-6;
}

/* Topic Selection */
.selected-topic-card {
  @apply bg-white border border-blue-500 rounded-lg overflow-hidden mb-8;
}

.selected-topic-card__header {
  @apply p-6 bg-gradient-to-r from-blue-500 to-blue-600 text-white;
}

.selected-topic-card__header h4 {
  @apply m-0 text-2xl font-semibold;
}

.selected-topic-card__body {
  @apply p-6;
}

.complexity-text {
  @apply block mt-2 text-sm text-gray-500 italic;
}

.topic-refinement {
  @apply mt-8 pt-8 border-t border-gray-100;
}

.topic-viability {
  @apply mt-8 pt-8 border-t border-gray-100;
}

.viability-metrics {
  @apply mt-6;
}

.viability-metric {
  @apply mb-6;
}

.metric-label {
  @apply font-semibold mb-2 text-gray-800;
}

.metric-value {
  @apply mb-2;
}

.metric-description {
  @apply text-sm text-gray-500 mt-2;
}

.recommendation {
  @apply flex items-start gap-4 bg-gray-50 rounded-lg p-4;
}

.recommendation-icon {
  @apply text-2xl;
}

.recommendation-icon.positive {
  @apply text-green-600;
}

.recommendation-icon.neutral {
  @apply text-yellow-500;
}

.recommendation-icon.caution {
  @apply text-red-500;
}

.recommendation-text strong {
  @apply block mb-2 text-gray-800;
}

.recommendation-text p {
  @apply m-0 text-sm text-gray-500;
}

/* Question Development (continued) */
.question-type-card h4 {
  @apply mt-0 mb-4 text-lg font-medium text-gray-800;
}

.question-type-card p {
  @apply text-gray-500 mb-4;
}

.question-type-card .example {
  @apply text-sm text-gray-800 italic bg-gray-50 p-3 rounded;
}

.question-feedback {
  @apply mt-4;
}

.question-suggestions {
  @apply mt-8;
}

.suggestion-list {
  @apply mt-4;
}

.suggestion-item {
  @apply bg-gray-50 rounded p-3 px-4 mb-3 cursor-pointer transition-all duration-200 hover:bg-gray-100;
}

.secondary-questions-container {
  @apply mb-6;
}

.secondary-question-item {
  @apply mb-4;
}

/* Problem Definition */
.topic-summary {
  @apply bg-gray-50 rounded-lg p-6 mb-8;
}

.topic-summary h4 {
  @apply mt-0 text-gray-800;
}

.field-info {
  @apply text-gray-500 text-sm;
}

.questions-summary {
  @apply mt-4 pt-4 border-t border-gray-200;
}

.questions-summary h5 {
  @apply mb-2 text-gray-500 text-sm;
}

.primary-question {
  @apply font-semibold text-gray-800;
}

.secondary-questions-list {
  @apply mt-2 pl-5;
}

.secondary-questions-list li {
  @apply mb-2 text-gray-800;
}

.suggested-gaps {
  @apply mt-6;
}

.significance-prompts {
  @apply mt-6;
}

.prompt-list {
  @apply mt-4;
}

.prompt-item {
  @apply bg-gray-50 rounded p-3 px-4 mb-3;
}

.prompt-item strong {
  @apply text-gray-800;
}

.challenges-container {
  @apply grid grid-cols-1 md:grid-cols-2 gap-4 mt-4;
}

.challenge-checkbox {
  @apply bg-gray-50 rounded p-3 transition-all duration-200 hover:bg-gray-100;
}

.challenge-checkbox label {
  @apply flex items-center cursor-pointer w-full;
}

.challenge-checkbox input {
  @apply mr-3;
}

.other-challenge {
  @apply col-span-full mt-4;
}

.other-challenge-input {
  @apply mt-3;
}

.other-challenge-input.hidden {
  @apply hidden;
}

/* Methodology Selection */
.approach-cards {
  @apply grid grid-cols-1 md:grid-cols-2 gap-6 mb-8;
}

.approach-card {
  @apply bg-white border border-gray-200 rounded-lg p-6 cursor-pointer transition-all duration-200 hover:border-blue-500 hover:-translate-y-1 hover:shadow-md relative;
}

.approach-card:hover {
  @apply border-blue-500;
}

.approach-card.selected {
  @apply border-blue-500 bg-blue-50;
}

.approach-card h4 {
  @apply mt-0 mb-4 text-lg font-medium text-gray-800;
}

.approach-card p {
  @apply text-gray-500 mb-0;
}

.methods-group {
  @apply mb-8;
}

.methods-group.hidden {
  @apply hidden;
}

.methods-group h4 {
  @apply mb-4 text-gray-800;
}

.methods-checkboxes {
  @apply grid grid-cols-1 md:grid-cols-2 gap-4;
}

.method-checkbox {
  @apply bg-gray-50 rounded p-3 transition-all duration-200 hover:bg-gray-100;
}

.method-checkbox label {
  @apply flex items-center cursor-pointer w-full;
}

.method-checkbox input {
  @apply mr-3;
}

.other-method {
  @apply mt-4;
}

.other-method-input {
  @apply mt-3;
}

.other-method-input.hidden {
  @apply hidden;
}

.data-source-suggestions {
  @apply mt-6;
}

.suggestion-tags {
  @apply flex flex-wrap gap-2 mt-4;
}

.suggestion-tag {
  @apply bg-gray-100 rounded-full py-2 px-4 text-sm text-gray-800 cursor-pointer transition-all duration-200 hover:bg-gray-200;
}

.rationale-prompts {
  @apply mt-6;
}

/* Resource Identification */
.resources-container {
  @apply grid grid-cols-1 md:grid-cols-2 gap-6 mb-8;
}

.resource-card {
  @apply bg-white border border-gray-200 rounded-lg overflow-hidden transition-all duration-200 hover:border-blue-500 hover:-translate-y-1 hover:shadow-md;
}

.resource-card__header {
  @apply p-5 bg-gray-50 border-b border-gray-200 flex justify-between items-start;
}

.resource-card__header h4 {
  @apply m-0 text-lg font-medium text-gray-800;
}

.resource-type {
  @apply text-xs py-1 px-2 rounded-full bg-gray-100 text-gray-800;
}

.resource-type.article {
  @apply bg-blue-50 text-blue-500;
}

.resource-type.book {
  @apply bg-green-50 text-green-600;
}

.resource-type.dataset {
  @apply bg-yellow-50 text-yellow-600;
}

.resource-type.website {
  @apply bg-blue-50 text-blue-500;
}

.resource-type.video {
  @apply bg-red-50 text-red-500;
}

.resource-card__body {
  @apply p-5;
}

.resource-metadata {
  @apply mt-4;
}

.resource-card__footer {
  @apply p-4 px-5 border-t border-gray-100 flex justify-between;
}

.bookmarked-resources-container {
  @apply mb-6;
}

.bookmarked-resource-item {
  @apply flex justify-between items-center p-4 bg-gray-50 rounded-lg mb-4;
}

.resource-info h4 {
  @apply m-0 mb-2 text-base font-medium;
}

.resource-info p {
  @apply m-0 mt-2 text-sm text-gray-500;
}

.resource-actions {
  @apply flex gap-2;
}

.empty-bookmarks {
  @apply p-8 text-center bg-gray-50 rounded-lg text-gray-500;
}

.add-resource-form {
  @apply bg-gray-50 rounded-lg p-6 mt-6;
}

.add-resource-form.hidden {
  @apply hidden;
}

.timeline-container {
  @apply mb-6;
}

.timeline-item {
  @apply bg-gray-50 rounded-lg p-6 mb-4 relative;
}

.timeline-item__header {
  @apply flex justify-between items-start mb-4;
}

.timeline-item__header .form-group {
  @apply flex-1 mr-4;
}

/* Plan Generation */
.plan-summary {
  @apply bg-white rounded-lg shadow-md overflow-hidden mb-8;
}

.plan-header {
  @apply p-8 bg-gradient-to-r from-blue-500 to-blue-600 text-white;
}

.plan-header h2 {
  @apply m-0 mb-4 text-3xl font-bold;
}

.plan-meta {
  @apply flex gap-3;
}

.field-badge,
.subfield-badge {
  @apply text-sm py-1 px-3 rounded-full bg-white bg-opacity-20;
}

.plan-sections {
  @apply p-8;
}

.plan-section {
  @apply mb-10 pb-10 border-b border-gray-100;
}

.plan-section:last-child {
  @apply mb-0 pb-0 border-b-0;
}

.plan-section h3 {
  @apply mt-0 text-gray-800 text-2xl font-semibold mb-6;
}

.plan-section h4 {
  @apply text-gray-500 text-base font-medium mb-2;
}

.timeline-visualization {
  @apply mb-8;
}

.timeline-chart {
  @apply flex h-10 bg-gray-100 rounded overflow-hidden;
}

.timeline-bar {
  @apply h-full relative overflow-hidden;
}

.timeline-bar:nth-child(odd) {
  @apply bg-blue-500;
}

.timeline-bar:nth-child(even) {
  @apply bg-blue-600;
}

.timeline-bar-label {
  @apply absolute top-1 left-2 text-white text-xs whitespace-nowrap overflow-hidden overflow-ellipsis max-w-[calc(100%-20px)];
}

.timeline-bar-duration {
  @apply absolute bottom-1 right-2 text-white text-opacity-80 text-xs;
}

.timeline-phases {
  @apply mt-6;
}

.timeline-phase {
  @apply bg-gray-50 rounded-lg p-5 mb-4;
}

.phase-header {
  @apply flex justify-between items-center mb-3;
}

.phase-header h5 {
  @apply m-0 text-gray-800;
}

.phase-duration {
  @apply text-sm text-gray-500;
}

.timeline-phase p {
  @apply m-0 text-gray-800;
}

.bookmarked-resources-list ul {
  @apply pl-5;
}

.bookmarked-resources-list li {
  @apply mb-3;
}

.resource-type-badge {
  @apply text-xs py-1 px-2 rounded-full bg-gray-100 text-gray-800 ml-2;
}

.resource-link {
  @apply ml-2 text-blue-500;
}

.export-options {
  @apply mt-12 text-center;
}

.export-buttons {
  @apply flex justify-center gap-4 mt-4;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
  .filter-controls {
    @apply flex-col;
  }

  .topic-card__header,
  .resource-card__header {
    @apply flex-col;
  }

  .complexity-indicator,
  .resource-type {
    @apply mt-3 self-start;
  }

  .bookmarked-resource-item {
    @apply flex-col items-start;
  }

  .resource-actions {
    @apply mt-4 self-end;
  }

  .modal-content {
    @apply w-[95%];
  }
}

/* Animations */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.fade-in {
  animation: fadeIn 0.3s ease;
}

@keyframes slideUp {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.slide-up {
  animation: slideUp 0.3s ease;
}

/* Form Elements */
.form-control {
  @apply block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500;
}

.form-group {
  @apply mb-4;
}

.form-group label {
  @apply block text-sm font-medium text-gray-700 mb-1;
}

/* Buttons */
.btn {
  @apply inline-flex items-center justify-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium focus:outline-none focus:ring-2 focus:ring-offset-2 transition-colors duration-200;
}

.btn-primary {
  @apply bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500;
}

.btn-success {
  @apply bg-green-600 text-white hover:bg-green-700 focus:ring-green-500;
}

.btn-outline-primary {
  @apply bg-white text-blue-600 border-blue-600 hover:bg-blue-50 focus:ring-blue-500;
}

.btn-outline-secondary {
  @apply bg-white text-gray-700 border-gray-300 hover:bg-gray-50 focus:ring-gray-500;
}

.btn-outline-danger {
  @apply bg-white text-red-600 border-red-600 hover:bg-red-50 focus:ring-red-500;
}

.btn-sm {
  @apply px-3 py-1 text-xs;
}

/* Alerts */
.alert {
  @apply p-4 mb-4 rounded-md;
}

.alert-info {
  @apply bg-blue-50 text-blue-700;
}

.alert-success {
  @apply bg-green-50 text-green-700;
}

.alert-warning {
  @apply bg-yellow-50 text-yellow-700;
}

.alert-danger {
  @apply bg-red-50 text-red-700;
}

/* Icons */
.bi {
  @apply inline-block;
}

/* Utilities */
.hidden {
  @apply hidden;
}

/* Specificity overrides for field-selection */
[data-field-selection-target="card"].border-blue-500 {
  border-color: #3B82F6 !important;
}

[data-field-selection-target="card"].bg-blue-50 {
  background-color: #EFF6FF !important;
}

/* Specificity overrides for topic-suggestion */
[data-topic-suggestion-target="topicsContainer"] .topic-card.border-blue-500 {
  border-color: #3B82F6 !important;
}

[data-topic-suggestion-target="topicsContainer"] .topic-card.bg-blue-50 {
  background-color: #EFF6FF !important;
}
/* writing section buttons */

.qs-button.active {
  background-color: #ecfcca; /* emerald-500 */
  color: #00695c;
  border: 1px solid #b2dfdb; /* lighter border */
}

.section-button {
  background-color: #e0f2f1; /* emerald-500 */
  color: #00695c;
  border: 1px solid #b2dfdb; /* lighter border */
}

.section-button:hover {
    background-color: #b2dfdb; /* Slightly deeper teal on hover */
    color: #004d40; /* Even deeper text */
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  }

.section-button.active {
  background-color: #b2dfdb; /* Slightly deeper teal on hover */
    color: #004d40; /* Even deeper text */
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.document-item {
  cursor: move;
  user-select: none;
}

/* Hide export buttons when printing or generating PDFs */
/* Global browser printing */
@media print {

  /* Existing behavior */
  .no-print,
  .print\:hidden {
    display: none !important;
    visibility: hidden !important;
  }

  @page {
    size: auto;
    margin: 0.5in;
  }

  /* Hide entire application layout */
  body * {
    visibility: hidden !important;
  }

  /* Show only page content */
  #printable-page-content,
  #printable-page-content * {
    visibility: visible !important;
  }

  /* Position printable content */
  #printable-page-content {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Explicitly hide app chrome */
  nav,
  aside,
  header,
  #support-widget {
    display: none !important;
    visibility: hidden !important;
  }
}

.ql-clipboard {
  -webkit-user-select: text !important;
  -moz-user-select: text !important;
  -ms-user-select: text !important;
  user-select: text !important;
}