/* Custom Command Palette styling */

/* Command Palette Theme Variables */
:root {
  /* Default (Light Theme) */
  --command-palette-bg: #f9f5fb;
  --command-palette-text: #333;
  --command-palette-input-bg: #fff;
  --command-palette-input-text: #333;
  --command-palette-section-title: #68236d;
  --command-palette-icon: #68236d;
  --command-palette-excerpt: #666;
  --command-palette-border: rgba(104, 35, 109, 0.2);
  --command-palette-hover-bg: rgba(104, 35, 109, 0.1);
  --command-palette-selected-bg: rgba(104, 35, 109, 0.15);
  --command-palette-kbd-bg: rgba(104, 35, 109, 0.1);
  --command-palette-kbd-border: rgba(104, 35, 109, 0.3);
}

[data-theme="dark"] {
  /* Command Palette Colors - Dark Theme */
  --command-palette-bg: #2d1e30;
  --command-palette-text: #fff;
  --command-palette-input-bg: #3a2a3d;
  --command-palette-input-text: #fff;
  --command-palette-section-title: #d4a5db;
  --command-palette-icon: #d4a5db;
  --command-palette-excerpt: #ccc;
  --command-palette-border: rgba(104, 35, 109, 0.3);
  --command-palette-hover-bg: rgba(104, 35, 109, 0.3);
  --command-palette-selected-bg: rgba(104, 35, 109, 0.25);
  --command-palette-kbd-bg: rgba(104, 35, 109, 0.25);
  --command-palette-kbd-border: rgba(104, 35, 109, 0.4);
}

.simple-command-palette {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
  display: none;
}

.simple-command-palette-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.simple-command-palette-modal {
  position: absolute;
  top: 20%;
  left: 50%;
  transform: translateX(-50%);
  width: 640px;
  max-width: 90vw;
  background-color: #f9f5fb; /* Light theme fallback */
  background-color: var(--command-palette-bg);
  color: #333; /* Light theme fallback */
  color: var(--command-palette-text);
  border-radius: 12px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
  overflow: hidden;
  border: 1px solid var(--command-palette-border);
  transition: all 0.3s ease;
  /* Ensure opaque background */
  opacity: 1;
}

[data-theme="dark"] .simple-command-palette-modal {
  background-color: #2d1e30;
  color: #fff;
}

#command-palette-input {
  width: 100%;
  padding: 16px 18px;
  border: none;
  border-bottom: 2px solid var(--command-palette-border);
  font-size: 16px;
  outline: none;
  background-color: #fff; /* Light theme fallback */
  background-color: var(--command-palette-input-bg);
  transition: all 0.3s ease;
  color: #333; /* Light theme fallback */
  color: var(--command-palette-input-text);
  font-weight: 500;
}

[data-theme="dark"] #command-palette-input {
  background-color: #3a2a3d;
  color: #fff;
}

#command-palette-input:focus {
  border-bottom-color: var(--command-palette-border);
  background-color: var(--command-palette-input-bg);
}

.command-palette-results {
  max-height: 60vh;
  overflow-y: auto;
  padding: 0 4px;
  background-color: #f9f5fb; /* Light theme fallback */
  background-color: var(--command-palette-bg);
}

[data-theme="dark"] .command-palette-results {
  background-color: #2d1e30;
}

.command-palette-section {
  padding: 10px 0;
}

.command-palette-section-title {
  padding: 6px 16px;
  font-size: 12px;
  font-weight: bold;
  color: var(--command-palette-section-title);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.command-palette-commands {
  margin-bottom: 8px;
}

.command-palette-command {
  display: flex;
  align-items: center;
  padding: 10px 16px;
  cursor: pointer;
  flex-wrap: wrap;
  border-radius: 8px;
  transition: all 0.2s ease;
  margin: 2px 4px;
  color: var(--command-palette-text);
}

.command-palette-command:hover, .command-palette-command.selected {
  background-color: var(--command-palette-hover-bg);
}

.command-palette-command.selected {
  outline: 2px solid var(--command-palette-border);
  position: relative;
  background-color: var(--command-palette-selected-bg);
}

.command-palette-icon {
  flex: 0 0 24px;
  margin-right: 14px;
  color: var(--command-palette-icon);
}

.command-palette-title {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 500;
  color: var(--command-palette-text);
}

.command-palette-shortcut {
  flex: 0 0 auto;
  padding: 3px 8px;
  border-radius: 4px;
  background-color: var(--command-palette-kbd-bg);
  font-size: 12px;
  color: var(--command-palette-text);
  font-weight: 600;
}

.command-palette-excerpt {
  flex-basis: 100%;
  margin-top: 6px;
  margin-left: 38px;
  font-size: 13px;
  color: var(--command-palette-excerpt);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  line-height: 1.5;
}

/* Style for search results section */
.search-results-section {
  border-top: 1px solid rgba(104, 35, 109, 0.2);
  margin-top: 10px;
  padding-top: 10px;
}

.command-palette-no-results {
  padding: 20px;
  text-align: center;
  color: var(--command-palette-excerpt);
  font-style: italic;
}

/* Command palette button styling */
.command-palette-button {
  display: flex;
  align-items: center;
  height: 100%;
}

.command-wrapper {
  display: flex;
  align-items: center;
  height: 100%;
}

.command-k-style-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #000000;
  text-decoration: none;
  font-size: 1.6rem;
  transition: all 0.3s ease;
  padding: 0.8rem 1.6rem;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(8px);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  border: none;
  white-space: nowrap;
  gap: 6px;
  font-weight: 500;
  cursor: pointer;
  height: 40px; /* Set a fixed height to match navigation links */
  margin: auto 0; /* Center vertically in the container */
}

.command-k-style-btn:hover {
  background: rgba(255, 255, 255, 0.35);
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

.command-k-style-btn:focus,
.command-k-style-btn.focused {
  outline: 2px solid rgba(104, 35, 109, 0.5);
  outline-offset: 1px;
}

.command-k-style-btn .search-icon {
  margin-left: 4px;
  font-size: 1em;
  color: #000000;
}

.command-k-style-btn .default-theme-text,
.command-k-style-btn .mac-theme-text {
  font-weight: 500;
  color: #000000;
}

/* Hide previous button styling */
.command-palette-button .btn {
  display: none;
}

/* Hide one of the shortcut texts depending on platform */
.mac-theme-text, .default-theme-text {
  display: none;
}

/* Mobile styling for command palette button */
@media screen and (max-width: 768px) {
  .command-palette-button {
    margin: 0.8rem 0;
    width: 100%;
  }
  
  .command-k-style-btn {
    width: 100%;
    justify-content: center;
    padding: 0.8rem;
  }
  
  .simple-command-palette-modal {
    width: 95vw;
    max-width: 95vw;
    top: 15%;
  }
  
  .command-palette-excerpt {
    display: none; /* Hide excerpts on mobile to save space */
  }
}

/* Original Dark mode styling has been moved to the base styles above.
   These styles have been applied directly to make the command palette
   consistently use the dark purple theme across all browsers. */

/* Dark mode styles for command-k button that we aren't using in the main palette */
/* Dark mode styles for command-k button that we aren't using in the main palette */

/* Command palette footer styles are defined below */

/* Custom styles for the shortcut help modal */
.shortcut-help-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 2000;
  display: flex;
  justify-content: center;
  align-items: center;
}

.shortcut-help-content {
  background-color: #f9f5fb;
  border-radius: 12px;
  padding: 24px;
  max-width: 600px;
  max-height: 80vh;
  overflow: auto;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
  border: 1px solid var(--command-palette-border);
  color: #333;
}

.shortcut-help-content h2 {
  margin-top: 0;
  color: #68236D;
}

.shortcut-help-content table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1rem;
}

.shortcut-help-content th,
.shortcut-help-content td {
  text-align: left;
  padding: 10px;
  border-bottom: 1px solid rgba(104, 35, 109, 0.2);
}

.shortcut-help-content kbd {
  display: inline-block;
  padding: 3px 6px;
  font-size: 0.9em;
  line-height: 1.4;
  color: #68236D;
  background-color: rgba(104, 35, 109, 0.15);
  border: 1px solid var(--command-palette-border);
  border-radius: 4px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  margin: 0 2px;
  font-family: inherit;
  font-weight: 600;
}

.shortcut-help-footer {
  margin-top: 24px;
  text-align: center;
}

.shortcut-help-footer button {
  padding: 8px 16px;
  background-color: #68236D;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  font-weight: 500;
}

.shortcut-help-footer button:hover {
  background-color: #7d2982;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
}

@media (prefers-color-scheme: dark) {
  .shortcut-help-content {
    background-color: #2d1e30;
    color: var(--command-palette-text);
    border-color: rgba(104, 35, 109, 0.3);
  }
  
  .shortcut-help-content h2 {
    color: #d4a5db;
  }
  
  .shortcut-help-content th,
  .shortcut-help-content td {
    border-bottom-color: rgba(104, 35, 109, 0.3);
  }
  
  .shortcut-help-content kbd {
    color: var(--command-palette-text);
    background-color: rgba(104, 35, 109, 0.25);
    border-color: rgba(104, 35, 109, 0.4);
  }
  
  .shortcut-help-footer button:hover {
    background-color: #8d3092;
  }
}

.command-palette-footer {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 12px;
  background-color: var(--command-palette-hover-bg);
  border-top: 1px solid var(--command-palette-border);
  gap: 16px;
  flex-wrap: wrap;
}

.command-palette-footer-item {
  display: flex;
  align-items: center;
  color: #ddd;
  font-size: 13px;
}

.command-palette-footer kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 5px;
  background-color: var(--command-palette-kbd-bg);
  border: 1px solid var(--command-palette-kbd-border);
  border-radius: 4px;
  color: var(--command-palette-text);
  margin: 0 3px;
  font-size: 12px;
  line-height: 1;
  font-family: system-ui, -apple-system, sans-serif;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  font-weight: 600;
}

/* Footer dark styling is now applied to all color schemes above */