/* Custom styles for the application */

/* Center dialog elements properly */
dialog {
  margin: auto;
  min-width: 800px;
  max-width: 90vw;
  max-height: 90vh;
}

dialog::backdrop {
  background: rgba(0, 0, 0, 0.5);
}

/* Hide default disclosure triangle for details elements in the sidebar */
details.group {
  list-style: none;
}

details.group summary::marker,
details.group summary::-webkit-details-marker {
  display: none;
}

/* Create a clean, minimal sidebar design */
.sidebar-nav-item {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  color: var(--color-text); /* gray-700 - darker text */
  font-size: 1rem; /* Increased from 0.875rem */
  font-weight: 600; /* Increased from 500 */
  transition: color 0.2s ease;
}

.sidebar-nav-item:hover {
  color: var(--color-text); /* gray-900 */
}

.sidebar-nav-item.active {
  color: var(--color-primary); /* brand-600 */
}

/* Section headers styling */
.sidebar-section-header {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  color: var(--color-text); /* gray-700 - darker text */
  font-size: 1rem; /* Increased from 0.875rem */
  font-weight: 600; /* Increased from 500 */
  letter-spacing: 0.025em;
  transition: all 0.2s ease;
}

.sidebar-section-header:hover {
  color: var(--color-text); /* gray-800 - darker hover state */
}

.sidebar-section-header.active {
  color: var(--color-primary); /* brand-600 */
}

.sidebar-section-header .sidebar-icon {
  margin-right: 12px;
  color: var(--color-text-muted); /* gray-400 */
}

.sidebar-section-header.active .sidebar-icon {
  color: var(--color-primary); /* brand-600 */
}

/* Toggle arrow styling */
.toggle-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  color: var(--color-text-muted); /* gray-400 */
  transition: transform 0.2s ease;
}

details[open] .toggle-arrow svg {
  transform: rotate(90deg);
}

/* Nested items structure */
.sidebar-nested-items {
  padding-left: 12px;
  margin-top: 4px;
  border-left: 1px solid var(--color-border); /* gray-200 */
  margin-left: 18px; /* Aligns with icon */
}

details[open].active .sidebar-nested-items {
  border-left-color: var(--color-primary); /* brand-300 - lighter than active color */
}

/* Nested items style */
.sidebar-nested-item {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  color: var(--color-text); /* gray-700 - darker text */
  font-size: 0.9375rem; /* Increased from 0.875rem */
  font-weight: 500; /* Increased from normal */
  transition: color 0.2s ease;
}

.sidebar-nested-item:hover {
  color: var(--color-text); /* gray-900 */
}

.sidebar-nested-item.active {
  color: var(--color-primary); /* brand-600 */
}

.sidebar-nested-item .sidebar-icon {
  margin-right: 8px;
  color: var(--color-text-muted); /* gray-400 */
}

.sidebar-nested-item.active .sidebar-icon {
  color: var(--color-primary); /* brand-600 */
}

/* Grouping sections with spacing */
.sidebar-section {
  margin-bottom: 16px;
}

/* Admin section styling */
.admin-section {
  margin-top: auto;
  border-top: 1px solid var(--color-border); /* gray-200 */
  padding-top: 16px;
}

/* Action Text table styling for content display */
.action-text-content table {
  border-collapse: collapse;
  width: 100%;
  margin-bottom: 1rem;
}

.action-text-content th,
.action-text-content td {
  border: 1px solid var(--color-border);
  padding: 0.5rem;
}

.action-text-content th {
  background-color: var(--color-background-subtle);
  font-weight: bold;
}

.action-text-content tr:nth-child(even) {
  background-color: var(--color-background-subtle);
}

/* Drag and drop styles for document management */
.dragging {
  opacity: 0.4;
  cursor: move;
  background-color: var(--color-background-subtle); /* gray-100 */
  outline: 2px solid var(--color-border); /* gray-300 */
}

.drag-over {
  background-color: var(--color-primary-light) !important; /* brand-50 */
  outline: 2px solid var(--color-primary) !important; /* brand-500 */
  outline-offset: -2px;
  position: relative;
  z-index: 5;
}

/* Override hover and all child backgrounds when dragging over */
.drag-over > div,
.drag-over > div > *,
.drag-over div {
  background-color: var(--color-primary-light) !important;
}

/* Top-level container drop zone styles */
.section-title[data-folder-id=""].drag-over::after {
  content: "Move to Top Level";
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
}

/* Provide a specific highlight for the top level container */
.section-title[data-folder-id=""].drag-over {
  background-color: var(--color-success-light) !important; /* success-50 */
  box-shadow: inset 0 0 0 2px var(--color-success); /* success-500 */
  cursor: copy;
}

.section-title[data-folder-id=""].drag-over::after {
  background-color: var(--color-success); /* success-500 */
}

/* Make the section title appear interactive on hover */
.section-title[data-folder-id=""] {
  position: relative;
  transition: background-color 0.2s ease;
}

.section-title[data-folder-id=""]:hover {
  background-color: var(--color-background-subtle); /* gray-50 */
}

/* Custom word wrap for database table names with underscore break preference */
.overflow-wrap-anywhere {
  overflow-wrap: break-word;
  word-break: break-all;
  hyphens: none;
  /* Use a smaller indent for wrapped lines */
  text-indent: -1px;
  padding-left: 1px;
}

/* Special rule to break at underscores */
.overflow-wrap-anywhere::after {
  content: "";
  display: inline;
  word-break: break-all;
}

/* Target underscore characters to create break opportunities */
span.text-sm {
  /* Add zero-width spaces after underscores to encourage breaks there */
  word-spacing: 0.05em;
}

/* Extra space for links with long text */
a .text-sm {
  padding-top: 2px;
  padding-bottom: 2px;
  line-height: 1.2;
}

/* Drag ghost element */
.drag-ghost {
  background-color: white;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
  border: 2px solid var(--color-primary); /* brand-500 */
  cursor: grabbing;
  outline: none;
  transform-origin: center;
}

/* Make the cursor show grabbing on the document being dragged */
tr[draggable="true"].dragging * {
  cursor: grabbing !important;
}

/* Adjust folder row highlighting when it's a drop target */
tr.folder-parent.drag-over td {
  background-color: var(--color-primary-light) !important; /* brand-50 */
}

/* Flash messages for drag-and-drop feedback */
.flash-message {
  position: fixed;
  top: 20px;
  right: 20px;
  padding: 16px 24px;
  border-radius: 8px;
  color: white;
  font-weight: 500;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  z-index: 9999;
  transform: translateY(-20px);
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.flash-message.visible {
  transform: translateY(0);
  opacity: 1;
}

.flash-success {
  background-color: var(--color-success); /* success-500 */
}

.flash-error {
  background-color: var(--color-error); /* error-500 */
}

/* Drag handle styling */
.drag-handle {
  opacity: 0;
  transition: opacity 0.2s ease;
  width: 20px;
  height: 22px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.drag-handle:hover {
  opacity: 1;
  background-color: var(--color-background-subtle); /* gray-100 */
  border-radius: 4px;
}

.document-item:hover .drag-handle {
  opacity: 0.9;
}

.document-item.dragging .drag-handle {
  opacity: 1;
}

/* Document list and folder tree styles */
.folder-toggle-icon {
  transition: transform 0.2s ease;
}

.folder-toggle-icon.rotate-90 {
  transform: rotate(90deg); /* Changed to 90deg to make it point down when expanded */
}

/* Document item styling - cleaner design */
.document-item {
  border-bottom: 1px solid var(--color-background-subtle); /* gray-100 */
  transition: background-color 0.15s ease;
}

.document-item:hover {
  background-color: var(--color-background-subtle); /* gray-50 */
}

/* Document container styling */
#tenant-documents-container,
#example-documents-container {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  border-radius: 0.375rem;
  background-color: white;
}

/* Folder content transitions */
[data-folder-content-id] {
  transition: height 0.3s ease, opacity 0.3s ease, transform 0.3s ease;
  /* Remove the border-left that was causing the extra gray frame */
}

[data-folder-content-id]:not(.hidden) {
  animation: slideDown 0.3s ease;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Folder icon styling */
.document-item[data-folder-id] .folder-toggle {
  cursor: pointer;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.15s ease;
}

.document-item[data-folder-id] .folder-toggle:hover {
  background-color: var(--color-border); /* gray-200 */
}

/* Section title styling */
.document-section-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text);
}

/* CRUD Table Cell Hover Effects - Beautiful Tooltip */
.table-crud-cell {
  position: relative;
}

/* Keep cells stable - no expansion */
.table-crud-cell .truncate {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 250px;
}

/* Tooltip container with smooth animations */
.table-crud-cell .cell-tooltip {
  visibility: hidden;
  opacity: 0;
  position: fixed;
  bottom: auto;
  top: var(--tooltip-top);
  left: var(--tooltip-left);
  transform: translateX(-50%) translateY(-100%) translateY(-12px);
  background: linear-gradient(to bottom, var(--color-text), var(--color-text));
  color: var(--color-background-subtle);
  padding: 16px 20px;
  border-radius: 12px;
  white-space: pre-wrap;
  word-wrap: break-word;
  word-break: break-word;
  min-width: 280px;
  max-width: 600px;
  z-index: 10000;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 
              0 0 0 1px rgba(255, 255, 255, 0.1);
  font-size: 0.9375rem;
  line-height: 1.7;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  letter-spacing: 0.01em;
}

/* Beautiful gradient border effect */
.table-crud-cell .cell-tooltip::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 12px;
  padding: 1px;
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  opacity: 0.5;
  z-index: -1;
}

/* Show tooltip on hover with smooth animation */
.table-crud-cell:hover .cell-tooltip {
  visibility: visible;
  opacity: 1;
  transition-delay: 0.3s;
}

/* Arrow for tooltip with gradient */
.table-crud-cell .cell-tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid var(--color-text);
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

/* Subtle text shadow for better readability */
.table-crud-cell .cell-tooltip {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Handle very long content gracefully */
.table-crud-cell .cell-tooltip {
  max-height: 70vh;
  overflow-y: auto;
  overflow-x: hidden;
}

/* Beautiful scrollbar for long content */
.table-crud-cell .cell-tooltip::-webkit-scrollbar {
  width: 8px;
}

.table-crud-cell .cell-tooltip::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 4px;
  margin: 8px 0;
}

.table-crud-cell .cell-tooltip::-webkit-scrollbar-thumb {
  background: linear-gradient(to bottom, var(--color-primary), var(--color-primary));
  border-radius: 4px;
  border: 2px solid var(--color-text);
}

.table-crud-cell .cell-tooltip::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(to bottom, var(--color-primary), var(--color-primary));
}

/* Ensure tooltip appears above other elements */
.table-crud-cell:hover {
  z-index: 50;
}

/* Add subtle highlight to hovered cell */
.table-crud-cell:hover .truncate {
  color: var(--color-primary);
  transition: color 0.2s ease;
}

/* Admin Database Table Cell Hover Effects - Beautiful Tooltip */
.admin-db-cell {
  position: relative;
}

/* Tooltip container with smooth animations for admin database */
.admin-db-cell .cell-tooltip {
  visibility: hidden;
  opacity: 0;
  position: fixed;
  bottom: auto;
  top: var(--tooltip-top);
  left: var(--tooltip-left);
  transform: translateX(-50%) translateY(-100%) translateY(-12px);
  background: linear-gradient(to bottom, var(--color-text), var(--color-text));
  color: var(--color-background-subtle);
  padding: 16px 20px;
  border-radius: 12px;
  white-space: pre-wrap;
  word-wrap: break-word;
  word-break: break-word;
  min-width: 280px;
  max-width: 600px;
  z-index: 10000;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 
              0 0 0 1px rgba(255, 255, 255, 0.1);
  font-size: 0.9375rem;
  line-height: 1.7;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  letter-spacing: 0.01em;
}

/* Beautiful gradient border effect for admin database */
.admin-db-cell .cell-tooltip::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 12px;
  padding: 1px;
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  opacity: 0.5;
  z-index: -1;
}

/* Show tooltip on hover with smooth animation for admin database */
.admin-db-cell:hover .cell-tooltip {
  visibility: visible;
  opacity: 1;
  transition-delay: 0.5s; /* Slightly longer delay to avoid interfering with click */
}

/* Arrow for tooltip with gradient for admin database */
.admin-db-cell .cell-tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid var(--color-text);
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

/* Subtle text shadow for better readability */
.admin-db-cell .cell-tooltip {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Handle very long content gracefully for admin database */
.admin-db-cell .cell-tooltip {
  max-height: 70vh;
  overflow-y: auto;
  overflow-x: hidden;
}

/* Beautiful scrollbar for long content in admin database */
.admin-db-cell .cell-tooltip::-webkit-scrollbar {
  width: 8px;
}

.admin-db-cell .cell-tooltip::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 4px;
  margin: 8px 0;
}

.admin-db-cell .cell-tooltip::-webkit-scrollbar-thumb {
  background: linear-gradient(to bottom, var(--color-primary), var(--color-primary));
  border-radius: 4px;
  border: 2px solid var(--color-text);
}

.admin-db-cell .cell-tooltip::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(to bottom, var(--color-primary), var(--color-primary));
}

/* Ensure tooltip appears above other elements */
.admin-db-cell:hover {
  z-index: 50;
}