/* Import theme configuration */
@import './styles/variables';
@import './styles/theme';

html,
body,
#root {
  width: 100%;
  height: 100%;
  margin: 0;
}

body {
  display: block;
  background-color: var(--app-bg);
  color: var(--app-text);
}

#root {
  max-width: none;
  padding: 0;
  text-align: initial;
  background-color: var(--app-bg);
  color: var(--app-text);
}

a {
  color: var(--app-accent);
}

a:hover {
  color: #bfd2ff;
}

.full-view {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
}

.split-root {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  display: flex;
}

.split-pane {
  min-width: 0;
  min-height: 0;
  overflow: auto;
  color: var(--app-text);
}

.horizontal-split {
  .split-pane {
    width: 100%;
  }

  .split-pane-primary,
  .split-pane-secondary {
    flex: 1 1 0;
  }

  .split-gutter {
    height: var(--layout-gutter);
    flex: 0 0 var(--layout-gutter);
    width: 100%;
  }
}

.vertical-split {
  flex-direction: row;

  .split-gutter {
    width: var(--layout-gutter);
    flex: 0 0 var(--layout-gutter);
  }
}

.vertical-split-1-1 {
  .split-pane-primary,
  .split-pane-secondary {
    flex: 1 1 0;
  }
}

.vertical-split-3-1 {
  .split-pane-primary {
    flex: 3 1 0;
  }

  .split-pane-secondary {
    flex: 1 1 0;
  }
}

.vertical-split-2-1 {
  .split-pane-primary {
    flex: 2 1 0;
  }

  .split-pane-secondary {
    flex: 1 1 0;
  }
}

.vertical-split-25-70 {
  .split-pane-primary {
    flex: 25 1 0;
  }

  .split-pane-secondary {
    flex: 70 1 0;
  }
}

/* List Group Styles */
.list-item {
  padding: 0.75rem;
  border-bottom: 1px solid rgba(173, 205, 255, 0.15);
  cursor: pointer;
  transition: background 0.15s ease, border-left 0.15s ease, padding-left 0.15s ease;
  background: rgba(11, 39, 82, 0.6);
  color: var(--app-text);

  &:hover {
    background: rgba(20, 60, 120, 0.85);
    border-bottom-color: rgba(173, 205, 255, 0.25);
  }

  &.is-selected {
    background: rgba(30, 90, 160, 0.75);
    border-left: 4px solid rgba(142, 180, 255, 0.95);
    padding-left: calc(0.75rem - 4px);
  }

  &:last-child {
    border-bottom: none;
  }
}

.list-item-title {
  font-weight: 600;
  color: var(--app-text);
  margin-bottom: 0.25rem;
}

.list-item-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--app-text-muted);
}
