/* Shared UI styles for Premise SPA */

html, body { height: 100%; width: 100%; }
body { margin: 0; font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; }

/* Brand color variables (fallbacks for inline CSS that reference var(--primary)) */
:root {
  --primary: #8B5CF6;   /* purple-500 */
  --secondary: #F59E0B; /* amber-500 */
}



a { color: var(--primary); }

/* Brand utility classes (Tailwind-like) for CDN use without custom config */
.bg-primary { background-color: var(--primary) !important; }
.text-primary { color: var(--primary) !important; }
.border-primary { border-color: var(--primary) !important; }

/* Gradient stop helpers compatible with Tailwind's bg-gradient-to-* utilities */
.from-primary {
  --tw-gradient-from: var(--primary) !important;
  --tw-gradient-to: rgb(139 92 246 / 0) !important; /* transparent end for smooth start */
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}
.to-secondary {
  --tw-gradient-to: var(--secondary) !important;
}

.app-shell {
  display: flex;
  min-height: 100vh;
}
.app-sidebar {
  width: 16rem;
  background-color: #fff;
  border-right: 1px solid #e5e7eb;
}
.app-content {
  flex: 1;
  width: 100%;
}

.container { max-width: 1200px; margin: 0 auto; padding: 1rem; }

.hidden { display: none; }

/* Sidebar interactions */
.sidebar-item { transition: all 0.2s ease; }
.sidebar-item.active {
  border-left: 3px solid var(--primary);
  background-color: #F3F4F6; /* gray-100 */
  color: var(--primary);
  font-weight: 500;
}

/* Card hover effect */
.card-hover { transition: transform .15s ease; }
.card-hover:hover { transform: translateY(-1px); }

/* Card container (used widely across pages) */
.card {
  background-color: #ffffff;
  border-radius: 0.75rem;            /* rounded-xl */
  border: 1px solid #e5e7eb;         /* gray-200 */
  box-shadow: 0 1px 2px rgba(0,0,0,0.04); /* shadow-sm */
}

/* Badge + Chip utilities (mirror Tailwind composition used in legacy HTML) */
.badge {
  display: inline-flex;
  align-items: center;
  border-radius: 0.375rem;  /* rounded */
  padding: 0.125rem 0.5rem; /* py-0.5 px-2 */
  font-size: 0.75rem;       /* text-xs */
  font-weight: 500;         /* font-medium */
}
.chip {
  display: inline-flex;
  align-items: center;
  border-radius: 9999px;    /* rounded-full */
  padding: 0.125rem 0.5rem; /* py-0.5 px-2 */
  font-size: 0.75rem;       /* text-xs */
  font-weight: 500;         /* font-medium */
  margin-right: 0.25rem;    /* mr-1 */
  margin-bottom: 0.25rem;   /* mb-1 */
}

/* Chapter Map specific styles */
.scene-snapshot {
  background: linear-gradient(to right, #f8f9fa 0%, #ffffff 100%);
  border-left: 4px solid var(--primary);
  padding: 1rem;
  border-radius: 0.5rem;
}

details summary { transition: color 0.2s; cursor: pointer; }
details summary:hover { color: var(--primary); }
details[open] summary {
  margin-bottom: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid #e5e7eb; /* gray-200 */
}

/* Chapter collapsible structure */
.chapter-details { position: relative; }
.chapter-details>summary { list-style: none; position: relative; }
.chapter-details>summary::-webkit-details-marker { display: none; }

/* Chevron indicator for chapter expansion */
.chapter-details>summary::before {
  content: '›';
  position: absolute;
  right: 1rem; top: 1rem;
  font-size: 1.5rem; font-weight: bold; color: #9ca3af; /* gray-400 */
  transition: transform 0.2s ease, color 0.2s ease;
}
.chapter-details[open]>summary::before { transform: rotate(90deg); }
.chapter-details>summary:hover::before { color: var(--primary); }

/* Chapter content area */
.chapter-content { background-color: #fafafa; }

/* Inner section collapsibles */
.chapter-content details>summary { padding: 0.5rem 0; }

/* Pronoun styling */
.char-pronouns { font-family: 'Courier New', monospace; letter-spacing: 0.025em; }

/* Smooth transitions for collapsible sections */
details>*:not(summary) { animation: slideDown 0.2s ease-out; }
@keyframes slideDown {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}