/* VS Code Clone Styles */

:root {
  /* Light Theme Variables */
  --light-bg: #ffffff;
  --light-sidebar-bg: #f3f3f3;
  --light-activity-bar-bg: #2c2c2c;
  --light-editor-bg: #ffffff;
  --light-text: #333333;
  --light-text-secondary: #6c6c6c;
  --light-border: #e0e0e0;
  --light-selection: #add6ff;
  --light-hover: #e8e8e8;
  --light-active-tab: #ffffff;
  --light-inactive-tab: #ececec;
  --light-status-bar-bg: #007acc;
  --light-status-bar-text: #ffffff;
  --light-terminal-bg: #f5f5f5;
  --light-terminal-text: #333333;
  --light-title-bar: #dddddd;
  --light-menu-hover: #d8d8d8;
  --light-line-number: #858585;
  --light-line-highlight: rgba(0, 0, 0, 0.05);

  /* Dark Theme Variables */
  --dark-bg: #1e1e1e;
  --dark-sidebar-bg: #252526;
  --dark-activity-bar-bg: #333333;
  --dark-editor-bg: #1e1e1e;
  --dark-text: #cccccc;
  --dark-text-secondary: #909090;
  --dark-border: #474747;
  --dark-selection: #264f78;
  --dark-hover: #2a2d2e;
  --dark-active-tab: #1e1e1e;
  --dark-inactive-tab: #2d2d2d;
  --dark-status-bar-bg: #007acc;
  --dark-status-bar-text: #ffffff;
  --dark-terminal-bg: #1e1e1e;
  --dark-terminal-text: #cccccc;
  --dark-title-bar: #3c3c3c;
  --dark-menu-hover: #094771;
  --dark-line-number: #858585;
  --dark-line-highlight: rgba(255, 255, 255, 0.05);
  
  /* Code Colors */
  --comment-color: #608b4e;
  --string-color: #ce9178;
  --keyword-color: #569cd6;
  --function-color: #dcdcaa;
  --variable-color: #9cdcfe;
  --number-color: #b5cea8;
  --class-color: #4ec9b0;
  --error-color: #f44747;
  --warning-color: #ff9100;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  font-size: 13px;
}

body {
  height: 100vh;
  overflow: hidden;
}

.app-container {
  display: grid;
  grid-template-columns: 48px 240px 1fr;
  grid-template-rows: 30px 1fr 22px;
  height: 100vh;
}

/* Theme Styles */
.theme-light {
  --bg: var(--light-bg);
  --sidebar-bg: var(--light-sidebar-bg);
  --activity-bar-bg: var(--light-activity-bar-bg);
  --editor-bg: var(--light-editor-bg);
  --text-color: var(--light-text);
  --text-secondary: var(--light-text-secondary);
  --border-color: var(--light-border);
  --selection-color: var(--light-selection);
  --hover-color: var(--light-hover);
  --active-tab: var(--light-active-tab);
  --inactive-tab: var(--light-inactive-tab);
  --status-bar-bg: var(--light-status-bar-bg);
  --status-bar-text: var(--light-status-bar-text);
  --terminal-bg: var(--light-terminal-bg);
  --terminal-text: var(--light-terminal-text);
  --title-bar: var(--light-title-bar);
  --menu-hover: var(--light-menu-hover);
  background-color: var(--bg);
  color: var(--text-color);
}

.theme-dark {
  --bg: var(--dark-bg);
  --sidebar-bg: var(--dark-sidebar-bg);
  --activity-bar-bg: var(--dark-activity-bar-bg);
  --editor-bg: var(--dark-editor-bg);
  --text-color: var(--dark-text);
  --text-secondary: var(--dark-text-secondary);
  --border-color: var(--dark-border);
  --selection-color: var(--dark-selection);
  --hover-color: var(--dark-hover);
  --active-tab: var(--dark-active-tab);
  --inactive-tab: var(--dark-inactive-tab);
  --status-bar-bg: var(--dark-status-bar-bg);
  --status-bar-text: var(--dark-status-bar-text);
  --terminal-bg: var(--dark-terminal-bg);
  --terminal-text: var(--dark-terminal-text);
  --title-bar: var(--dark-title-bar);
  --menu-hover: var(--dark-menu-hover);
  background-color: var(--bg);
  color: var(--text-color);
}
.start-page {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--bg);
  display: flex;
  flex-direction: column;
  z-index: 5000;
}

.start-header {
  height: 50px;
  display: flex;
  align-items: center;
  padding: 0 20px;
  border-bottom: 1px solid var(--border-color);
}

.vs-logo {
  font-size: 22px;
  font-weight: bold;
  display: flex;
  align-items: center;
}

.vs-logo i {
  margin-right: 10px;
  color: var(--status-bar-bg);
}

.start-content {
  display: flex;
  justify-content: center;
  padding: 40px;
  flex-grow: 1;
  gap: 40px;
}

.start-section {
  width: 300px;
}

.start-section h2 {
  font-size: 18px;
  margin-bottom: 20px;
  color: var(--text-color);
  font-weight: normal;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 5px;
}

.recent-projects {
  margin-bottom: 30px;
}

.start-item {
  display: flex;
  align-items: center;
  padding: 10px;
  cursor: pointer;
  border-radius: 3px;
  margin-bottom: 5px;
}

.start-item:hover {
  background-color: var(--hover-color);
}

.start-item i {
  margin-right: 10px;
  width: 16px;
  text-align: center;
  color: var(--status-bar-bg);
}

.recent-item {
  display: flex;
  align-items: center;
  padding: 10px;
  cursor: pointer;
  border-radius: 3px;
  margin-bottom: 5px;
}

.recent-item:hover {
  background-color: var(--hover-color);
}

.recent-item i {
  margin-right: 10px;
  width: 16px;
  text-align: center;
  color: var(--status-bar-bg);
}

.empty-recent {
  color: var(--text-secondary);
  font-style: italic;
  padding: 10px;
}

/* Sidebar Toggle */
.sidebar-toggle {
  position: absolute;
  top: 50%;
  left: 50px;
  width: 16px;
  height: 40px;
  background-color: var(--sidebar-bg);
  border: 1px solid var(--border-color);
  border-left: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 100;
  border-radius: 0 4px 4px 0;
  transform: translateY(-50%);
}

.sidebar-toggle:hover {
  background-color: var(--hover-color);
}

.app-container.sidebar-collapsed {
  grid-template-columns: 50px 0px 1fr;
}

.sidebar-collapsed .sidebar {
  display: none;
}

.sidebar-collapsed .sidebar-toggle i {
  transform: rotate(180deg);
}

/* Workspace Styles */
.workspace-dialog {
  width: 550px;
}

.workspace-list {
  max-height: 300px;
  overflow-y: auto;
}

.workspace-item {
  display: flex;
  justify-content: space-between;
  padding: 10px;
  border-bottom: 1px solid var(--border-color);
  cursor: pointer;
}

.workspace-item:hover {
  background-color: var(--hover-color);
}

.workspace-item-name {
  font-weight: 500;
}

.workspace-item-date {
  color: var(--text-secondary);
  font-size: 11px;
}

.workspace-empty {
  padding: 20px;
  text-align: center;
  color: var(--text-secondary);
  font-style: italic;
}

/* Terminal Styles */
.terminal-container {
  display: none;
  height: 300px;
  border-top: 1px solid var(--border-color);
  background-color: var(--terminal-bg);
  color: var(--terminal-text);
  flex-direction: column;
  z-index: 3;
}

.terminal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 10px;
  background-color: var(--sidebar-bg);
  border-bottom: 1px solid var(--border-color);
  height: 30px;
}

.terminal-title {
  font-size: 11px;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  color: var(--text-secondary);
  font-weight: 600;
}

.terminal-title i {
  margin-right: 5px;
  font-size: 14px;
}

.terminal-actions {
  display: flex;
}

.terminal-action {
  width: 24px;
  height: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  margin-left: 5px;
  color: var(--text-secondary);
  border-radius: 3px;
}

.terminal-action:hover {
  color: var(--text-color);
  background-color: var(--hover-color);
}

.terminal-output {
  flex-grow: 1;
  padding: 10px;
  overflow-y: auto;
  font-family: 'Consolas', 'Courier New', monospace;
  font-size: 14px;
}

.terminal-line {
  margin-bottom: 4px;
  white-space: pre-wrap;
}

.terminal-input-container {
  display: flex;
  align-items: center;
  padding: 5px 10px;
  border-top: 1px solid var(--border-color);
}

.terminal-prompt {
  margin-right: 5px;
  font-family: 'Consolas', 'Courier New', monospace;
  font-size: 14px;
}

.terminal-input {
  flex-grow: 1;
  background-color: transparent;
  border: none;
  outline: none;
  color: var(--terminal-text);
  font-family: 'Consolas', 'Courier New', monospace;
  font-size: 14px;
}
.terminal-container {
  display: none;
  height: 200px;
  border-top: 1px solid var(--border-color);
  background-color: var(--terminal-bg);
  color: var(--terminal-text);
  flex-direction: column;
}

.terminal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 10px;
  background-color: var(--sidebar-bg);
  border-bottom: 1px solid var(--border-color);
}

.terminal-title {
  font-size: 12px;
  display: flex;
  align-items: center;
}

.terminal-title i {
  margin-right: 5px;
}

.terminal-actions {
  display: flex;
}

.terminal-action {
  width: 24px;
  height: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  margin-left: 5px;
}

.terminal-action:hover {
  background-color: var(--hover-color);
}

.terminal-output {
  flex-grow: 1;
  padding: 10px;
  overflow-y: auto;
  font-family: 'Consolas', 'Courier New', monospace;
  font-size: 14px;
}

.terminal-line {
  margin-bottom: 4px;
  white-space: pre-wrap;
}

.terminal-input-container {
  display: flex;
  align-items: center;
  padding: 5px 10px;
  border-top: 1px solid var(--border-color);
}

.terminal-prompt {
  margin-right: 5px;
  font-family: 'Consolas', 'Courier New', monospace;
  font-size: 14px;
}

.terminal-input {
  flex-grow: 1;
  background-color: transparent;
  border: none;
  outline: none;
  color: var(--terminal-text);
  font-family: 'Consolas', 'Courier New', monospace;
  font-size: 14px;
}

/* Drag and Drop Styles */
.folder.drag-over {
  background-color: var(--selection-color);
  border-radius: 3px;
}

/* Command Palette Styles */
.command-palette {
  position: absolute;
  top: 100px;
  left: 50%;
  transform: translateX(-50%);
  width: 600px;
  max-width: 80%;
  background-color: var(--sidebar-bg);
  border: 1px solid var(--border-color);
  border-radius: 5px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  z-index: 3000;
}

.command-input-container {
  display: flex;
  align-items: center;
  padding: 10px;
  border-bottom: 1px solid var(--border-color);
}

.command-icon {
  margin-right: 10px;
  color: var(--text-secondary);
}

#command-input {
  flex-grow: 1;
  background-color: transparent;
  border: none;
  outline: none;
  color: var(--text-color);
  font-size: 14px;
}

.command-results {
  max-height: 400px;
  overflow-y: auto;
}

.command-item {
  display: flex;
  align-items: center;
  padding: 8px 10px;
  cursor: pointer;
}

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

.command-item-icon {
  margin-right: 10px;
  width: 16px;
  text-align: center;
}

.command-item-label {
  flex-grow: 1;
}

.command-item-shortcut {
  color: var(--text-secondary);
  font-size: 12px;
  margin-left: 10px;
}

/* Theme Styles */
.theme-light {
  --bg: var(--light-bg);
  --sidebar-bg: var(--light-sidebar-bg);
  --activity-bar-bg: var(--light-activity-bar-bg);
  --editor-bg: var(--light-editor-bg);
  --text-color: var(--light-text);
  --text-secondary: var(--light-text-secondary);
  --border-color: var(--light-border);
  --selection-color: var(--light-selection);
  --hover-color: var(--light-hover);
  --active-tab: var(--light-active-tab);
  --inactive-tab: var(--light-inactive-tab);
  --status-bar-bg: var(--light-status-bar-bg);
  --status-bar-text: var(--light-status-bar-text);
  background-color: var(--bg);
  color: var(--text-color);
}

.theme-dark {
  --bg: var(--dark-bg);
  --sidebar-bg: var(--dark-sidebar-bg);
  --activity-bar-bg: var(--dark-activity-bar-bg);
  --editor-bg: var(--dark-editor-bg);
  --text-color: var(--dark-text);
  --text-secondary: var(--dark-text-secondary);
  --border-color: var(--dark-border);
  --selection-color: var(--dark-selection);
  --hover-color: var(--dark-hover);
  --active-tab: var(--dark-active-tab);
  --inactive-tab: var(--dark-inactive-tab);
  --status-bar-bg: var(--dark-status-bar-bg);
  --status-bar-text: var(--dark-status-bar-text);
  background-color: var(--bg);
  color: var(--text-color);
}

/* Menu Bar */
.menu-bar {
  grid-column: 1 / span 3;
  grid-row: 1;
  background-color: var(--title-bar);
  display: flex;
  align-items: center;
  padding: 0;
  z-index: 10;
  height: 30px;
  -webkit-app-region: drag; /* Für native App-Fenster */
}

.menu-item {
  position: relative;
  padding: 0 8px;
  height: 100%;
  display: flex;
  align-items: center;
  cursor: pointer;
  user-select: none;
  font-size: 12px;
  -webkit-app-region: no-drag; /* Verhindert Drag-Verhalten auf Menüeinträgen */
}

.menu-item:hover {
  background-color: var(--menu-hover);
}

.global-search-container {
  margin-left: auto;
  width: 300px;
  padding: 0 10px;
  -webkit-app-region: no-drag;
}

.global-search-input {
  width: 100%;
  height: 24px;
  background-color: var(--bg);
  color: var(--text-color);
  border: 1px solid var(--border-color);
  border-radius: 3px;
  padding: 0 8px;
  font-size: 12px;
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 160px;
  background-color: var(--sidebar-bg);
  border: 1px solid var(--border-color);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  display: none;
  z-index: 1000;
}

.menu-item:hover .dropdown-menu {
  display: block;
}

.menu-option {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 10px;
  cursor: pointer;
  position: relative;
  font-size: 12px;
}

.menu-option:hover {
  background-color: var(--selection-color);
}

.shortcut {
  margin-left: 20px;
  color: var(--text-secondary);
  font-size: 11px;
  opacity: 0.8;
}

.menu-separator {
  height: 1px;
  background-color: var(--border-color);
  margin: 4px 0;
}

.submenu {
  position: absolute;
  top: 0;
  left: 100%;
  min-width: 150px;
  background-color: var(--sidebar-bg);
  border: 1px solid var(--border-color);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  display: none;
  z-index: 1001;
}

.menu-option:hover .submenu {
  display: block;
}

/* Activity Bar */
.activity-bar {
  grid-column: 1;
  grid-row: 2;
  background-color: var(--activity-bar-bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 8px;
  z-index: 5;
}

.activity-icon {
  width: 48px;
  height: 48px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #858585;
  font-size: 22px;
  cursor: pointer;
  position: relative;
}

.activity-icon.active {
  color: white;
}

.activity-icon.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  width: 2px;
  background-color: white;
}

.activity-icon:hover {
  color: white;
}

.activity-spacer {
  flex-grow: 1;
}

/* Sidebar */
.sidebar {
  grid-column: 2;
  grid-row: 2;
  background-color: var(--sidebar-bg);
  border-right: 1px solid var(--border-color);
  overflow: auto;
}

.panel {
  display: none;
  height: 100%;
  flex-direction: column;
}

.panel.active-panel {
  display: flex;
}

.panel-header {
  padding: 10px;
  font-size: 11px;
  font-weight: bold;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.panel-content {
  padding: 10px;
  flex-grow: 1;
  overflow: auto;
}

.panel-message {
  color: var(--text-secondary);
  font-style: italic;
  padding: 20px 0;
  text-align: center;
}

/* Explorer Panel */
.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.panel-actions {
  display: flex;
}

.action-icon {
  width: 26px;
  height: 26px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  color: var(--text-secondary);
  font-size: 14px;
}

.action-icon:hover {
  color: var(--text-color);
}

.folder-structure {
  margin-top: 10px;
}

.folder, .file {
  padding: 3px;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.folder:hover, .file:hover {
  background-color: var(--hover-color);
}

.folder-name {
  margin-bottom: 2px;
}

.folder-items {
  margin-left: 16px;
}

/* Context Menu */
.context-menu {
  position: absolute;
  background-color: var(--sidebar-bg);
  border: 1px solid var(--border-color);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  min-width: 150px;
  z-index: 1000;
  display: none;
}

.context-menu .menu-option {
  padding: 6px 10px;
}

.context-menu .menu-option i {
  margin-right: 8px;
  width: 16px;
  text-align: center;
}

/* Settings Panel */
.settings-section {
  margin-bottom: 20px;
}

.settings-section h3 {
  font-size: 14px;
  margin-bottom: 10px;
  color: var(--text-color);
}

.setting-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--border-color);
}

.setting-item label {
  flex-grow: 1;
}

.setting-item select, .setting-item input {
  width: 100px;
  background-color: var(--sidebar-bg);
  color: var(--text-color);
  border: 1px solid var(--border-color);
  padding: 4px;
}

/* Search Panel Styles */
.search-tabs {
  display: flex;
  margin-bottom: 10px;
}

.search-tab {
  padding: 4px 10px;
  cursor: pointer;
  font-size: 12px;
  border-bottom: 1px solid transparent;
}

.search-tab.active {
  border-bottom: 1px solid var(--status-bar-bg);
  color: var(--status-bar-bg);
}

.search-box {
  margin-bottom: 10px;
}

.search-input {
  width: 100%;
  padding: 5px 8px;
  background-color: var(--editor-bg);
  color: var(--text-color);
  border: 1px solid var(--border-color);
  font-size: 12px;
}

.search-options {
  display: flex;
  margin-top: 6px;
}

.search-option {
  width: 24px;
  height: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  margin-right: 4px;
  border-radius: 3px;
  color: var(--text-secondary);
}

.search-option:hover {
  background-color: var(--hover-color);
}

.search-option.active {
  color: var(--status-bar-bg);
  background-color: var(--hover-color);
}

.replace-container {
  margin-bottom: 10px;
}

.replace-buttons {
  display: flex;
  margin-top: 6px;
  gap: 6px;
}

.search-filters {
  margin-bottom: 10px;
}

.search-filter {
  margin-bottom: 6px;
}

.search-filter label {
  display: block;
  margin-bottom: 3px;
  font-size: 11px;
  color: var(--text-secondary);
}

.search-filter-input {
  width: 100%;
  padding: 3px 6px;
  background-color: var(--editor-bg);
  color: var(--text-color);
  border: 1px solid var(--border-color);
  font-size: 12px;
}

.search-button-container {
  margin-bottom: 10px;
}

.search-button {
  padding: 3px 10px;
  background-color: var(--status-bar-bg);
  color: var(--status-bar-text);
  border: 1px solid var(--status-bar-bg);
  cursor: pointer;
  border-radius: 2px;
  font-size: 12px;
}

.search-button:hover {
  background-color: #0062a3;
}

.search-results {
  overflow-y: auto;
  max-height: calc(100vh - 400px);
}

.search-no-results {
  padding: 10px;
  font-style: italic;
  color: var(--text-secondary);
  font-size: 12px;
}

.search-file-result {
  margin-bottom: 10px;
}

.search-file-header {
  padding: 5px 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  font-size: 12px;
}

.search-file-header i {
  margin-right: 5px;
}

.search-match-count {
  margin-left: auto;
  color: var(--text-secondary);
  font-size: 11px;
}

.search-file-matches {
  margin-left: 15px;
}

.search-match {
  display: flex;
  padding: 3px 0;
  cursor: pointer;
  font-size: 12px;
}

.search-match:hover {
  background-color: var(--hover-color);
}

.search-match-line-number {
  width: 40px;
  color: var(--text-secondary);
  text-align: right;
  padding-right: 10px;
}

.search-match-content {
  flex-grow: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.search-match-text {
  background-color: rgba(255, 200, 0, 0.3);
  font-weight: bold;
}

/* Editor */
.editor-container {
  grid-column: 3;
  grid-row: 2;
  background-color: var(--editor-bg);
  display: flex;
  flex-direction: column;
}

.tabs {
  display: flex;
  background-color: var(--sidebar-bg);
  border-bottom: 1px solid var(--border-color);
}

.tab {
  padding: 8px 15px;
  background-color: var(--inactive-tab);
  border-right: 1px solid var(--border-color);
  font-size: 13px;
  cursor: pointer;
  display: flex;
  align-items: center;
}

.tab.active {
  background-color: var(--active-tab);
}

.close-tab {
  margin-left: 8px;
  font-size: 10px;
  opacity: 0.7;
}

.close-tab:hover {
  opacity: 1;
}

#monaco-editor {
  flex-grow: 1;
  overflow: hidden;
}

/* Status Bar */
.status-bar {
  grid-column: 1 / span 3;
  grid-row: 3;
  background-color: var(--status-bar-bg);
  color: var(--status-bar-text);
  display: flex;
  align-items: center;
  padding: 0 10px;
  font-size: 12px;
}

/* Dialog Styles */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2000;
}

.modal-dialog {
  background-color: var(--sidebar-bg);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
  width: 400px;
  max-width: 90%;
}

.modal-header {
  padding: 10px 15px;
  border-bottom: 1px solid var(--border-color);
  font-weight: bold;
}

.modal-body {
  padding: 15px;
}

.modal-footer {
  padding: 10px 15px;
  border-top: 1px solid var(--border-color);
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.form-group {
  margin-bottom: 15px;
}

.form-group label {
  display: block;
  margin-bottom: 5px;
}

.form-group input {
  width: 100%;
  padding: 6px 8px;
  background-color: var(--editor-bg);
  color: var(--text-color);
  border: 1px solid var(--border-color);
}

.btn {
  padding: 6px 12px;
  background-color: var(--editor-bg);
  border: 1px solid var(--border-color);
  color: var(--text-color);
  cursor: pointer;
}

.btn-primary {
  background-color: var(--status-bar-bg);
  color: var(--status-bar-text);
  border-color: var(--status-bar-bg);
}

.status-item {
  display: flex;
  align-items: center;
  margin-right: 15px;
}

.status-icon {
  margin-right: 5px;
}