@import url(https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:ital,wght@0,400;0,700;1,400;1,700&display=swap);
/* Responsive Video Meeting Styles */

/* Container queries for video meeting components */
@container (max-width: 640px) {
  .video-meeting-container {
    --video-gap: 0.5rem;
    --panel-width: 100%;
    --control-size: 2.5rem;
  }
}

@container (min-width: 641px) and (max-width: 1023px) {
  .video-meeting-container {
    --video-gap: 1rem;
    --panel-width: 50%;
    --control-size: 2.75rem;
  }
}

@container (min-width: 1024px) {
  .video-meeting-container {
    --video-gap: 1.5rem;
    --panel-width: 33.333%;
    --control-size: 3rem;
  }
}

/* Aspect ratio preservation utilities */
.aspect-video {
  aspect-ratio: 16 / 9;
}

.aspect-square {
  aspect-ratio: 1 / 1;
}

.aspect-portrait {
  aspect-ratio: 3 / 4;
}

.aspect-landscape {
  aspect-ratio: 4 / 3;
}

/* Smooth transition classes (300ms per design system) */
.transition-layout {
  transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

.transition-fast {
  transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

.transition-slow {
  transition: all 400ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Reduced motion support per design system accessibility rules */
@media (prefers-reduced-motion: reduce) {
  .transition-layout,
  .transition-fast,
  .transition-slow {
    transition: none;
  }
  
  .animate-spin,
  .animate-pulse,
  .animate-bounce {
    animation: none;
  }
}

/* Breakpoint-specific spacing utilities adhering to 8-point grid */
.spacing-xs { padding: 0.25rem; } /* 4px */
.spacing-sm { padding: 0.5rem; }  /* 8px */
.spacing-md { padding: 1rem; }    /* 16px */
.spacing-lg { padding: 1.5rem; }  /* 24px */
.spacing-xl { padding: 2rem; }    /* 32px */
.spacing-2xl { padding: 3rem; }   /* 48px */

.gap-xs { gap: 0.25rem; } /* 4px */
.gap-sm { gap: 0.5rem; }  /* 8px */
.gap-md { gap: 1rem; }    /* 16px */
.gap-lg { gap: 1.5rem; }  /* 24px */
.gap-xl { gap: 2rem; }    /* 32px */
.gap-2xl { gap: 3rem; }   /* 48px */

/* Responsive spacing utilities */
@media (max-width: 640px) {
  .responsive-padding { padding: 0.5rem; }
  .responsive-gap { gap: 0.5rem; }
  .responsive-margin { margin: 0.5rem; }
}

@media (min-width: 641px) and (max-width: 1023px) {
  .responsive-padding { padding: 1rem; }
  .responsive-gap { gap: 1rem; }
  .responsive-margin { margin: 1rem; }
}

@media (min-width: 1024px) {
  .responsive-padding { padding: 1.5rem; }
  .responsive-gap { gap: 1.5rem; }
  .responsive-margin { margin: 1.5rem; }
}

/* Touch target minimums (44x44px) */
.touch-target {
  min-width: 2.75rem;  /* 44px */
  min-height: 2.75rem; /* 44px */
}

.touch-target-sm {
  min-width: 2.5rem;   /* 40px */
  min-height: 2.5rem;  /* 40px */
}

/* Focus states: 2px solid outline with 2px offset */
.focus-ring {
  outline: 2px solid hsl(var(--ring));
  outline-offset: 2px;
}

.focus-ring-inset {
  outline: 2px solid hsl(var(--ring));
  outline-offset: -2px;
}

/* Video meeting specific responsive utilities */
.video-grid-mobile {
  grid-template-columns: 1fr;
}

.video-grid-tablet {
  grid-template-columns: repeat(2, 1fr);
}

.video-grid-desktop {
  grid-template-columns: repeat(3, 1fr);
}

.video-grid-large {
  grid-template-columns: repeat(4, 1fr);
}

/* Panel responsive behavior */
.panel-mobile {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  background: hsl(var(--background));
  transform: translateY(100%);
  transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

.panel-mobile.open {
  transform: translateY(0);
}

.panel-tablet {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 50%;
  z-index: 40;
  background: hsl(var(--background));
  transform: translateX(100%);
  transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

.panel-tablet.open {
  transform: translateX(0);
}

.panel-desktop {
  position: relative;
  width: 33.333%;
  flex-shrink: 0;
}

/* Video overlay responsive positioning */
.video-overlay-mobile {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  width: 8rem;
  height: 5.5rem;
  z-index: 60;
}

.video-overlay-tablet {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  width: 12rem;
  height: 8rem;
  z-index: 60;
}

.video-overlay-desktop {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 18rem;
  height: 12rem;
  z-index: 60;
}

/* Whiteboard responsive adjustments */
.whiteboard-mobile {
  min-height: 300px;
}

.whiteboard-tablet {
  min-height: 400px;
}

.whiteboard-desktop {
  min-height: 500px;
}

/* Lesson display responsive adjustments */
.lesson-content-mobile {
  max-height: 60vh;
}

.lesson-content-tablet {
  max-height: 70vh;
}

.lesson-content-desktop {
  max-height: 80vh;
}

/* PDF viewer responsive adjustments */
.pdf-viewer-mobile {
  min-height: 300px;
}

.pdf-viewer-tablet {
  min-height: 400px;
}

.pdf-viewer-desktop {
  min-height: 500px;
}

/* Control button responsive sizing */
.control-mobile {
  width: 2.5rem;
  height: 2.5rem;
  padding: 0.5rem;
}

.control-tablet {
  width: 2.75rem;
  height: 2.75rem;
  padding: 0.625rem;
}

.control-desktop {
  width: 3rem;
  height: 3rem;
  padding: 0.75rem;
}

/* Typography responsive scaling */
.text-responsive-xs {
  font-size: 0.75rem; /* 12px */
  line-height: 1rem;
}

.text-responsive-sm {
  font-size: 0.875rem; /* 14px */
  line-height: 1.25rem;
}

.text-responsive-base {
  font-size: 1rem; /* 16px */
  line-height: 1.5rem;
}

.text-responsive-lg {
  font-size: 1.125rem; /* 18px */
  line-height: 1.75rem;
}

.text-responsive-xl {
  font-size: 1.25rem; /* 20px */
  line-height: 1.75rem;
}

.text-responsive-2xl {
  font-size: 1.5rem; /* 24px */
  line-height: 2rem;
}

.text-responsive-3xl {
  font-size: 1.875rem; /* 30px */
  line-height: 2.25rem;
}

.text-responsive-4xl {
  font-size: 2.25rem; /* 36px */
  line-height: 2.5rem;
}

/* Mobile-specific adjustments */
@media (max-width: 640px) {
  .text-responsive-xs { font-size: 0.625rem; }
  .text-responsive-sm { font-size: 0.75rem; }
  .text-responsive-base { font-size: 0.875rem; }
  .text-responsive-lg { font-size: 1rem; }
  .text-responsive-xl { font-size: 1.125rem; }
  .text-responsive-2xl { font-size: 1.25rem; }
  .text-responsive-3xl { font-size: 1.5rem; }
  .text-responsive-4xl { font-size: 1.875rem; }
}

/* Tablet-specific adjustments */
@media (min-width: 641px) and (max-width: 1023px) {
  .text-responsive-xs { font-size: 0.6875rem; }
  .text-responsive-sm { font-size: 0.8125rem; }
  .text-responsive-base { font-size: 0.9375rem; }
  .text-responsive-lg { font-size: 1.0625rem; }
  .text-responsive-xl { font-size: 1.1875rem; }
  .text-responsive-2xl { font-size: 1.375rem; }
  .text-responsive-3xl { font-size: 1.6875rem; }
  .text-responsive-4xl { font-size: 2.0625rem; }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .video-meeting-container {
    --border-width: 2px;
    --ring-width: 3px;
  }
  
  .focus-ring {
    outline-width: 3px;
  }
}

/* Print styles */
@media print {
  .video-meeting-container {
    display: none;
  }
  
  .video-controls {
    display: none;
  }
  
  .video-overlay-mobile,
  .video-overlay-tablet,
  .video-overlay-desktop {
    display: none;
  }
}

/* Global Responsive Utilities */

/* Container queries */
@supports (container-type: inline-size) {
  .container-responsive {
    container-type: inline-size;
  }
}

/* Aspect ratio utilities */
.aspect-card {
  aspect-ratio: 1 / 1;
}

.aspect-wide-card {
  aspect-ratio: 16 / 9;
}

/* Touch target minimum */
.touch-target {
  min-width: 44px;
  min-height: 44px;
}

/* Responsive text truncation */
.truncate-mobile {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (min-width: 640px) {
  .truncate-mobile {
    text-overflow: clip;
  }
}

/* Smooth transitions */
.transition-layout {
  transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .transition-layout,
  .theme-transition {
    transition: none;
  }
}

/* API Status component styles */
.api-status-container {
  margin: 1rem 0;
}

.api-status {
  padding: 1rem;
  border-radius: 0.5rem;
}

.api-status-healthy {
  background-color: #f0fff4;
  border: 1px solid #9ae6b4;
}

.api-status-error {
  background-color: #fff5f5;
  border: 1px solid #feb2b2;
}

.status-indicator {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.api-status-healthy .status-indicator {
  margin-bottom: 0;
}

.api-status-error .status-indicator {
  margin-bottom: 1rem;
}

.status-badge {
  padding: 0.25rem 0.5rem;
  border-radius: 1rem;
  font-size: 0.75rem;
  font-weight: 500;
}

.status-badge-success {
  background-color: #38a169;
  color: white;
}

.status-badge-error {
  background-color: #e53e3e;
  color: white;
}

.status-message {
  font-size: 0.875rem;
}

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

.action-button {
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 0.25rem;
  font-size: 0.875rem;
  cursor: pointer;
  transition: background-color 0.2s;
}

.action-button:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

.action-button-diagnostic {
  background-color: #4299e1;
  color: white;
}

.action-button-refresh {
  background-color: #667eea;
  color: white;
}

.action-button-details {
  background-color: #a0aec0;
  color: white;
}

.details-panel {
  margin-top: 1rem;
  padding: 1rem;
  background-color: #f7fafc;
  border-radius: 0.25rem;
  overflow: auto;
}

.details-panel pre {
  white-space: pre-wrap;
  font-size: 0.75rem;
} 
/* Document Viewer Styles
   Zero-dependency document viewer styling that works with all themes
*/

/* Container styles */
.document-viewer-container {
  position: relative;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  line-height: 1.5;
  background: transparent;
  width: 100%;
  height: 100%;
  overflow: hidden;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

.document-viewer-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  box-sizing: border-box;
  flex: 1;
}

/* Toolbar styles */
.document-viewer-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 16px;
  background-color: var(--toolbar-bg, #f5f5f5);
  border-bottom: 1px solid var(--border-color, #ddd);
  flex-wrap: wrap;
  gap: 8px;
}

.document-viewer-toolbar button {
  background-color: var(--button-bg, #ffffff);
  border: 1px solid var(--button-border, #ccc);
  border-radius: 4px;
  padding: 4px 8px;
  cursor: pointer;
  font-size: 14px;
  margin: 0 2px;
}

.document-viewer-toolbar button:hover {
  background-color: var(--button-hover-bg, #f0f0f0);
}

.zoom-controls, .pagination-controls {
  display: flex;
  align-items: center;
}

/* Page styles */
.page {
  background-color: var(--page-bg, #ffffff);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  margin: 20px auto;
  position: relative;
  transition: transform 0.2s ease-in-out;
  transform-origin: top center;
  border-radius: 2px;
  max-width: calc(100% - 40px);
  width: fit-content;
  min-height: 400px;
  overflow: visible;
  box-sizing: border-box;
  display: block;
}

/* Common document styles */
.pdf-page {
  padding: 40px;
  max-width: 100%;
  box-sizing: border-box;
  overflow: visible;
  background-color: var(--page-bg, #ffffff);
  margin: 20px auto;
  border-radius: 2px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* PDF specific styles */
.pdf-document {
  position: relative;
  max-width: 100%;
  max-height: 100%;
  overflow: auto;
  box-sizing: border-box;
}

.pdf-content {
  position: relative;
  max-width: 100%;
  max-height: 100%;
  overflow: auto;
  box-sizing: border-box;
}

/* Ensure PDF canvas elements have transparent backgrounds */
.pdf-document canvas,
.pdf-page canvas,
canvas[data-pdf-page] {
  background-color: transparent !important;
}

/* PDF viewer containers should allow theme background to show through */
.document-viewer-container[data-document-type="pdf"] {
  background-color: transparent;
}

.pdf-canvas-container {
  background-color: transparent;
}

/* TXT specific styles */
.txt-page {
  padding: 20px;
}

.plain-text {
  font-family: monospace;
  white-space: pre-wrap;
  margin: 0;
  padding: 0;
}

.code-container {
  font-family: 'Consolas', 'Monaco', 'Lucida Console', monospace;
  overflow: auto;
}

/* Code syntax highlighting */
.language-javascript .keyword,
.language-python .keyword,
.language-json .keyword {
  color: var(--keyword-color, #0000ff);
}

.language-javascript .string,
.language-python .string,
.language-json .string {
  color: var(--string-color, #a31515);
}

.language-javascript .number,
.language-python .number,
.language-json .number {
  color: var(--number-color, #098658);
}

.language-javascript .comment,
.language-python .comment {
  color: var(--comment-color, #008000);
  font-style: italic;
}

.language-html .tag,
.language-xml .tag {
  color: var(--tag-color, #800000);
}

.language-html .attr-name,
.language-xml .attr-name {
  color: var(--attr-name-color, #ff0000);
}

.language-html .attr-value,
.language-xml .attr-value {
  color: var(--attr-value-color, #0000ff);
}

.language-css .selector {
  color: var(--selector-color, #800000);
}

.language-css .property {
  color: var(--property-color, #ff0000);
}

.language-css .value {
  color: var(--value-color, #0000ff);
}

.language-json .key {
  color: var(--key-color, #0451a5);
}

/* Error page styles */
.error-page {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 40px;
  text-align: center;
}

.error-container {
  max-width: 500px;
}

.error-container h2 {
  color: var(--error-title-color, #d32f2f);
  margin-bottom: 16px;
}

.error-container p {
  margin: 8px 0;
}

/* Responsiveness */
@media (max-width: 768px) {
  .document-viewer-toolbar {
    flex-direction: column;
    align-items: center;
  }
  
  .zoom-controls, .pagination-controls {
    margin: 4px 0;
  }
  
  .pdf-page {
    padding: 20px;
  }
}

/* Theme variables */
:root {
  --toolbar-bg: #f5f5f5;
  --toolbar-border: #ddd;
  --toolbar-text: #555;
  --toolbar-button: #555;
  --button-bg: #f7f7f7;
  --button-border: #ccc;
  --button-hover-bg: #ececec;
  --button-hover-border: #999;
  --button-disabled-bg: #f5f5f5;
  --page-bg: #f7f7f7;
  --text-color: #000;
  --border-color: #ddd;
  --viewer-bg: #f5f5f5;
  --viewer-text: #333;
  --focus-color: #0066cc;
  --toolbar-separator: #ddd;
  --loading-text: #555;
  --error-text: #d32f2f;
}

/* Dark theme */
.dark-theme {
  --toolbar-bg: #404040;
  --toolbar-border: #555;
  --toolbar-text: #e0e0e0;
  --toolbar-button: #e0e0e0;
  --button-bg: #555;
  --button-border: #666;
  --button-hover-bg: #666;
  --button-hover-border: #777;
  --button-disabled-bg: #444;
  --page-bg: #404040;
  --text-color: #e0e0e0;
  --border-color: #555;
  --viewer-bg: #2d2d2d;
  --viewer-text: #e0e0e0;
  --focus-color: #4da6ff;
  --toolbar-separator: #555;
  --loading-text: #ccc;
  --error-text: #ff6b6b;
}

/* Document viewer */
.document-viewer {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: var(--viewer-bg);
  color: var(--viewer-text);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

/* Document content */
.document-content {
  flex: 1;
  overflow: auto;
  padding: 20px;
  background: var(--viewer-bg);
  position: relative;
  height: 100%;
  box-sizing: border-box;
}

/* Document toolbar */
.document-toolbar {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  background-color: var(--toolbar-bg);
  border-bottom: 1px solid var(--toolbar-border);
  z-index: 10;
  min-height: 48px;
}

.toolbar-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.toolbar-button {
  background: var(--button-bg);
  border: 1px solid var(--button-border);
  border-radius: 4px;
  color: var(--toolbar-button);
  font-size: 14px;
  padding: 6px 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  min-width: 32px;
  min-height: 32px;
}

.toolbar-button:hover:not(:disabled) {
  background-color: var(--button-hover-bg);
  border-color: var(--button-hover-border);
}

.toolbar-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background-color: var(--button-disabled-bg);
}

.toolbar-separator {
  height: 24px;
  width: 1px;
  background-color: var(--toolbar-separator);
  margin: 0 8px;
}

/* Page navigation */
.page-navigation {
  display: flex;
  align-items: center;
}

.page-count {
  margin: 0 8px;
  font-size: 14px;
  color: var(--toolbar-text);
}

/* Zoom controls */
.zoom-controls {
  display: flex;
  align-items: center;
}

.zoom-level {
  margin: 0 8px;
  font-size: 14px;
  color: var(--toolbar-text);
  min-width: 40px;
  text-align: center;
}

/* Pages and content */
.pdf-page {
  background-color: var(--page-bg);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  margin-bottom: 16px;
  position: relative;
  overflow: hidden;
}

.page-content {
  position: relative;
  width: 100%;
  height: 100%;
}

/* Text content */
.text-layer {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  color: var(--text-color);
  font-family: sans-serif;
  overflow: hidden;
}

.text-layer > span {
  position: absolute;
  white-space: pre;
  cursor: text;
  transform-origin: 0% 0%;
}

/* PDF specific styles */
.pdf-annotation {
  position: absolute;
  border: 1px solid rgba(0, 0, 0, 0.3);
}

.pdf-link {
  position: absolute;
  cursor: pointer;
}

/* TXT specific styles */
.txt-content {
  white-space: pre-wrap;
  font-family: monospace;
  padding: 20px;
  line-height: 1.5;
}

.txt-content.syntax-highlighting .keyword {
  color: var(--syntax-keyword, #07a);
}

.txt-content.syntax-highlighting .string {
  color: var(--syntax-string, #690);
}

.txt-content.syntax-highlighting .number {
  color: var(--syntax-number, #905);
}

.txt-content.syntax-highlighting .comment {
  color: var(--syntax-comment, #999);
  font-style: italic;
}

/* Loading and error states */
.document-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--loading-text);
}

.document-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--error-text);
  padding: 20px;
  text-align: center;
}

.error-icon {
  font-size: 48px;
  margin-bottom: 16px;
}

/* Print styles */
@media print {
  .document-toolbar {
    display: none;
  }
  
  .document-viewer {
    height: auto;
    overflow: visible;
  }
  
  .pdf-page {
    break-inside: avoid;
    box-shadow: none;
    margin: 0;
    page-break-after: always;
  }
}

/* Ensure all document content fits within container */
.document-viewer-container,
.document-viewer,
.document-content {
  box-sizing: border-box;
}

.document-viewer-container img,
.document-viewer img,
.document-content img,
.document-viewer-container table,
.document-viewer table,
.document-content table {
  max-width: 100%;
  box-sizing: border-box;
}

/* Enhanced rules for content that might overflow */
.document-viewer-container img,
.document-viewer img,
.document-content img {
  height: auto;
  object-fit: contain;
}

.document-viewer-container table,
.document-viewer table,
.document-content table {
  table-layout: auto;
  word-wrap: break-word;
}

/* Ensure content containers are properly sized - only for direct children */
.document-viewer-wrapper,
.document-content {
  contain: layout size;
}

/* Prevent absolute positioned elements from breaking layout */
.page [style*="position: absolute"] {
  position: relative !important;
}

/* Scrollbar styling for webkit browsers */
.document-viewer-container,
.document-viewer-wrapper,
.document-content {
  scrollbar-width: thin;
  scrollbar-color: var(--border-color) transparent;
}

.document-viewer-wrapper::-webkit-scrollbar,
.document-content::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.document-viewer-wrapper::-webkit-scrollbar-track,
.document-content::-webkit-scrollbar-track {
  background: transparent;
}

.document-viewer-wrapper::-webkit-scrollbar-thumb,
.document-content::-webkit-scrollbar-thumb {
  background-color: var(--border-color);
  border-radius: 4px;
}

.document-viewer-wrapper::-webkit-scrollbar-thumb:hover,
.document-content::-webkit-scrollbar-thumb:hover {
  background-color: var(--toolbar-text);
} 
/* Notes Overlay Layout Styles */
.notes-overlay {
  display: flex !important;
  flex-direction: column !important;
  height: 100vh !important;
  background: hsl(var(--background)) !important;
  width: 100% !important;
}

.notes-header {
  padding: 1rem 1.5rem;
  border-bottom: 1px solid hsl(var(--border));
  background: hsl(var(--card));
}

.notes-main {
  display: flex !important;
  flex: 1 !important;
  overflow: hidden !important;
  width: 100% !important;
}

.notes-sidebar {
  width: 100% !important;
  max-width: 350px !important;
  min-width: 280px !important;
  border-right: 1px solid hsl(var(--border)) !important;
  background: hsl(var(--card)) !important;
  display: flex !important;
  flex-direction: column !important;
  flex-shrink: 1 !important;
}

.notes-editor {
  flex: 1 !important;
  padding: 1rem !important;
  background: hsl(var(--background)) !important;
  overflow-y: auto !important;
  width: 100% !important;
  min-width: 0 !important;
}

.notes-filters {
  padding: 1rem;
  border-bottom: 1px solid hsl(var(--border));
}

.notes-list {
  flex: 1;
  padding: 1rem;
  overflow-y: auto;
}

.tags-filter {
  margin-top: 1rem;
}

/* Add proper padding and max-width to the editor content */
.notes-editor .card {
  max-width: 100% !important;
  margin: 0 auto !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Target the actual input elements more specifically */
.notes-editor input[type="text"],
.notes-editor textarea,
.notes-editor select {
  max-width: 100% !important;
  padding: 0.75rem !important;
  border: 1px solid hsl(var(--border)) !important;
  border-radius: 0.375rem !important;
  background-color: hsl(var(--background)) !important;
  color: hsl(var(--foreground)) !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.notes-editor input[type="text"]:focus,
.notes-editor textarea:focus,
.notes-editor select:focus {
  outline: none;
  border-color: hsl(var(--ring));
  box-shadow: 0 0 0 2px hsl(var(--ring) / 0.2);
}

/* Target the TiptapEditor component */
.notes-editor .border.rounded-md {
  max-width: 100% !important;
  padding: 1rem !important;
  border: 1px solid hsl(var(--border)) !important;
  border-radius: 0.375rem !important;
  background-color: hsl(var(--background)) !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Additional TiptapEditor styling */
.notes-editor .min-h-\[400px\] {
  min-height: 400px !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* Ensure proper spacing in the card content */
.notes-editor [data-radix-card-content] {
  padding: 1.5rem;
}

/* Add some breathing room to the form elements */
.notes-editor .space-y-4 > * + * {
  margin-top: 1rem;
}

/* Additional styling for better visual hierarchy */
.notes-editor .flex.gap-2 {
  gap: 0.5rem !important;
  width: 100% !important;
}

.notes-editor .flex.gap-2 input {
  flex: 1 !important;
  max-width: calc(100% - 140px) !important;
}

.notes-editor .flex.gap-2 select {
  min-width: 120px !important;
  max-width: 140px !important;
}

/* Override any conflicting styles */
.notes-overlay * {
  box-sizing: border-box !important;
}

/* Ensure the layout works on all screen sizes */
@media (max-width: 768px) {
  .notes-main {
    flex-direction: column !important;
  }
  
  .notes-sidebar {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
    border-right: none !important;
    border-bottom: 1px solid hsl(var(--border)) !important;
    max-height: 40vh !important;
  }
  
  .notes-editor {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0.75rem !important;
  }
}

/*
 * Minimal pdf.js text-layer styles (subset of pdfjs-dist/web/pdf_viewer.css).
 * Used by the selectable text overlay in PdfViewer when reference-library
 * PDF highlighting is enabled. Spans are positioned by pdf.js's TextLayer;
 * these rules make them invisible but selectable over the canvas.
 */
.textLayer {
  position: absolute;
  text-align: initial;
  inset: 0;
  overflow: hidden;
  opacity: 1;
  line-height: 1;
  -webkit-text-size-adjust: none;
  -moz-text-size-adjust: none;
       text-size-adjust: none;
  forced-color-adjust: none;
  transform-origin: 0 0;
  caret-color: CanvasText;
  z-index: 0;
}

.textLayer :is(span, br) {
  color: transparent;
  position: absolute;
  white-space: pre;
  cursor: text;
  transform-origin: 0% 0%;
}

.textLayer span.markedContent {
  top: 0;
  height: 0;
}

.textLayer ::selection {
  background: rgb(0 0 255 / 0.25);
}

.textLayer br::selection {
  background: transparent;
}

.textLayer .endOfContent {
  display: block;
  position: absolute;
  inset: 100% 0 0;
  z-index: 0;
  cursor: default;
  -webkit-user-select: none;
          user-select: none;
}

/*
 * al studio host theme — maps @kaidosdragon/al-design-system's --ds-* tokens to
 * my-pace's HSL design tokens (src/styles/theme.css). Replaces the library's
 * global :root block + html/body styles, which would otherwise repaint my-pace.
 *
 * Apply by wrapping every al studio mount in <div className="al-studio-root">.
 * Do NOT also import "@kaidosdragon/al-design-system/styles.css" globally — its
 * html/body rules would clobber the host. The studios reference --ds-* via inline
 * styles, so redefining them on a scoped ancestor is enough.
 */

.al-studio-root {
  /* Surfaces — mapped to my-pace's card/background/muted */
  --ds-background: hsl(var(--background));
  --ds-surface: hsl(var(--card));
  --ds-surface-muted: hsl(var(--muted));
  --ds-surface-sunken: hsl(var(--secondary));

  /* Text */
  --ds-ink: hsl(var(--foreground));
  --ds-ink-soft: hsl(var(--foreground) / 0.85);
  --ds-ink-muted: hsl(var(--muted-foreground));
  --ds-ink-subtle: hsl(var(--muted-foreground) / 0.7);

  /* Rules */
  --ds-border: hsl(var(--border));
  --ds-border-soft: hsl(var(--border) / 0.6);

  /* Brand */
  --ds-primary: hsl(var(--primary));
  --ds-primary-soft: hsl(var(--primary) / 0.15);
  --ds-primary-strong: hsl(var(--primary));

  /* Status */
  --ds-success: hsl(142 71% 40%);
  --ds-success-soft: hsl(142 71% 40% / 0.15);
  --ds-warning: hsl(38 92% 50%);
  --ds-warning-soft: hsl(38 92% 50% / 0.15);
  --ds-danger: hsl(var(--destructive));
  --ds-danger-soft: hsl(var(--destructive) / 0.15);

  /* Hero gradient — keep al's hero so it still feels lively, but tint with primary */
  --ds-gradient-start: hsl(var(--primary));
  --ds-gradient-end: hsl(var(--primary) / 0.65);
  --ds-gradient: linear-gradient(135deg, var(--ds-gradient-start) 0%, var(--ds-gradient-end) 100%);

  /* Fonts — inherit my-pace's stack instead of al's Apple-system override */
  --ds-font-sans: inherit;
  --ds-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  /* Shadows — keep al's, the values are theme-neutral rgba */
  --ds-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --ds-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.10), 0 2px 4px -2px rgba(0, 0, 0, 0.10);
  --ds-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.10), 0 4px 6px -4px rgba(0, 0, 0, 0.10);
  --ds-shadow-focus: 0 0 0 3px hsl(var(--ring) / 0.25);

  /* Transitions */
  --ds-transition-quick: 120ms cubic-bezier(0.4, 0, 0.2, 1);
  --ds-transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);

  /* Anchor my-pace typography + background inside the studio's tree */
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: inherit;
  border-radius: var(--radius);
}

.al-studio-root *,
.al-studio-root *::before,
.al-studio-root *::after {
  box-sizing: border-box;
}

/*
 * Embedded / fill mode — used when a studio is mounted inside a bounded host
 * box (e.g. the in-meeting StudioDisplayOverlay card) rather than a full page.
 *
 * The al ToolShell root hard-codes `height: 100dvh; min-height: 100vh;
 * max-height: 100dvh` (see @kaidosdragon/al-tool-shell ToolShell). Inside a
 * smaller card that forces the studio to full-viewport height, overflowing the
 * card so the canvas + menu trigger get clipped — worst on tablet/mobile where
 * the meeting reserves less height. Here we make the studio fill exactly its
 * host box instead, so it scales dynamically with the available area and
 * nothing is cut off.
 *
 * AlProvider/Suspense render no DOM, so the ToolShell root is the first child
 * of `.al-studio-root`. `!important` is required because ToolShell sets the
 * height via inline styles.
 */
.al-studio-root--embedded {
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.al-studio-root--embedded > div {
  flex: 1 1 auto;
  height: 100% !important;
  min-height: 0 !important;
  max-height: 100% !important;
}

.al-studio-root ::selection {
  background: hsl(var(--primary) / 0.20);
  color: hsl(var(--foreground));
}

.lp-root,
.lp-paper {
  font-family: var(--lp-font-family, inherit);
  font-size: calc(1rem * var(--lp-font-scale, 1));
  line-height: calc(1.5 * var(--lp-line-spacing, 1));
  letter-spacing: var(--lp-letter-spacing, 0);
}

.lp-root {
  position: relative;
}

.lp-root.lp-single-column .lp-two-col,
.lp-paper.lp-single-column .lp-two-col {
  grid-template-columns: 1fr !important;
}

.lp-root.lp-contrast-high,
.lp-paper.lp-contrast-high {
  --foreground: 0 0% 0%;
  --muted-foreground: 0 0% 15%;
  --background: 0 0% 100%;
  --card: 0 0% 100%;
  --border: 0 0% 20%;
}

.lp-root.lp-contrast-dark,
.lp-paper.lp-contrast-dark {
  --foreground: 0 0% 100%;
  --muted-foreground: 0 0% 85%;
  --background: 0 0% 8%;
  --card: 0 0% 12%;
}

.lp-root.lp-large-hit button,
.lp-root.lp-large-hit a,
.lp-root.lp-large-hit input,
.lp-root.lp-large-hit textarea,
.lp-root.lp-large-hit [role='radio'],
.lp-root.lp-large-hit [role='checkbox'],
.lp-paper.lp-large-hit button,
.lp-paper.lp-large-hit a,
.lp-paper.lp-large-hit input,
.lp-paper.lp-large-hit textarea,
.lp-paper.lp-large-hit [role='radio'],
.lp-paper.lp-large-hit [role='checkbox'] {
  min-height: 48px;
  min-width: 48px;
}

.lp-root.lp-reduced-motion,
.lp-root.lp-reduced-motion *,
.lp-root.lp-reduced-motion *::before,
.lp-root.lp-reduced-motion *::after,
.lp-paper.lp-reduced-motion,
.lp-paper.lp-reduced-motion *,
.lp-paper.lp-reduced-motion *::before,
.lp-paper.lp-reduced-motion *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
  scroll-behavior: auto !important;
}

.lp-root.lp-reduced-motion .al-studio-root,
.al-studio-root.lp-reduced-motion {
  --ds-transition-quick: 0ms;
  --ds-transition-base: 0ms;
}

.lp-root.lp-keyboard-only :focus-visible,
.lp-paper.lp-keyboard-only :focus-visible {
  outline: 3px solid hsl(var(--foreground));
  outline-offset: 3px;
}

.lp-overlay {
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 40;
  background: var(--lp-overlay, transparent);
  mix-blend-mode: multiply;
}

/* Contained sample on the settings form — tint stays inside the paper, not the whole app. */
.lp-preview {
  position: relative;
  overflow: hidden;
}

.lp-preview .lp-overlay {
  position: absolute;
  z-index: 3;
}

.lp-root[data-lp-meeting='true'] .lp-overlay {
  display: none !important;
}

.lp-meeting-surface {
  --lp-overlay: transparent;
}

@media print {
  .lp-no-print {
    display: none !important;
  }

  .lp-print-sheet {
    font-family: var(--lp-font-family, inherit);
    font-size: calc(12pt * var(--lp-font-scale, 1));
    line-height: calc(1.5 * var(--lp-line-spacing, 1));
    letter-spacing: var(--lp-letter-spacing, 0);
    color: #111;
    background: #fff;
  }

  .lp-print-sheet .lp-print-item {
    break-inside: avoid;
    page-break-inside: avoid;
    margin-bottom: 1.25rem;
  }

  /*
    Figures on paper (src/figures).

    Two things are true of a printed worksheet that are not true on screen:
    school printers are usually monochrome, and browsers omit backgrounds by
    default. So strokes go pure black and fills are dropped — the dash pattern
    and the label, which already carry the meaning on screen, are what
    distinguish one series from another here. Nothing is lost, because colour
    was never the only cue.
  */
  .mp-figure-root {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .mp-figure {
    max-width: 100% !important;
    height: auto;
  }

  .mp-figure .mp-figure__surface {
    fill: #fff !important;
    stroke: #767676 !important;
  }

  .mp-figure .mp-figure__grid line {
    stroke: #b8b8b8 !important;
  }

  .mp-figure .mp-figure__axis line,
  .mp-figure .mp-figure__series polyline,
  .mp-figure .mp-figure__interval line,
  .mp-figure .mp-figure__legend line {
    stroke: #000 !important;
  }

  /* Hollow endpoint = value excluded. Flagged with data-open so print does not
     have to infer it from the on-screen fill colour. */
  .mp-figure circle[data-open='false'] {
    fill: #000 !important;
    stroke: #000 !important;
  }

  .mp-figure circle[data-open='true'] {
    fill: #fff !important;
    stroke: #000 !important;
  }

  /* Only the glyph fill — the white `stroke` on point labels is the halo that
     keeps them readable where they cross a curve. */
  .mp-figure text {
    fill: #000 !important;
  }

  /* Beats whichever utility class the surrounding page put on the caption. */
  .mp-figure-root figcaption {
    color: #000 !important;
  }
}

/* PDF Transparent Background Styles */
/* Pure CSS-based theme handling for PDF viewers - No encoding detection needed */

/* ========================================== */
/* CORE PDF TRANSPARENCY RULES */
/* ========================================== */

/* PDF Canvas elements should always be transparent to allow theme backgrounds to show through */
canvas {
  background-color: transparent !important;
}

/* PDF containers should be transparent */
.pdf-document,
.pdf-page,
.pdf-content,
.pdf-canvas-container {
  background-color: transparent !important;
}

/* React-PDF specific canvas background */
.react-pdf__Page__canvas {
  background-color: transparent !important;
}

/* ThemedPdfViewer container */
.themed-pdf-document {
  background-color: transparent !important;
}

.themed-pdf-page {
  background-color: transparent !important;
}

/* Document viewer containers for PDFs */
.document-viewer-container[data-document-type="pdf"] {
  background-color: transparent !important;
}

/* Ensure PDF viewer wrapper allows theme to show through */
.document-viewer-wrapper .pdf-document {
  background-color: transparent !important;
}

/* PDF.js specific canvas styling */
canvas[data-pdf-page] {
  background-color: transparent !important;
}

/* Canvas containers in PDF viewers */
.canvas-container,
.pdf-viewer-canvas-container {
  background-color: transparent !important;
}

/* ========================================== */
/* THEME-BASED PDF CONTAINER BACKGROUNDS */
/* ========================================== */

/* Default/Light theme PDF container backgrounds */
.pdf-viewer-container,
.document-viewer-container[data-document-type="pdf"],
.enhanced-pdf-viewer,
.themed-pdf-viewer {
  background-color: hsl(var(--background));
  transition: background-color 0.3s ease;
}

/* Dark theme PDF container backgrounds */
[data-theme="dark"] .pdf-viewer-container,
[data-theme="dark"] .document-viewer-container[data-document-type="pdf"],
[data-theme="dark"] .enhanced-pdf-viewer,
[data-theme="dark"] .themed-pdf-viewer,
.dark .pdf-viewer-container,
.dark .document-viewer-container[data-document-type="pdf"],
.dark .enhanced-pdf-viewer,
.dark .themed-pdf-viewer {
  background-color: hsl(var(--background));
}

/* Mellow Yellow theme PDF container backgrounds */
[data-theme="mellowYellow"] .pdf-viewer-container,
[data-theme="mellowYellow"] .document-viewer-container[data-document-type="pdf"],
[data-theme="mellowYellow"] .enhanced-pdf-viewer,
[data-theme="mellowYellow"] .themed-pdf-viewer,
.mellowYellow .pdf-viewer-container,
.mellowYellow .document-viewer-container[data-document-type="pdf"],
.mellowYellow .enhanced-pdf-viewer,
.mellowYellow .themed-pdf-viewer {
  background-color: hsl(var(--background));
}

/* Purple Rain theme PDF container backgrounds */
[data-theme="purpleRain"] .pdf-viewer-container,
[data-theme="purpleRain"] .document-viewer-container[data-document-type="pdf"],
[data-theme="purpleRain"] .enhanced-pdf-viewer,
[data-theme="purpleRain"] .themed-pdf-viewer,
.purpleRain .pdf-viewer-container,
.purpleRain .document-viewer-container[data-document-type="pdf"],
.purpleRain .enhanced-pdf-viewer,
.purpleRain .themed-pdf-viewer {
  background-color: hsl(var(--background));
}

/* Blue Sky theme PDF container backgrounds */
[data-theme="blueSky"] .pdf-viewer-container,
[data-theme="blueSky"] .document-viewer-container[data-document-type="pdf"],
[data-theme="blueSky"] .enhanced-pdf-viewer,
[data-theme="blueSky"] .themed-pdf-viewer,
.blueSky .pdf-viewer-container,
.blueSky .document-viewer-container[data-document-type="pdf"],
.blueSky .enhanced-pdf-viewer,
.blueSky .themed-pdf-viewer {
  background-color: hsl(var(--background));
}

/* ========================================== */
/* LESSON CONTENT CONTAINER THEMING */
/* ========================================== */

/* Lesson display containers should use theme backgrounds */
.lesson-content-container,
.lesson-content-main,
.lesson-content-display,
.lesson-display-overlay {
  background-color: hsl(var(--background)) !important;
  color: hsl(var(--foreground)) !important;
}

/* Ensure lesson content areas inherit theme colors */
.lesson-content-container * {
  background-color: transparent !important;
}

/* Lesson content text should use theme foreground color */
.lesson-content-container p,
.lesson-content-container h1,
.lesson-content-container h2,
.lesson-content-container h3,
.lesson-content-container h4,
.lesson-content-container h5,
.lesson-content-container h6,
.lesson-content-container span,
.lesson-content-container div {
  color: hsl(var(--foreground)) !important;
}

/* ========================================== */
/* UNIVERSAL TRANSPARENCY FIXES (NO ENCODING DETECTION) */
/* ========================================== */

/* Force transparency for ALL PDF canvases regardless of creator */
canvas[data-pdf-canvas],
canvas[data-pdf-page],
.pdf-canvas,
.react-pdf__Page__canvas,
.enhanced-pdf-viewer canvas,
.pdf-viewer canvas,
.document-viewer canvas {
  background-color: transparent !important;
  background: transparent !important;
  background-image: none !important;
}

/* Enhanced transparency handling for any PDF viewer */
.enhanced-pdf-viewer canvas,
.pdf-viewer canvas,
div[data-document-type="pdf"] canvas {
  background-color: transparent !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* Container transparency for all PDF viewers */
.enhanced-pdf-viewer,
.pdf-viewer,
div[data-document-type="pdf"] {
  /* Canvas children should be transparent, but container gets theme background */
}

/* ========================================== */
/* IMPROVED TRANSPARENCY WITHOUT CREATOR DETECTION */
/* ========================================== */

/* Aggressive transparency for any canvas that needs special handling */
canvas[data-special-transparency="true"],
canvas[data-transparent="true"],
.transparent-canvas {
  background-color: transparent !important;
  background: transparent !important;
  background-image: none !important;
  opacity: 1 !important;
}

/* Apply better blend modes for transparency without knowing PDF creator */
.pdf-viewer canvas,
.enhanced-pdf-viewer canvas {
  mix-blend-mode: normal !important;
  isolation: auto;
}

/* ========================================== */
/* THEME TRANSITION ANIMATIONS */
/* ========================================== */

/* Smooth theme transitions for PDF containers */
.pdf-viewer-container,
.document-viewer-container[data-document-type="pdf"],
.enhanced-pdf-viewer,
.themed-pdf-viewer {
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* ========================================== */
/* PRINT MEDIA TRANSPARENCY PRESERVATION */
/* ========================================== */

@media print {
  /* Ensure transparency is preserved when printing */
  canvas,
  .pdf-canvas,
  .react-pdf__Page__canvas {
    background-color: transparent !important;
    background: transparent !important;
    -webkit-print-color-adjust: exact !important;
            print-color-adjust: exact !important;
  }
} 

/* ========================================== */
/* ACCESSIBILITY & HIGH CONTRAST SUPPORT */
/* ========================================== */

/* High contrast mode support */
@media (prefers-contrast: high) {
  .pdf-viewer-container,
  .document-viewer-container[data-document-type="pdf"] {
    border: 2px solid currentColor;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .pdf-viewer-container,
  .document-viewer-container[data-document-type="pdf"],
  .enhanced-pdf-viewer,
  .themed-pdf-viewer {
    transition: none;
  }
} 
/* Reference book reader — text surfaces transparent (PDF parity); images untouched */

.book-scroll-flow,
.book-page-flow,
.reference-article-shell {
  background-color: transparent !important;
  background: transparent !important;
}

.book-scroll-flow[data-theme="light"] .prose,
.book-page-flow[data-theme="light"] {
  color: hsl(var(--foreground));
  --tw-prose-body: hsl(var(--foreground));
  --tw-prose-headings: hsl(var(--foreground));
}

.book-scroll-flow[data-theme="light"] .prose :where(p, li, blockquote, td, th, h1, h2, h3, h4, h5, h6),
.book-page-flow[data-theme="light"] :where(p, li, blockquote, td, th, h1, h2, h3, h4, h5, h6) {
  color: inherit;
}


/*# sourceMappingURL=main-3be1d310.27d0b2b2374487c2e47b.css.map*/