/* Lexxy Dark Theme for Multi-Tutor */

/* Override Lexxy CSS variables for dark mode */
:root {
  /* Core Lexxy variables - these are used internally by lexxy */
  --lexxy-color-canvas: #334155;
  /* slate-700 - toolbar/button background */
  --lexxy-color-surface: #1e293b;
  /* slate-800 - editor surface */
  --lexxy-color-text: #e2e8f0;
  /* slate-200 - text color */
  --lexxy-color-border: #475569;
  /* slate-600 - borders */
  --lexxy-color-primary: #0ea5e9;
  /* sky-500 - active/selected */
  --lexxy-color-muted: #94a3b8;
  /* slate-400 - placeholder/muted text */
  --lexxy-radius: 0.25rem;

  /* Editor background and text */
  --lexxy-editor-background: #1e293b;
  /* slate-800 */
  --lexxy-editor-text-color: #e2e8f0;
  /* slate-200 */
  --lexxy-editor-border-color: #475569;
  /* slate-600 */
  --lexxy-editor-placeholder-color: #94a3b8;
  /* slate-400 */

  /* Toolbar */
  --lexxy-toolbar-background: #334155;
  /* slate-700 */
  --lexxy-toolbar-border-color: #475569;
  /* slate-600 */
  --lexxy-toolbar-button-color: #e2e8f0;
  /* slate-200 */
  --lexxy-toolbar-button-hover-background: #475569;
  /* slate-600 */
  --lexxy-toolbar-button-active-background: #0ea5e9;
  /* sky-500 */

  /* Selection and focus */
  --lexxy-selection-background: #0ea5e9;
  /* sky-500 */
  --lexxy-focus-ring-color: #0ea5e9;
  /* sky-500 */

  /* Links */
  --lexxy-link-color: #38bdf8;
  /* sky-400 */

  /* Code blocks */
  --lexxy-code-background: #0f172a;
  /* slate-900 */
  --lexxy-code-text-color: #e2e8f0;
  /* slate-200 */

  /* Quotes */
  --lexxy-quote-border-color: #0ea5e9;
  /* sky-500 */
  --lexxy-quote-background: #1e293b;
  /* slate-800 */
}

/* Editor container styling */
lexxy-editor {
  background-color: var(--lexxy-editor-background, #1e293b);
  color: var(--lexxy-editor-text-color, #e2e8f0);
  border: 1px solid var(--lexxy-editor-border-color, #475569);
  border-radius: 0.5rem;
  min-height: 250px;
  transition: border-color 0.2s, box-shadow 0.2s;
}

lexxy-editor:focus-within {
  border-color: var(--lexxy-focus-ring-color, #0ea5e9);
  box-shadow: 0 0 0 2px rgba(14, 165, 233, 0.2);
}

/* The contenteditable area */
lexxy-editor [contenteditable="true"] {
  background-color: var(--lexxy-editor-background, #1e293b);
  color: var(--lexxy-editor-text-color, #e2e8f0);
  padding: 1rem;
  min-height: 200px;
}

/* Placeholder text */
lexxy-editor [data-placeholder]::before {
  color: var(--lexxy-editor-placeholder-color, #94a3b8);
}

/* Toolbar styling */
lexxy-editor lexxy-toolbar,
lexxy-toolbar {
  background-color: var(--lexxy-toolbar-background, #334155);
  border-bottom: 1px solid var(--lexxy-toolbar-border-color, #475569);
  padding: 0.5rem;
  border-radius: 0.5rem 0.5rem 0 0;
}

/* Toolbar buttons and summary (for the "more" dropdown) */
lexxy-editor lexxy-toolbar button,
lexxy-editor lexxy-toolbar summary,
lexxy-toolbar button,
lexxy-toolbar summary,
lexxy-editor button,
lexxy-editor summary,
lexxy-editor [role="button"] {
  color: var(--lexxy-toolbar-button-color, #e2e8f0) !important;
  background: transparent !important;
  border: none;
  padding: 0.375rem 0.5rem;
  border-radius: 0.25rem;
  cursor: pointer;
  list-style: none;
  /* Remove default summary marker */
}

/* Remove the default disclosure triangle from summary */
lexxy-editor summary::-webkit-details-marker {
  display: none;
}

lexxy-editor lexxy-toolbar button:hover,
lexxy-editor lexxy-toolbar summary:hover,
lexxy-toolbar button:hover,
lexxy-toolbar summary:hover,
lexxy-editor button:hover,
lexxy-editor summary:hover,
lexxy-editor [role="button"]:hover {
  background-color: var(--lexxy-toolbar-button-hover-background, #475569) !important;
}

lexxy-editor lexxy-toolbar button[aria-pressed="true"],
lexxy-toolbar button[aria-pressed="true"],
lexxy-editor button[aria-pressed="true"] {
  background-color: var(--lexxy-toolbar-button-active-background, #0ea5e9) !important;
  color: white !important;
}

/* Details/summary for the "more" toolbar dropdown */
lexxy-editor details,
lexxy-editor .lexxy-editor__toolbar-button {
  background: transparent !important;
}

lexxy-editor details[open]>summary {
  background-color: var(--lexxy-toolbar-button-hover-background, #475569) !important;
}

/* Dropdown/popover menus from details element */
lexxy-editor details>*:not(summary),
lexxy-editor [role="menu"],
lexxy-editor [role="listbox"],
lexxy-editor .lexxy-dropdown,
lexxy-editor .lexxy-menu,
lexxy-editor .lexxy-popover {
  background-color: var(--lexxy-toolbar-background, #334155) !important;
  border: 1px solid var(--lexxy-toolbar-border-color, #475569) !important;
  border-radius: 0.375rem;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
}

lexxy-editor [role="menuitem"],
lexxy-editor [role="option"],
lexxy-editor details button {
  color: var(--lexxy-toolbar-button-color, #e2e8f0) !important;
  background: transparent !important;
}

lexxy-editor [role="menuitem"]:hover,
lexxy-editor [role="option"]:hover,
lexxy-editor details button:hover {
  background-color: var(--lexxy-toolbar-button-hover-background, #475569) !important;
}

/* Links in editor */
lexxy-editor a {
  color: var(--lexxy-link-color, #38bdf8);
}

/* Code blocks */
lexxy-editor pre,
lexxy-editor code {
  background-color: var(--lexxy-code-background, #0f172a);
  color: var(--lexxy-code-text-color, #e2e8f0);
  border-radius: 0.25rem;
  padding: 0.125rem 0.25rem;
}

lexxy-editor pre {
  padding: 1rem;
  overflow-x: auto;
}

/* Blockquotes */
lexxy-editor blockquote {
  border-left: 3px solid var(--lexxy-quote-border-color, #0ea5e9);
  background-color: var(--lexxy-quote-background, #1e293b);
  padding-left: 1rem;
  margin-left: 0;
}

/* Rich text content display (for showing saved content) */
.lexxy-content {
  color: #e2e8f0;
  /* slate-200 */
}

.lexxy-content a {
  color: #38bdf8;
  /* sky-400 */
}

.lexxy-content pre,
.lexxy-content code {
  background-color: #0f172a;
  /* slate-900 */
  color: #e2e8f0;
  border-radius: 0.25rem;
}

.lexxy-content blockquote {
  border-left: 3px solid #0ea5e9;
  padding-left: 1rem;
  color: #94a3b8;
}