/*
 * ReadingMinds Application CSS
 *
 * This file contains application-specific styles that complement the unified
 * TailwindCSS v4 + Primer Primitives design system.
 *
 * Organization:
 * 1. Imports & External Styles
 * 2. CSS Variables & Theme Configuration
 * 3. Base & Reset Styles
 * 4. Layout & Navigation
 * 5. Interactive Components
 * 6. Third-party Plugin Styles
 * 7. Utility & Helper Classes
 * 8. Responsive & Mobile Styles
 */

/* =============================================================================
   1. IMPORTS & EXTERNAL STYLES
   ============================================================================= */

/* =============================================================================
   ANIMATIONS STYLES (moved from animations.css)
   ============================================================================= */

/* Fade animations */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

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

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

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

/* Offset for anchored elements to account for fixed headers */
:target {
  scroll-margin-top: 2rem;
}

/* Flash messages */
.flash-message {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 1000;
  max-width: 400px;
  padding: 1rem;
  border-radius: 0.5rem;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.flash-content {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
}

.flash-text {
  flex: 1;
}

.flash-close {
  background: none;
  border: none;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.2s;
  padding: 0.25rem;
}

.flash-close:hover {
  opacity: 1;
}

/* Flash types */
.flash-success {
  background-color: var(--bgColor-success-muted);
  color: var(--fgColor-success);
  border: 1px solid var(--borderColor-success-muted);
}

.flash-error,
.flash-alert {
  background-color: var(--bgColor-danger-muted);
  color: var(--fgColor-danger);
  border: 1px solid var(--borderColor-danger-muted);
}

.flash-warning {
  background-color: var(--bgColor-attention-muted);
  color: var(--fgColor-attention);
  border: 1px solid var(--borderColor-attention-muted);
}

.flash-info,
.flash-notice {
  background-color: var(--bgColor-accent-muted);
  color: var(--fgColor-accent);
  border: 1px solid var(--borderColor-accent-muted);
}

/* Modal styles */
.modal-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  justify-content: center;
  align-items: center;
  z-index: 2000;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.modal-overlay.modal-active {
  opacity: 1;
}

.modal-content {
  background-color: var(--bgColor-default);
  border-radius: 0.75rem;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
  max-width: 500px;
  width: 90%;
  max-height: 90vh;
  overflow: auto;
}

.modal-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1.5rem;
  border-bottom: 1px solid var(--borderColor-default);
}

.modal-title {
  flex: 1;
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
}

.modal-close {
  background: none;
  border: none;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.2s;
  padding: 0.25rem;
}

.modal-close:hover {
  opacity: 1;
}

.modal-body {
  padding: 1.5rem;
}

.modal-footer {
  padding: 1.5rem;
  border-top: 1px solid var(--borderColor-default);
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
}

/* Field errors */
.field-error {
  margin-top: 0.25rem;
  display: block;
  font-size: 0.875rem;
}

/* Blankslate icon styles */
.blankslate-icon {
  margin: 0 auto !important;
}

/* Error page styles */
.error-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--bgColor-subtle);
}

.error-container {
  width: 100%;
  max-width: 800px;
  padding: 2rem;
}

/* Form validation animations */
.form-field.error {
  animation: shake 0.3s ease-in-out;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}

/* Loading states */
.loading {
  position: relative;
  opacity: 0.7;
  pointer-events: none;
}

.loading::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  border: 2px solid var(--borderColor-default);
  border-top-color: var(--borderColor-accent-emphasis);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Primer Spinner Animation */
@keyframes anim-rotate-keyframes {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.anim-rotate {
  animation: anim-rotate-keyframes 1s linear infinite;
}

/* Make all spinners purple */
[data-view-component="true"] svg.anim-rotate {
  color: #7c3aed !important; /* purple-600 */
}

[data-color-mode="dark"] [data-view-component="true"] svg.anim-rotate,
[data-theme="dark"] [data-view-component="true"] svg.anim-rotate {
  color: #a78bfa !important; /* purple-400 for dark mode */
}

/* =============================================================================
   DATA TABLE STYLES (moved from data_table.css)
   ============================================================================= */

.data-table-container {
  position: relative;
  width: 100%;
  margin-bottom: 1.5rem;
}

.table-container {
  width: 100%;
  overflow-x: auto;
}

/* Table base styles */
.data-table-container table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  color: var(--fgColor-default);
  background-color: var(--bgColor-default);
}

.data-table-container th,
.data-table-container td {
  padding: 0.75rem 1rem;
  text-align: left;
  border-bottom: 1px solid var(--borderColor-muted);
}

.data-table-container th {
  font-weight: 600;
  background-color: var(--bgColor-default);
}

/* Column header styles */
.column-header {
  display: flex;
  align-items: center;
  position: relative;
}

.column-name {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Column header link - for sortable columns */
.column-header-link {
  text-decoration: none;
  cursor: pointer;
  transition: color 0.2s ease;
}

.column-header-link:hover,
.column-header-link:active,
.column-header-link:focus {
  text-decoration: none;
  outline: none;
}

.column-header-link:hover .column-name {
  color: var(--fgColor-accent);
}

/* Sort indicator styling */
.sort-indicator {
  color: var(--fgColor-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  transition: all 0.2s ease;
  opacity: 0.8;
}

.sort-indicator.sort-active {
  color: var(--fgColor-muted);
  opacity: 1;
}

/* Sticky header */
.sticky-header thead tr,
.table-sticky-header thead tr {
  position: sticky;
  top: 0;
  z-index: 1;
  box-shadow: 0 1px 0 var(--borderColor-default);
}

/* Striped rows */
.table-striped tbody tr:nth-child(odd) {
  background-color: var(--bgColor-subtle);
}

.table-striped tbody tr:nth-child(even) {
  background-color: var(--bgColor-default);
}

/* Hoverable rows */
.table-hoverable tbody tr:hover {
  background-color: var(--bgColor-subtle);
  color: var(--fgColor-default);
}

/* Dense table */
.table-dense th,
.table-dense td {
  padding: 0.375rem 0.75rem;
}

/* Clickable rows */
.clickable-row {
  cursor: pointer;
}

.clickable-row:focus {
  outline: none;
}

/* Cell content with indicators */
.cell-content {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.leading-indicator {
  display: flex;
  align-items: center;
  color: var(--fgColor-muted);
  flex-shrink: 0;
}

.cell-value {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.trailing-indicator {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-left: auto;
  color: var(--fgColor-muted);
  flex-shrink: 0;
}

/* Selected rows */
.selected-row {
  background-color: var(--bgColor-accent-muted) !important;
  color: var(--fgColor-default) !important;
}

/* Column resizing */
.resize-handle {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  cursor: col-resize;
  z-index: 2;
}

.resize-handle:hover,
.resize-handle.active {
  background-color: var(--borderColor-accent-emphasis);
}

.resize-handle:hover > div,
.resize-handle.active > div {
  opacity: 1 !important;
  width: 2px !important;
  background-color: var(--borderColor-accent-emphasis) !important;
}

.column-header:hover .resize-handle > div {
  opacity: 0.8;
}

.resizing {
  user-select: none;
  cursor: col-resize;
}

/* Utility classes */
.hidden {
  display: none !important;
}

/* TailwindCSS hidden class support */
.tw\:hidden {
  display: none !important;
}

/* Table Actions Menu */
.table-actions-menu {
  position: fixed;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--bgColor-default);
  border: 1px solid var(--borderColor-default);
  border-radius: 0.375rem;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  z-index: 100;
  max-width: 24rem;
  width: calc(100% - 2rem);
}

.actions-menu-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--borderColor-muted);
  font-weight: 600;
}

.actions-menu-content {
  padding: 0.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.menu-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  border-radius: 0.25rem;
  cursor: pointer;
  border: none;
  background: none;
  color: var(--fgColor-default);
}

.menu-item:hover {
  background-color: var(--bgColor-subtle);
}

/* Pagination */
.data-table-pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 1rem;
  flex-wrap: wrap;
  gap: 1rem;
  color: var(--fgColor-default);
}

.pagination-info {
  color: var(--fgColor-default);
}

.pagination-controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.pagination-button {
  display: inline-flex;
  align-items: center;
  padding: 0.375rem 0.75rem;
  border: 1px solid var(--borderColor-default);
  border-radius: 0.25rem;
  background-color: var(--bgColor-default);
  color: var(--fgColor-default);
  text-decoration: none;
  transition: all 0.2s ease;
}

.pagination-button:hover:not(.disabled) {
  background-color: var(--bgColor-subtle);
  border-color: var(--borderColor-muted);
  color: var(--fgColor-default);
}

.pagination-button.disabled {
  opacity: 0.5;
  pointer-events: none;
  color: var(--fgColor-muted);
}

.pagination-pages {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

.pagination-item {
  margin: 0 0.125rem;
}

.pagination-link {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  height: 2rem;
  padding: 0 0.5rem;
  border-radius: 0.25rem;
  text-decoration: none;
  color: var(--fgColor-default);
  border: 1px solid transparent;
  transition: all 0.2s ease;
}

.pagination-link:hover {
  background-color: var(--bgColor-subtle);
  border-color: var(--borderColor-default);
  color: var(--fgColor-default);
}

.pagination-item.active .pagination-link {
  background-color: var(--bgColor-accent-emphasis);
  color: var(--fgColor-onEmphasis);
  font-weight: 600;
  border-color: var(--borderColor-accent-emphasis);
}

.pagination-ellipsis {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  height: 2rem;
  color: var(--fgColor-muted);
}

/* Row action menu */
.row-action-menu-button {
  padding: 0.5rem;
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--fgColor-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.25rem;
  transition: all 0.2s ease;
}

.row-action-menu-button:hover {
  background-color: var(--bgColor-subtle);
  color: var(--fgColor-default);
}

.row-actions-cell {
  text-align: right;
  width: 1%;
  white-space: nowrap;
  position: relative;
}

/* Dropdown menu styling */
[data-dropdown-target="menu"] {
  position: absolute;
  z-index: 1000;
  min-width: 12rem;
  border-radius: 0.5rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

/* No hover effect for action menu buttons */
.no-hover,
.no-hover:hover,
.table-hoverable tr:hover .no-hover,
.clickable-row:hover .no-hover {
  background-color: transparent !important;
  color: var(--fgColor-muted) !important;
  box-shadow: none !important;
}

/* Dropdown menu base positioning */
.dropdown-menu {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 1000;
  min-width: 12rem;
  margin-top: 0.25rem;
}

/* Empty state */
.data-table-empty-state {
  padding: 3rem 1rem;
  text-align: center;
  background-color: var(--bgColor-subtle);
  border-radius: 0.5rem;
  border: 1px dashed var(--borderColor-muted);
}

.empty-state-icon {
  margin-bottom: 1rem;
  color: var(--fgColor-muted);
}

.empty-state-title {
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.empty-state-description {
  color: var(--fgColor-muted);
  max-width: 30rem;
  margin: 0 auto 1.5rem;
}

.empty-state-action {
  margin-top: 1rem;
}


/* =============================================================================
   2. CSS VARIABLES & THEME CONFIGURATION
   ============================================================================= */

:root {
  color-scheme: light dark;
  --display-mode-light: inline-block;
  --display-mode-dark: none;

  /* Custom app-specific color variables */
  --color-subtle-highlight: rgba(0, 0, 0, 0.03);
  --color-subtle-highlight-hover: rgba(0, 0, 0, 0.1);
}

[data-color-mode="dark"] {
  --color-subtle-highlight: rgba(255, 255, 255, 0.05);
  --color-subtle-highlight-hover: rgba(255, 255, 255, 0.1);
}

/* =============================================================================
   3. BASE & RESET STYLES
   ============================================================================= */

/* Remove default link underlines in navigation */
#navbar a,
#navbar a:hover {
  text-decoration: none !important;
}

.tw\:no-underline:hover {
  text-decoration: none !important;
}


/* =============================================================================
   4. LAYOUT & NAVIGATION
   ============================================================================= */

/* =============================================================================
   5. INTERACTIVE COMPONENTS
   ============================================================================= */

/* --- Custom Scrollbars --- */

.tw\:overflow-y-auto::-webkit-scrollbar {
  width: 6px;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
  opacity: 1;
}

.tw\:overflow-y-auto:hover::-webkit-scrollbar {
  opacity: 1;
}

.tw\:overflow-y-auto::-webkit-scrollbar-track {
  background: transparent;
  border-radius: 10px;
}

.tw\:overflow-y-auto::-webkit-scrollbar-thumb {
  background: var(--borderColor-muted);
  border-radius: 10px;
}

.tw\:overflow-y-auto::-webkit-scrollbar-thumb:hover {
  background: var(--borderColor-accent-emphasis);
}

/* Select Menu and Safari scrollbar styles removed - not used in current implementation */

/* =============================================================================
   6. THIRD-PARTY PLUGIN STYLES
   ============================================================================= */

/* --- Sortable.js Drag and Drop Styles --- */

/* Ghost: The placeholder where item will be dropped */
.sortable-ghost {
  opacity: 0.3;
  background-color: var(--bgColor-accent-muted);
  border: 2px dashed var(--borderColor-accent-emphasis);
}

/* Drag: The item being dragged (follows cursor) */
.sortable-drag {
  transform: rotate(1deg) scale(1.05);
  box-shadow: var(--shadow-extra-large);
  z-index: 50;
  background-color: var(--bgColor-default);
  border: 1px solid var(--borderColor-accent-emphasis);
}

/* Chosen: The original item when drag starts */
.sortable-chosen {
  opacity: 0.8;
}

/* Hide interactive elements during drag */
.sortable-chosen button,
.sortable-chosen [role="button"],
.sortable-chosen .btn,
.sortable-chosen [data-sortable-handle] {
  visibility: hidden;
}

/* Also hide them on the dragged item */
.sortable-drag button,
.sortable-drag [role="button"],
.sortable-drag .btn,
.sortable-drag [data-sortable-handle] {
  visibility: hidden;
}

/* Drag handle styling */
[data-sortable-handle] {
  touch-action: none;
  cursor: grab;
}

[data-sortable-handle]:active {
  cursor: grabbing;
}

/* =============================================================================
   7. UTILITY & HELPER CLASSES
   ============================================================================= */

/* Make Octicons inherit text color */
.octicon {
  fill: currentColor;
}

/* Custom background utilities */
.tw\:bg-custom-gray {
  background-color: var(--bgColor-muted);
}

/* Subtle highlight backgrounds - used for active navigation states */
.bg-subtle-highlight {
  background: var(--color-subtle-highlight) !important;
}

.hover\:bg-subtle-highlight:hover {
  background: var(--color-subtle-highlight) !important;
}

/* Logo styling - used for general logo elements */
.logo {
  width: 100px;
  height: auto;
  margin: 0 30px;
}

/* =============================================================================
   8. RESPONSIVE & MOBILE STYLES
   ============================================================================= */

@media (max-width: 768px) {
  /* Auto-collapse sidebar on mobile */
  .sidebar-auto-collapse {
    transform: translateX(-100%) !important;
  }


  .hamburger-auto-show {
    display: block !important;
  }

  /* Show drawer overlay when sidebar is open on mobile */
  .drawer-open .drawer-overlay {
    display: block;
  }
}

/* =============================================================================
   MIGRATION NOTES & DEPRECATED STYLES
   ============================================================================= */

/*
 * Legacy styles that have been migrated to TailwindCSS v4 + Primer Primitives:
 *
 * - Old hover utilities (hover:color-bg-subtle) → tw:hover:bg-[var(--bgColor-subtle)]
 * - Old color classes (color-fg-default) → tw:text-[var(--fgColor-default)]
 * - Legacy star color class → tw:text-[var(--fgColor-accent)]
 *
 * These can be fully removed once all components are migrated.
 */