/**
 * Card styles for Tool Response Dashboard - Trello-inspired column-based layout
 * Includes styling for all tools: Sumy, DistilBART, RAKE, YAKE, NER, plus new tools:
 * BERT Extractive and TinyLlama.
 */

/* Original styles for cards and other elements */
.card-header {
  border-bottom: 1px solid rgba(255,255,255,0.3);
  margin-bottom: 15px;
  padding-bottom: 12px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-direction: column;
  width: 100%;
}

.card-title {
  display: flex;
  align-items: center;
  margin-bottom: 5px;
  width: 100%;
  justify-content: space-between;
}

.card-format {
  font-size: 12px;
  font-style: italic;
  opacity: 0.8;
}

/* Tool and level badges */
.tool-badge {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 3px;
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-right: 4px;
  color: white;
}

.level-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 3px;
  font-size: 11px;
  font-weight: normal;
  background-color: #f4f5f7;
  color: #5e6c84;
}

/* Paragraphs section */
.card-paragraphs {
  margin-bottom: 12px;
}

.paragraphs-container {
  margin-top: 8px;
  max-height: 200px;
  overflow-y: auto;
}

.paragraphs-container p {
  margin: 0 0 8px 0;
  color: #172b4d;
}

.paragraphs-container p.with-border {
  border-bottom: 1px solid #f4f5f7;
  padding-bottom: 8px;
}

/* Key points section */
.card-key-points {
  margin-bottom: 12px;
}

.key-points-list {
  margin-top: 6px;
  padding-left: 20px;
  margin-bottom: 0;
}

.key-points-list li {
  margin-bottom: 6px;
  color: #172b4d;
}

/* Keywords section for RAKE and YAKE */
.card-keywords {
  margin-bottom: 12px;
}

/* Tag cloud for keywords */
.tag-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

.keyword-tag {
  display: inline-block;
  padding: 2px 8px;
  background-color: #f4f5f7;
  border-radius: 3px;
  font-size: 12px;
  white-space: nowrap;
  color: #5e6c84;
}

/* Entities section for NER */
.card-entities {
  margin-bottom: 12px;
}

.entity-type {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 11px;
  font-weight: 600;
  background-color: #f4f5f7;
  color: #172b4d;
  margin-right: 4px;
}

.entity-list {
  list-style-type: none;
  padding-left: 0;
  margin-top: 8px;
}

.entity-list li {
  margin-bottom: 6px;
  padding: 4px 0;
  border-bottom: 1px solid rgba(9,30,66,0.08);
}

/* JSON button and content */
.json-toggle-btn {
  font-size: 11px;
  padding: 4px 8px;
  background-color: #f4f5f7;
  border: none;
  color: #5e6c84;
  border-radius: 3px;
  cursor: pointer;
  transition: background-color 0.2s;
  margin-top: auto;
}

.json-toggle-btn:hover {
  background-color: #e4e6ed;
}

.json-content {
  display: none;
  font-size: 11px;
  max-height: 200px;
  overflow-y: auto;
  background-color: #f4f5f7;
  padding: 8px;
  border-radius: 3px;
  margin-top: 8px;
  color: #172b4d;
  font-family: monospace;
  width: 100%;
}

.json-content.visible {
  display: block;
}

/* Tool-specific colors */
.tool-sumy .tool-badge {
  background-color: #0079bf;
}

.tool-distilbart .tool-badge {
  background-color: #7A59AC;
}

.tool-rake .tool-badge {
  background-color: #00a651;
}

.tool-yake .tool-badge {
  background-color: #eb5a46;
}

.tool-ner .tool-badge {
  background-color: #ff9f1a;
}

/* NEW: BERT Extractive styling */
.tool-bert-extractive .tool-badge {
  background-color: #36B37E;
}

/* NEW: TinyLlama styling */
.tool-tinyllama .tool-badge {
  background-color: #FF8B00;
}

/* View control buttons */
.view-controls {
  display: flex;
  gap: 10px;
  margin-bottom: 15px;
}

.view-btn {
  padding: 8px 16px;
  background: #f4f5f7;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  font-weight: 400;
  transition: all 0.2s;
  color: #172b4d;
}

.view-btn.active {
  background: #0079bf;
  color: white;
}

/* Tool selection area */
.tool-selection {
  margin-bottom: 15px;
  padding: 12px;
  background: #f4f5f7;
  border-radius: 3px;
  border: 1px solid #dfe1e6;
}

.tool-selection h3 {
  margin-top: 0;
  margin-bottom: 10px;
  font-size: 14px;
  color: #172b4d;
  font-weight: 600;
}

.tool-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tool-option {
  display: flex;
  align-items: center;
  padding: 6px 10px;
  background: white;
  border-radius: 3px;
  border: 1px solid #dfe1e6;
}

.tool-option label {
  margin-left: 6px;
  cursor: pointer;
  user-select: none;
  font-size: 13px;
  color: #172b4d;
}

/* Column-based Layout Styles */
.tool-board {
  display: flex;
  width: 100%;
  height: calc(100vh - 250px);
  min-height: 500px;
  overflow-x: auto;
  gap: 16px;
  padding: 10px 0;
}

.tool-column {
  flex: 0 0 300px;
  width: 300px;
  min-width: 300px;
  display: flex;
  flex-direction: column;
  background-color: #f1f2f4;
  border-radius: 3px;
  height: 100%;
  max-height: 100%;
}

.tool-column-header {
  padding: 10px 16px;
  background-color: #ebecf0;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  font-weight: 600;
  font-size: 14px;
  color: #172b4d;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 1px 0 rgba(9,30,66,0.08);
}

.tool-column-cards {
  padding: 8px;
  overflow-y: auto;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Tool column header colors */
.tool-column.tool-sumy .tool-column-header {
  border-top: 2px solid #0079bf;
}

.tool-column.tool-distilbart .tool-column-header {
  border-top: 2px solid #7A59AC;
}

.tool-column.tool-rake .tool-column-header {
  border-top: 2px solid #00a651;
}

.tool-column.tool-yake .tool-column-header {
  border-top: 2px solid #eb5a46;
}

.tool-column.tool-ner .tool-column-header {
  border-top: 2px solid #ff9f1a;
}

.tool-column.tool-bert-extractive .tool-column-header {
  border-top: 2px solid #36B37E;
}

.tool-column.tool-tinyllama .tool-column-header {
  border-top: 2px solid #FF8B00;
}

/* Card styles for column layout */
.card {
  background: white;
  border-radius: 3px;
  box-shadow: 0 1px 0 rgba(9,30,66,.25);
  margin-bottom: 8px;
  padding: 0;
  width: 100%;
}

.card-banner {
  height: 4px;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
}

.card-inner {
  padding: 8px 12px 12px 12px;
}

/* Card banners for different tools */
.tool-sumy .card-banner {
  background-color: #0079bf;
}

.tool-distilbart .card-banner {
  background-color: #7A59AC;
}

.tool-rake .card-banner {
  background-color: #00a651;
}

.tool-yake .card-banner {
  background-color: #eb5a46;
}

.tool-ner .card-banner {
  background-color: #ff9f1a;
}

.tool-bert-extractive .card-banner {
  background-color: #36B37E;
}

.tool-tinyllama .card-banner {
  background-color: #FF8B00;
}

/* Level badges for cards */
.card .level-badge {
  font-size: 11px;
  font-weight: 600;
  margin-bottom: 6px;
  display: inline-block;
}

/* Card content styling */
.card p {
  margin: 0 0 8px 0;
  font-size: 13px;
  color: #172b4d;
  line-height: 1.5;
}

/* Error message styling */
.card-error {
  background-color: #ffebe6;
  color: #c9372c;
  padding: 8px;
  border-radius: 3px;
  font-size: 12px;
  margin-top: 8px;
}

/* Stacked view specific styles */
.stacked-layout {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
}

.stacked-section {
  background-color: #f1f2f4;
  border-radius: 3px;
  padding: 0 0 16px 0;
  box-shadow: 0 1px 3px rgba(9,30,66,0.1);
}

.stacked-header {
  padding: 10px 16px;
  background-color: #ebecf0;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  margin-bottom: 16px;
}

.stacked-header h3 {
  margin: 0;
  font-size: 16px;
  color: #172b4d;
}

/* Tool-specific stacked section headers */
.stacked-section.tool-sumy .stacked-header {
  border-top: 2px solid #0079bf;
}

.stacked-section.tool-distilbart .stacked-header {
  border-top: 2px solid #7A59AC;
}

.stacked-section.tool-rake .stacked-header {
  border-top: 2px solid #00a651;
}

.stacked-section.tool-yake .stacked-header {
  border-top: 2px solid #eb5a46;
}

.stacked-section.tool-ner .stacked-header {
  border-top: 2px solid #ff9f1a;
}

.stacked-section.tool-bert-extractive .stacked-header {
  border-top: 2px solid #36B37E;
}

.stacked-section.tool-tinyllama .stacked-header {
  border-top: 2px solid #FF8B00;
}

.stacked-tabs {
  display: flex;
  padding: 0 16px;
  gap: 8px;
  margin-bottom: 16px;
  overflow-x: auto;
}

.stacked-tab-btn {
  padding: 6px 12px;
  background-color: #ebecf0;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  font-size: 12px;
  color: #172b4d;
}

.stacked-tab-btn.active {
  background-color: #0079bf;
  color: white;
}

.stacked-tab-content {
  padding: 0 16px;
}

.stacked-tab-panel {
  display: none;
}

.stacked-tab-panel.active {
  display: block;
}

/* Loading indicator styles */
.loading-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  font-size: 14px;
  color: #172b4d;
}

.loading-spinner {
  border: 3px solid #f3f3f3;
  border-top: 3px solid #0079bf;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  animation: spin 1s linear infinite;
  margin-right: 8px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Empty state styling */
.empty-state {
  text-align: center;
  padding: 30px 20px;
  background-color: #f9f9f9;
  border-radius: 3px;
  color: #6b778c;
}

.empty-state-icon {
  font-size: 24px;
  margin-bottom: 10px;
  color: #aaa;
}

.empty-state-message {
  font-size: 14px;
  margin-bottom: 15px;
}

/* Tool-specific keyword tag styling */
.tool-rake .keyword-tag {
  background-color: rgba(0, 166, 81, 0.1);
  border: 1px solid rgba(0, 166, 81, 0.3);
  color: #00a651;
}

.tool-yake .keyword-tag {
  background-color: rgba(235, 90, 70, 0.1);
  border: 1px solid rgba(235, 90, 70, 0.3);
  color: #eb5a46;
}

/* NER entity styling */
.ner-entity {
  display: inline-flex;
  align-items: center;
  margin: 3px;
  padding: 3px 6px;
  background-color: rgba(255, 159, 26, 0.1);
  border: 1px solid rgba(255, 159, 26, 0.3);
  border-radius: 3px;
}

.ner-entity-type {
  font-weight: bold;
  font-size: 10px;
  background-color: #ff9f1a;
  color: white;
  padding: 2px 4px;
  border-radius: 2px;
  margin-right: 5px;
  text-transform: uppercase;
}

.ner-entity-text {
  font-size: 12px;
}

.ner-entity-score {
  font-size: 10px;
  color: #6b778c;
  margin-left: 5px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .tool-board {
    flex-direction: column;
    height: auto;
    overflow-x: visible;
  }
  
  .tool-column {
    width: 100%;
    flex: none;
    margin-bottom: 16px;
    height: auto;
    max-height: 500px;
  }
  
  .stacked-tabs {
    flex-wrap: wrap;
  }
}

/* Tooltip styles */
.tooltip {
  position: relative;
  display: inline-block;
}

.tooltip .tooltip-text {
  visibility: hidden;
  width: 120px;
  background-color: #172b4d;
  color: #fff;
  text-align: center;
  border-radius: 3px;
  padding: 5px;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -60px;
  opacity: 0;
  transition: opacity 0.3s;
  font-size: 11px;
}

.tooltip:hover .tooltip-text {
  visibility: visible;
  opacity: 1;
}

/* Handling of overflow text */
.truncated-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Server status indicator */
.server-status {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 5px;
}

.server-status.online {
  background-color: #36b37e;
}

.server-status.offline {
  background-color: #ff5630;
}

/* Tool description tooltip */
.tool-description {
  position: absolute;
  background-color: #fff;
  border: 1px solid #ddd;
  padding: 10px;
  border-radius: 3px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  max-width: 300px;
  z-index: 100;
  font-size: 12px;
  display: none;
}

.tool-option:hover .tool-description {
  display: block;
}

/* Tool status area */
.tool-status {
  background-color: #f5f5f5;
  border-radius: 3px;
  padding: 8px 12px;
  margin-top: 10px;
  font-size: 12px;
  color: #172b4d;
}

/* Additional styling for tool checkboxes */
.tool-checkbox {
  cursor: pointer;
}

.tool-checkbox:disabled + label {
  opacity: 0.5;
  cursor: not-allowed;
}

.tool-checkbox:checked {
  accent-color: #0079bf;
}

.tool-option.sumy .tool-checkbox:checked {
  accent-color: #0079bf;
}

.tool-option.distilbart .tool-checkbox:checked {
  accent-color: #7A59AC;
}

.tool-option.rake .tool-checkbox:checked {
  accent-color: #00a651;
}

.tool-option.yake .tool-checkbox:checked {
  accent-color: #eb5a46;
}

.tool-option.ner .tool-checkbox:checked {
  accent-color: #ff9f1a;
}
.tool-bigbird .tool-badge {
  background-color: #9b59b6;  /* Choose a color that fits your design */
}
.tool-bigbird .card-banner {
  background-color: #9b59b6;
}
.tool-bigbird {
  border-left: 3px solid #9b59b6;
}
/* TOOL OPTIONS (Checkbox side accent colors) */
.tool-option.spacy {
  border-left: 3px solid #1abc9c;
}
.tool-option.vader {
  border-left: 3px solid #718096;
}
.tool-option.textblob {
  border-left: 3px solid #e83e8c;
}

.card.tool-spacy,
.card.spacy {
  border-top: 3px solid #1abc9c;
}
.tool-spacy .tool-badge {
  background-color: #1abc9c;
}
.tool-vader .tool-badge {
  background-color: #718096;
}
.tool-textblob .tool-badge {
  background-color: #e83e8c;
}
.card.tool-vader,
.card.vader {
  border-top: 3px solid #718096;
}
.json-content {
  overflow-x: auto;
  white-space: pre;
  word-break: break-all;
  background: #23272e;
  color: #e4e6ed;
  font-size: 11px;
  border-radius: 4px;
  padding: 10px;
  margin-top: 5px;
}
.card-inner .pretty-json-section {
  background: #f6f8fa;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  padding: 10px 12px;
  margin-bottom: 10px;
  font-family: 'Fira Mono', 'Menlo', 'Monaco', monospace;
  font-size: 13px;
  color: #343434;
  word-break: break-all;
}
.tool-option.spacy {
  border-left: 3px solid #1abc9c;
}
.tool-option.vader {
  border-left: 3px solid #718096;
}
.tool-option.textblob {
  border-left: 3px solid #e83e8c;
}

.tool-option.spacy .tool-checkbox:checked {
  accent-color: #1abc9c;
}
.tool-option.vader .tool-checkbox:checked {
  accent-color: #718096;
}
.tool-option.textblob .tool-checkbox:checked {
  accent-color: #e83e8c;
}
.card.tool-textblob,
.card.textblob {
  border-top: 3px solid #e83e8c;
}
.tool-column.tool-spacy .tool-column-header {
  border-top: 2px solid #1abc9c;
}
.tool-column.tool-vader .tool-column-header {
  border-top: 2px solid #718096;
}
.tool-column.tool-textblob .tool-column-header {
  border-top: 2px solid #e83e8c;
}
.tool-spacy .card-banner {
  background-color: #1abc9c;
}
.tool-vader .card-banner {
  background-color: #718096;
}
.tool-textblob .card-banner {
  background-color: #e83e8c;
}

/* CHECKBOX COLOR ACCENT */
.tool-option.spacy .tool-checkbox:checked {
  accent-color: #1abc9c;
}
.tool-option.vader .tool-checkbox:checked {
  accent-color: #718096;
}
.tool-option.textblob .tool-checkbox:checked {
  accent-color: #e83e8c;
}

/* COLUMN HEADER COLORS */
.tool-column.tool-spacy .tool-column-header {
  border-top: 2px solid #1abc9c;
}
.tool-column.tool-vader .tool-column-header {
  border-top: 2px solid #718096;
}
.tool-column.tool-textblob .tool-column-header {
  border-top: 2px solid #e83e8c;
}

.card.spacy {
  border-top: 3px solid #1abc9c;
  /* Or any other accent effect you like */
}

.card.vader {
  border-top: 3px solid #718096;
}

.card.textblob {
  border-top: 3px solid #e83e8c;
}


/* Loading card and spinner styles */
.loading-card {
  background: white;
  border-radius: 3px;
  box-shadow: 0 1px 0 rgba(9,30,66,.25);
  margin-bottom: 8px;
  padding: 0;
  width: 100%;
}

.loading-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  font-size: 14px;
  color: #172b4d;
}

.loading-spinner {
  border: 3px solid #f3f3f3;
  border-top: 3px solid #0079bf;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  animation: spin 1s linear infinite;
  margin-right: 8px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}