/* ========================================
   Oxygen Settings Plugin Styles
   ======================================== */

/* ========================================
   Preset Editor Modal Styles
   ======================================== */

.preset-editor-modal .modal-content {
  max-height: 70vh;
  overflow-y: auto;
}

.modal-section {
  margin-bottom: 1.5rem;
}

.mode-section {
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--background-modifier-border);
}

.mode-section:last-of-type {
  border-bottom: none;
}

.mode-section h3 {
  color: var(--text-normal);
  margin-bottom: 1rem;
}

.color-section {
  margin-bottom: 1.5rem;
}

.preset-editor-modal .color-section h3 {
  color: var(--text-normal);
  margin-bottom: 0.75rem;
  font-size: 0.95rem;
}

.color-group {
  margin-bottom: 1rem;
}

.color-group label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 500;
}

.collapsible-item {
  padding-left: 0;
  margin-top: 0.5rem;
}

.color-override {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
  padding-left: 0.5rem;
}

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

.color-input-wrapper {
  width: 2rem;
  height: 2rem;
  display: inline-block;
  position: relative;
}

.color-preview-swatch {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  border: 2px solid var(--background-modifier-border);
  cursor: pointer;
  background-color: var(--preview-color);
  transition: opacity 0.2s ease, border-color 0.2s ease;
}

.preset-editor-modal .color-preview-swatch:hover,
.preset-import-modal .color-preview-swatch:hover {
  border-color: var(--text-muted);
}

/* Dim the color preview when the input is disabled.
   Use the disabled-input sibling combinator instead of a parent-matching
   selector to avoid the broad invalidation cost. */
.color-input-wrapper input:disabled ~ .color-preview-swatch,
.color-input-wrapper input:disabled + .color-preview-swatch {
  opacity: 0.5;
  cursor: not-allowed;
}

.mode-tabs {
  display: flex;
  border-bottom: 1px solid var(--background-modifier-border);
  margin-bottom: 1rem;
}

.mode-tab {
  background: none;
  border: none;
  padding: 0.5rem 1rem;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  color: var(--text-muted);
  font-size: 0.9rem;
  transition: color 0.2s ease;
}

.mode-tab:hover {
  color: var(--text-normal);
}

.mode-tab.active {
  color: var(--text-normal);
  border-bottom-color: var(--text-accent);
  font-weight: 500;
}

.mode-content {
  display: none;
}

.mode-content.active {
  display: block;
}

.hsl-controls {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr auto;
  gap: 1rem;
  align-items: center;
}

.hsl-control {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.hsl-control label {
  font-size: 0.8rem;
  margin: 0;
}

.hsl-control input[type="range"] {
  width: 100%;
}

.hsl-control span {
  font-size: 0.8rem;
  color: var(--text-muted);
  min-width: 2rem;
  text-align: center;
}

.preset-editor-modal .color-preview {
  width: 2rem;
  height: 2rem;
  border-radius: 3px;
  border: 1px solid var(--background-modifier-border);
}

.color-preview-section {
  margin-bottom: 1.5rem;
}

.color-preview-section h4 {
  margin: 0 0 1rem 0;
  font-size: 1rem;
  font-weight: 600;
}

.color-details-section {
  margin-top: 1rem;
}

.color-details-section h4 {
  margin: 0 0 1rem 0;
  font-size: 1rem;
  font-weight: 600;
}

.collapsible-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: default;
  padding: 0.5rem 0;
  margin-bottom: 0.5rem;
}

.collapsible-header h4 {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-normal);
}

/* Specificity boosted via .preset-editor-modal scope so these rules
   beat Obsidian's default button styling through the cascade. */
.preset-editor-modal .collapse-toggle {
  background: none;
  border: none;
  box-shadow: none;
  color: var(--text-muted);
  cursor: default;
  padding: 0;
  margin: 0;
  width: 20px;
  height: 20px;
  outline: none;
  font-family: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.preset-editor-modal .collapse-toggle:hover {
  color: var(--text-normal);
  box-shadow: none;
  background: none;
  border: none;
}

.preset-editor-modal .collapse-toggle:focus {
  outline: none;
  box-shadow: none;
  background: none;
  border: none;
}

.preset-editor-modal .collapse-toggle:active {
  box-shadow: none;
  background: none;
  border: none;
}

.collapse-toggle svg {
  width: 16px;
  height: 16px;
  stroke-width: 2;
}

.collapsible-content {
  transition: max-height 0.3s ease;
  overflow: hidden;
  max-height: 0;
}

.collapsible-content:not(.collapsed) {
  max-height: 400px;
}

.preview-swatch {
  border: 1px solid var(--background-modifier-border);
  border-radius: 6px;
  padding: 1rem;
  background: var(--background-primary);
}

.preview-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}

.preview-row:last-child {
  margin-bottom: 0;
}

.preview-label {
  font-weight: 500;
  min-width: 5rem;
}

.preview-colors {
  display: flex;
  gap: 0.5rem;
}

.preview-color {
  width: 2rem;
  height: 2rem;
  border-radius: 3px;
  border: 1px solid var(--background-modifier-border);
  background-color: var(--preview-color);
}

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

.modal-footer button {
  min-width: 80px;
}

/* ========================================
   Preset Import Modal Styles
   ======================================== */

.preset-import-modal .modal-content {
  max-height: 80vh;
  overflow-y: auto;
}

.preset-import-modal .preset-json-input {
  height: 200px;
  font-family: monospace;
  font-size: 0.9rem;
}

.hidden {
  display: none !important;
}

.preview-container {
  border: 1px solid var(--background-modifier-border);
  border-radius: 6px;
  padding: 1rem;
  background: var(--background-primary);
  min-height: 200px;
}

.preview-placeholder {
  color: var(--text-muted);
  font-style: italic;
  text-align: center;
  margin: 2rem 0;
}

.preview-error {
  color: var(--text-error);
  font-style: italic;
  text-align: center;
  margin: 2rem 0;
}

.error-section {
  background: var(--background-modifier-error);
  border: 1px solid var(--text-error);
  border-radius: 6px;
  padding: 1rem;
  margin-bottom: 1rem;
}

.error-message {
  color: var(--text-error);
  font-weight: 500;
}

.preset-import-modal .preset-info {
  margin-bottom: 1rem;
}

.info-row {
  margin-bottom: 0.5rem;
}

.preset-id {
  font-family: monospace;
  background: var(--background-secondary);
  padding: 0.2rem 0.4rem;
  border-radius: 3px;
  font-size: 0.9rem;
}

.mode-toggle {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--background-modifier-border);
}

.mode-btn {
  background: none;
  border: none;
  padding: 0.5rem 1rem;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  color: var(--text-muted);
  font-size: 0.9rem;
  transition: color 0.2s ease;
}

.mode-btn:hover {
  color: var(--text-normal);
}

.mode-btn.active {
  color: var(--text-normal);
  border-bottom-color: var(--text-accent);
  font-weight: 500;
}

.swatch-container {
  margin-top: 0.5rem;
}

.mode-swatches {
  display: none;
  gap: 1rem;
  margin-top: 0.5rem;
}

.mode-swatches.active {
  display: flex;
}

.color-swatch {
  width: 3rem;
  height: 3rem;
  border-radius: 6px;
  border: 1px solid var(--background-modifier-border);
  cursor: pointer;
  transition: transform 0.2s ease;
  background-color: hsl(var(--swatch-hsl));
}

.color-swatch:hover {
  transform: scale(1.05);
}


.mode-details {
  margin-bottom: 1rem;
}

.mode-details h5 {
  margin: 0 0 0.5rem 0;
  color: var(--text-normal);
}

.color-detail {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
  font-family: monospace;
  font-size: 0.9rem;
}

.detail-swatch {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 3px;
  border: 1px solid var(--background-modifier-border);
  flex-shrink: 0;
  background-color: hsl(var(--detail-hsl));
}

.color-detail span:first-of-type {
  color: var(--text-muted);
  min-width: 3rem;
}

.overrides-info {
  margin-top: 1rem;
  padding: 0.5rem;
  background: var(--background-secondary);
  border-radius: 3px;
  font-size: 0.9rem;
  color: var(--text-muted);
}

/* ========================================
   Settings Tab Styles
   ======================================== */

.custom-preset-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem;
  margin-bottom: 0.5rem;
  border: 1px solid var(--background-modifier-border);
  border-radius: 6px;
  background: var(--background-primary);
  transition: background-color 0.2s ease;
}

.custom-preset-item:hover {
  background: var(--background-secondary);
}

.custom-preset-item .preset-info {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex: 1;
}

.preset-details {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.preset-name {
  font-weight: 500;
  color: var(--text-normal);
  font-size: 0.9rem;
}

.preset-author {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.custom-preset-item .setting-item {
  margin: 0;
  padding: 0;
  border: none;
  background: none;
}

.custom-preset-item .setting-item-info {
  display: none;
}

.custom-preset-item .setting-item-control {
  display: flex;
  gap: 0.25rem;
  align-items: center;
}

.custom-preset-item .clickable-icon {
  padding: 0.25rem;
  border-radius: 3px;
  transition: background-color 0.2s ease;
}

.custom-preset-item .clickable-icon:hover {
  background: var(--background-modifier-hover);
}

/* ========================================
   Sidebar Indentation Guides
   ======================================== */

/* The theme already handles indentation guides using --nav-indentation-guide-width and --nav-indentation-guide-color */
/* We only need to override when "None" (0px) is selected - make it invisible but keep it for indentation */
body.oxygen-theme[style*="--nav-indentation-guide-width: 0px"] .nav-folder-children::before,
body.oxygen-theme[style*="--nav-indentation-guide-width:0px"] .nav-folder-children::before {
  opacity: 0;
  visibility: hidden;
}

/* ========================================
   Workspace Borders Enhancements
   ======================================== */
/* REMOVED: All border CSS has been moved to the theme */
/* The plugin should ONLY toggle classes (borders-on, borders-none, oxygen-theme) */
/* The theme handles all CSS styling based on these classes */


/* ========================================
   Inline Style Replacements
   ======================================== */

/* Preset Editor Modal - Form Input Styles */
.frame-label {
  font-size: 0.9em;
}

.frame-description {
  font-size: 0.85em;
  margin-bottom: 8px;
}

.frame-input {
  width: 80px;
}

/* Collapsible Sections. Scoped to the editor modal where these classes
   are used, so the toggle wins the cascade through specificity alone. */
.preset-editor-modal .collapsible-content-item {
  display: none;
}

.preset-editor-modal .collapsible-content-item.expanded {
  display: flex;
}

/* Color Preview Wrapper */
.color-preview-wrapper {
  position: relative;
  display: inline-block;
}

.color-preview {
  width: 2rem;
  height: 2rem;
  border-radius: 3px;
  border: 1px solid var(--background-modifier-border);
  cursor: pointer;
  background-color: var(--preview-color);
}

/* HSL Color Input Overlay */
.hsl-color-input-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

/* Custom Preset ID Display */
.preset-id-display {
  font-size: 0.8rem;
  color: var(--text-muted);
  font-family: monospace;
}

/* Confirmation Modal Button Container */
.modal-button-container {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 20px;
}

.modal-button-container .mod-cta.confirm-button {
  background-color: var(--interactive-accent);
  color: var(--text-on-accent);
}

/* Custom Preset Swatch */
.custom-preset-swatch {
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 3px;
  border: 1px solid var(--background-modifier-border);
  margin-right: 8px;
  vertical-align: middle;
  background: linear-gradient(45deg, 
    var(--swatch-gradient-start) 0%, 
    var(--swatch-gradient-mid) 50%, 
    var(--swatch-gradient-end) 100%);
}

/* Ensure cmdr buttons are treated the same as nav-action-button */
/* This makes cmdr buttons first-class citizens alongside regular nav-action-button elements */
body .mod-sidedock .workspace-leaf-content > .nav-header .cmdr.clickable-icon,
body .mod-sidedock .workspace-leaf-content > .view-content > .nav-header .cmdr.clickable-icon {
	/* Inherit nav-action-button styling */
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* Ensure cmdr buttons in view-actions are treated the same as regular view-action buttons */
/* This makes cmdr buttons in view headers match the normal color of other view-action buttons */
/* Override inline styles and ensure they use the same color/opacity as default view-action buttons */
body .view-header .view-actions .cmdr.clickable-icon.view-action,
body .view-header .view-actions .cmdr-page-header.clickable-icon.view-action {
	opacity: var(--icon-opacity) !important;
	color: var(--icon-color) !important;
}

/* Also target the SVG inside cmdr buttons to ensure stroke color matches */
body .view-header .view-actions .cmdr.clickable-icon.view-action svg,
body .view-header .view-actions .cmdr-page-header.clickable-icon.view-action svg {
	color: var(--icon-color) !important;
	stroke: currentColor !important;
}

/* ========================================
   Background Blur Effect
   ======================================== */

/* Base modal-bg styling - use theme's cover color for proper dimming */
/* Opacity is set inline by Obsidian (0.85), we just need to ensure background color is applied */
body.oxygen-theme:not(.is-mobile) .modal-bg {
	background-color: var(--background-modifier-cover);
}

/* Apply blur effect to modal background only */
/* Only applies on desktop (not mobile) and when Oxygen theme is active */
body.oxygen-theme:not(.is-mobile).enable-blur .modal-bg {
	backdrop-filter: blur(1px) brightness(0.98);
	-moz-osx-font-smoothing: grayscale;
}


/* Scoped to only this plugin's settings container to avoid affecting other plugins */


/* ========================================
   Colorful Frame Fixes
   ======================================== */

.colorful-frame .titlebar {
  background-color: var(--frame-background);
}

/* Ensure background applies even without border classes (Enhanced) */
body.colorful-frame:not(.borders-on):not(.borders-none) .titlebar {
  background-color: var(--frame-background);
}

/* Fix for "None" borders (removes weird line) */
body.colorful-frame.borders-none .workspace-tab-header-container {
  border: none;
  box-shadow: none;
}