// Gruvbox Dark Theme
$bg: #282828;
$bg-soft: #32302f;
$text: #ebdbb2;
$text-muted: #928374;
$card: #3c3836;
$card-hover: #504945;
$accent: #fe8019;
$accent-yellow: #fabd2f;
$accent-green: #b8bb26;
$accent-red: #fb4934;
$accent-aqua: #8ec07c;

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  background: $bg;
  color: $text;
}

a {
  color: $accent;
  text-decoration: none;
  &:hover {
    text-decoration: underline;
  }
}

// App Shell
.app-shell {
  min-height: 100vh;
  background: $bg;
}

// Header
.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  background: $bg-soft;
  border-bottom: 1px solid $card;
  position: sticky;
  top: 0;
  z-index: 100;
}

.brand {
  font-size: 1.5rem;
  font-weight: 600;
  a {
    color: $text;
    &:hover {
      color: $accent;
      text-decoration: none;
    }
  }
}

.nav-links {
  display: flex;
  gap: 8px;

  a {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 8px;
    color: $text-muted;
    transition: all 0.2s;

    &:hover {
      background: $card;
      color: $text;
      text-decoration: none;
    }

    &.active {
      background: $card;
      color: $accent;
    }
  }
}

.actions {
  display: flex;
  gap: 8px;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: $card;
  border: none;
  color: $text;
  padding: 8px 16px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
  font-size: 0.9rem;

  &:hover {
    background: $card-hover;
  }

  &.btn-primary {
    background: $accent;
    color: $bg;
    font-weight: 500;

    &:hover {
      filter: brightness(1.1);
    }
  }
}

// Home Page
.app-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 20px;
  padding: 24px;
}

.empty-state {
  grid-column: 1 / -1;
  background: $card;
  border-radius: 12px;
  padding: 48px 32px;
  text-align: center;

  p {
    color: $text-muted;
    font-size: 1.1rem;
  }
}

// Debug Page
.debug-page {
  padding: 24px;
  max-width: 1600px;
  margin: 0 auto;

  h2 {
    margin: 0 0 24px 0;
    color: $text;
  }

  .error {
    color: $accent-red;
    background: rgba($accent-red, 0.1);
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 16px;
  }
}

.debug-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;

  h2 {
    margin: 0;
  }
}

.debug-table {
  background: $card;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 24px;

  h3 {
    margin: 0 0 16px 0;
    color: $accent;
    font-size: 1rem;
    font-weight: 600;
  }

  .empty {
    color: $text-muted;
    font-style: italic;
  }

  .table-wrapper {
    overflow-x: auto;
  }

  table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;

    th, td {
      padding: 10px 12px;
      text-align: left;
      border-bottom: 1px solid $bg;
    }

    th {
      background: $bg-soft;
      color: $text-muted;
      font-weight: 500;
      text-transform: uppercase;
      font-size: 0.75rem;
      letter-spacing: 0.5px;
    }

    tr:hover td {
      background: $card-hover;
    }

    td {
      max-width: 200px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
}

.debug-logs {
  background: $card;
  border-radius: 12px;
  padding: 20px;

  h3 {
    margin: 0 0 16px 0;
    color: $accent;
    font-size: 1rem;
    font-weight: 600;
  }

  .empty {
    color: $text-muted;
    font-style: italic;
  }

  .logs-wrapper {
    max-height: 500px;
    overflow-y: auto;
  }

  .log-entry {
    background: $bg;
    padding: 12px;
    margin-bottom: 8px;
    border-radius: 6px;
    font-family: "JetBrains Mono", "Fira Code", monospace;
    font-size: 0.8rem;
    overflow-x: auto;
    border-left: 3px solid $text-muted;

    &.error, &.ERROR {
      border-left-color: $accent-red;
    }

    &.warning, &.WARNING {
      border-left-color: $accent-yellow;
    }

    &.info, &.INFO {
      border-left-color: $accent-aqua;
    }

    &.success, &.SUCCESS {
      border-left-color: $accent-green;
    }
  }
}

// Scrollbar styling
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: $bg;
}

::-webkit-scrollbar-thumb {
  background: $card-hover;
  border-radius: 4px;

  &:hover {
    background: $text-muted;
  }
}
