/* Custom styles for Lighthouse Scraper */

/* GitHub-inspired color palette */
:root {
  /* GitHub header colors */
  --github-header-bg: #24292f;
  --github-header-text: #ffffff;
  --github-header-hover: #f6f8fa;

  /* GitHub table colors */
  --github-table-header-bg: #f6f8fa;
  --github-table-header-border: #d0d7de;
  --github-table-row-bg: #ffffff;
  --github-table-row-border: #d0d7de;
  --github-table-hover-bg: #f6f8fa;

  /* GitHub text colors */
  --github-text-primary: #24292f;
  --github-text-secondary: #656d76;
  --github-text-muted: #8c959f;

  /* GitHub accent colors */
  --github-accent: #0969da;
  --github-accent-hover: #1a7f37;
  --github-success: #1a7f37;
  --github-danger: #cf222e;
  --github-warning: #9a6700;

  /* Body background */
  --bs-body-bg: #ffffff;
}

/* Update global body bg to use GitHub's clean white */
body {
  background-color: var(--bs-body-bg);
  color: var(--github-text-primary);
}

/* GitHub-style navbar */
.navbar {
  background-color: var(--github-table-header-bg) !important;
  border-bottom: 1px solid var(--github-table-row-border);
}

.navbar-brand {
  font-weight: 600;
  color: var(--github-text-primary) !important;
}

.navbar-nav .nav-link {
  color: var(--github-text-primary) !important;
  font-weight: 500;
}

.navbar-nav .nav-link:hover {
  color: var(--github-text-secondary) !important;
}

.navbar-toggler {
  border-color: var(--github-table-row-border);
}

.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 255, 0.75)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* GitHub-style cards */
.card {
  border: 1px solid var(--github-table-row-border);
  border-radius: 6px;
  background-color: var(--github-table-row-bg);
  transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.card:hover {
  border-color: var(--github-table-row-border);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}

.card-header {
  background-color: var(--github-table-header-bg);
  border-bottom: 1px solid var(--github-table-header-border);
  border-radius: 6px 6px 0 0 !important;
  font-weight: 600;
  color: var(--github-text-primary);
}

/* GitHub-style tables */
.table {
  margin-bottom: 0;
  background-color: var(--github-table-row-bg);
}

.table th {
  background-color: var(--github-table-header-bg);
  border-bottom: 1px solid var(--github-table-header-border);
  border-top: none;
  font-weight: 600;
  color: var(--github-text-primary);
  padding: 12px 16px;
}

.table td {
  border-bottom: 1px solid var(--github-table-row-border);
  padding: 12px 16px;
  color: var(--github-text-primary);
}

.table tbody tr:hover {
  background-color: var(--github-table-hover-bg);
}

.table-striped tbody tr:nth-of-type(odd) {
  background-color: var(--github-table-row-bg);
}

.table-striped tbody tr:nth-of-type(even) {
  background-color: var(--github-table-header-bg);
}

/* Tabulator GitHub styling */
.tabulator {
  border: 1px solid var(--github-table-row-border);
  border-radius: 6px;
  background-color: var(--github-table-row-bg);
}

.tabulator .tabulator-header {
  background-color: var(--github-table-header-bg);
  border-bottom: 1px solid var(--github-table-header-border);
}

.tabulator .tabulator-header .tabulator-col {
  border-right: 1px solid var(--github-table-header-border);
  background-color: var(--github-table-header-bg);
}

.tabulator .tabulator-header .tabulator-col .tabulator-col-content {
  color: var(--github-text-primary);
  font-weight: 600;
}

.tabulator .tabulator-row {
  border-bottom: 1px solid var(--github-table-row-border);
}

.tabulator .tabulator-row:hover {
  background-color: var(--github-table-hover-bg);
}

.tabulator .tabulator-cell {
  border-right: 1px solid var(--github-table-row-border);
  color: var(--github-text-primary);
}

/* GitHub-style buttons */
.btn-primary {
  background-color: var(--github-accent);
  border-color: var(--github-accent);
  color: white;
}

.btn-primary:hover {
  background-color: #0858b9;
  border-color: #0858b9;
  color: white;
}

.btn-success {
  background-color: var(--github-success);
  border-color: var(--github-success);
}

.btn-danger {
  background-color: var(--github-danger);
  border-color: var(--github-danger);
}

.btn-warning {
  background-color: var(--github-warning);
  border-color: var(--github-warning);
  color: white;
}

/* GitHub-style form controls */
.form-control {
  border: 1px solid var(--github-table-row-border);
  border-radius: 6px;
  color: var(--github-text-primary);
}

.form-control:focus {
  border-color: var(--github-accent);
  box-shadow: 0 0 0 3px rgba(9, 105, 218, 0.1);
}

.form-select {
  border: 1px solid var(--github-table-row-border);
  border-radius: 6px;
  color: var(--github-text-primary);
}

/* GitHub-style badges */
.badge.bg-success {
  background-color: var(--github-success) !important;
}

.badge.bg-danger {
  background-color: var(--github-danger) !important;
}

.badge.bg-warning {
  background-color: var(--github-warning) !important;
  color: white !important;
}

/* GitHub-style modals */
.modal-content {
  border: 1px solid var(--github-table-row-border);
  border-radius: 6px;
  background-color: var(--github-table-row-bg);
}

.modal-header {
  border-bottom: 1px solid var(--github-table-header-border);
  background-color: var(--github-table-header-bg);
  border-radius: 6px 6px 0 0;
}

.modal-footer {
  border-top: 1px solid var(--github-table-header-border);
  background-color: var(--github-table-header-bg);
  border-radius: 0 0 6px 6px;
}

/* GitHub-style alerts */
.alert {
  border: 1px solid var(--github-table-row-border);
  border-radius: 6px;
  background-color: var(--github-table-row-bg);
}

.alert-primary {
  border-left: 4px solid var(--github-accent);
}

.alert-success {
  border-left: 4px solid var(--github-success);
}

.alert-danger {
  border-left: 4px solid var(--github-danger);
}

.alert-warning {
  border-left: 4px solid var(--github-warning);
}

/* GitHub-style list groups */
.list-group-item {
  border: 1px solid var(--github-table-row-border);
  background-color: var(--github-table-row-bg);
  color: var(--github-text-primary);
}

.list-group-item:hover {
  background-color: var(--github-table-hover-bg);
}

/* GitHub-style code blocks */
pre {
  background-color: var(--github-table-header-bg);
  border: 1px solid var(--github-table-row-border);
  border-radius: 6px;
  color: var(--github-text-primary);
}

code {
  background-color: var(--github-table-header-bg);
  color: var(--github-accent);
  border: 1px solid var(--github-table-row-border);
  border-radius: 3px;
  padding: 0.2em 0.4em;
}

/* GitHub-style footer */
footer {
  background-color: var(--github-table-header-bg) !important;
  border-top: 1px solid var(--github-table-header-border);
  color: var(--github-text-secondary);
}

/* Keep existing responsive adjustments */
@media (max-width: 768px) {
  .card-body {
    padding: 1rem;
  }

  .table-responsive {
    font-size: 0.875em;
  }

  .btn {
    font-size: 0.875em;
  }
}

/* GitHub-style scrollbar */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: var(--github-table-header-bg);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb {
  background: var(--github-table-row-border);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--github-text-muted);
}

/* Keep existing animations and other styles */
.spinner-border {
  width: 1.5rem;
  height: 1.5rem;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in {
  animation: fadeIn 0.3s ease-in-out;
}

.tooltip {
  font-size: 0.875em;
}

.badge.bg-warning {
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
  100% {
    opacity: 1;
  }
}

/* Tabulator layout tweaks */
.tabulator .tabulator-header .tabulator-col .tabulator-header-label {
  white-space: nowrap;
}

.tabulator {
  max-width: 100%;
}

.card-body > .tabulator,
.card-body > #pricesTable {
  overflow-x: auto;
}

/* Override Bootstrap utility classes with GitHub palette */
.bg-primary {
  background-color: var(--github-header-bg) !important;
}

.btn-success {
  background-color: var(--github-accent) !important;
  border-color: var(--github-accent) !important;
  color: #ffffff !important;
}

.btn-success:hover {
  background-color: #0858b9 !important;
  border-color: #0858b9 !important;
}

/* Global tabs: use neutral text color instead of Bootstrap blue */
.nav-tabs .nav-link,
.nav-pills .nav-link {
  color: var(--github-text-primary) !important;
}

.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link,
.nav-pills .nav-link.active {
  color: var(--github-text-primary) !important;
}

/* ------------------------------------------------------------------ */
/* GitHub light-grey header & neutral buttons overrides               */
/* ------------------------------------------------------------------ */

/* Navigation header should be the light grey (#f6f8fa) used across GitHub */
.bg-primary {
  background-color: var(--github-table-header-bg) !important; /* #f6f8fa */
  border-bottom: 1px solid var(--github-table-row-border) !important; /* #d0d7de */
}

/* Neutral GitHub-style buttons (light grey background, darker border) */
.btn,
.btn-primary,
.btn-success,
.btn-secondary {
  background-color: var(--github-table-header-bg) !important; /* #f6f8fa */
  border: 1px solid var(--github-table-row-border) !important; /* #d0d7de */
  color: var(--github-text-primary) !important; /* #24292f */
}

.btn:hover,
.btn-primary:hover,
.btn-success:hover,
.btn-secondary:hover {
  background-color: var(
    --github-table-hover-bg
  ) !important; /* #f6f8fa (same shade, but defined separately for clarity) */
  border-color: var(
    --github-text-muted
  ) !important; /* slightly darker on hover */
  color: var(--github-text-primary) !important;
}

/* ------------------------------------------------------------------ */
/* Remove residual blue highlight on table hover / selection          */
/* ------------------------------------------------------------------ */

/* Bootstrap .table-hover override */
.table-hover > tbody > tr:hover,
.table-hover tbody tr:hover {
  background-color: var(--github-table-hover-bg) !important; /* #f6f8fa */
}

/* Tabulator hover & selected rows override */
.tabulator .tabulator-row:hover,
.tabulator .tabulator-row.tabulator-selected {
  background-color: var(--github-table-hover-bg) !important; /* #f6f8fa */
}

/* ---------------------------------------------- */
/* Layout utilities                               */
/* Ensure the main content stretches to fill the  */
/* viewport height so the footer sits at bottom.  */
/* ---------------------------------------------- */
html,
body {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
}

main.container {
  flex: 1 0 auto; /* allow main to expand */
}

footer {
  flex-shrink: 0; /* keep footer height fixed */
}

/* -------------------------------------------------- */
/* Final override: ensure navbar remains light grey    */
/* even when Bootstrap applies both .navbar & .bg-primary */
/* -------------------------------------------------- */
.navbar.bg-primary,
.navbar-dark.bg-primary {
  background-color: var(--github-table-header-bg) !important;
  border-bottom: 1px solid var(--github-table-row-border) !important;
}

.navbar.bg-primary .navbar-brand,
.navbar.bg-primary .navbar-nav .nav-link {
  color: var(--github-text-primary) !important;
}

/* Watchtower branding: Inter font + action accent */
.navbar-brand,
.navbar-brand .brand-text {
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Helvetica,
    Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
}

:root {
  --watchtower-text-dark: #33393d; /* Dark Gray */
  --watchtower-action: #1362e2; /* Action Blue */
}

.navbar-brand .brand-text {
  color: var(--watchtower-text-dark) !important;
  font-weight: 600;
}

.navbar-brand .brand-accent {
  color: var(--watchtower-action) !important;
  font-weight: 700;
}