:root {
  --primary: #2563eb;
  --primary-dark: #1d4ed8;
  --text: #1f2937;
  --muted: #6b7280;
  --border: #e5e7eb;
  --bg: #f9fafb;
  --success: #ecfdf5;
  --success-border: #a7f3d0;
  --success-text: #047857;
  --error: #fef2f2;
  --error-border: #fecaca;
  --error-text: #b91c1c;
  --info: #eff6ff;
  --info-border: #bfdbfe;
  --info-text: #1d4ed8;

  /* Match tricksandtipsforlife.com's brand colors, used by .nav-button
     and the site footer (ported from the main site's style.php) so this
     app's header/footer look consistent with the rest of the site. */
  --link-blue: #2563eb;
  --primary-green: #2a804e;
  --footer-text-muted: #475569;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--text);
  background: var(--bg);
  /* Sticky footer: body is a full-height flex column, main.wrap grows to
     fill any leftover space, so the footer always sits at the bottom of
     the viewport on short pages instead of floating right under the
     content — while still scrolling normally below the fold on long ones. */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }

.topbar {
  background: #fff;
  border-bottom: 1px solid var(--border);
}
.topbar-inner {
  max-width: 1000px;
  margin: 0 auto;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.brand { font-weight: 700; font-size: 18px; color: var(--text); }
.topbar nav { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.topbar nav a { margin-left: 20px; color: var(--muted); font-weight: 500; }
.topbar nav a:hover { color: var(--primary); }

.nav-search { display: inline-flex; }
.nav-search input {
  width: 180px;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 14px;
  font-family: inherit;
}
.nav-search input:focus { border-color: var(--primary); outline: none; }
@media (max-width: 480px) {
  .nav-search input { width: 120px; }
}

.topbar-left { display: flex; align-items: center; gap: 10px; }
.topbar-divider { color: var(--border); }
.nav-button {
  display: inline-block;
  background-color: transparent;
  background: inherit;
  color: var(--link-blue);
  text-decoration: underline;
  padding: 4px 10px;
  margin: 2px;
  font-family: sans-serif;
  font-weight: bold;
  transition: color 0.3s ease;
}
.nav-button:hover { color: var(--primary-green); }

.wrap { max-width: 1000px; margin: 0 auto; padding: 32px 20px 80px; flex: 1 0 auto; }
.wrap-narrow { max-width: 560px; margin: 60px auto; padding: 0 20px; }

.stats-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; margin-bottom: 32px; }
.stats-card { background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 20px; text-align: center; }
.stats-number { font-size: 28px; font-weight: 700; color: var(--text); }
.stats-label { font-size: 13px; color: var(--muted); margin-top: 4px; }

/* Site footer (content comes from the main site's /footer.php include) */
.site-footer {
  flex-shrink: 0;
  text-align: center;
  padding: 1rem .5rem;
  margin-top: 1rem;
  background-color: #fff;
  border-top: 1px solid var(--border);
  color: var(--footer-text-muted);
}
.footer-nav {
  margin-bottom: 1.5rem;
  display: flex;
  justify-content: center;
  gap: 2rem;
  flex-wrap: wrap;
}
.footer-nav a {
  color: var(--link-blue);
  background-color: inherit;
  text-decoration: underline;
  font-size: 0.95rem;
  font-weight: 500;
  transition: color 0.2s;
}
.footer-nav a:hover { color: var(--primary-green); }
.copyright { font-size: 0.85rem; }

h1 { font-size: 24px; margin: 0 0 8px; }
h2 { font-size: 18px; margin: 32px 0 12px; }
.muted { color: var(--muted); }
.small { font-size: 12px; }

.page-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 12px;
}

.card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 24px;
  margin-bottom: 20px;
}

.empty-state { text-align: center; padding: 48px 24px; }

.btn {
  display: inline-block;
  background: var(--primary);
  color: #fff;
  border: none;
  padding: 10px 18px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.btn:hover { background: var(--primary-dark); text-decoration: none; }
.btn-secondary { background: #fff; color: var(--text); border: 1px solid var(--border); }
.btn-secondary:hover { background: #f3f4f6; }

.alert {
  padding: 12px 16px;
  border-radius: 8px;
  border: 1px solid;
  margin-bottom: 16px;
  font-size: 14px;
}
.alert-success { background: var(--success); border-color: var(--success-border); color: var(--success-text); }
.alert-error   { background: var(--error);   border-color: var(--error-border);   color: var(--error-text); }
.alert-info    { background: var(--info);    border-color: var(--info-border);    color: var(--info-text); }

.table { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.table th, .table td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--border); font-size: 14px; vertical-align: top; }
.table th { background: #f3f4f6; color: var(--muted); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .03em; }
.table tr:last-child td { border-bottom: none; }
.table .truncate { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.table .actions a { margin-right: 12px; font-size: 13px; }
.table .actions .danger { color: var(--error-text); }

.badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; text-transform: capitalize; }
.badge-running { background: #fef3c7; color: #92400e; }
.badge-completed { background: var(--success); color: var(--success-text); }
.badge-stopped { background: #f3f4f6; color: var(--muted); }
.badge-error { background: var(--error); color: var(--error-text); }

form.card label { display: block; margin-bottom: 16px; font-weight: 600; font-size: 14px; }
form.card input[type="text"],
form.card input[type="url"],
form.card input[type="password"],
form.card input[type="number"],
form.card textarea,
form.card select {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  font-weight: normal;
}
form.card textarea { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; resize: vertical; }
.form-grid .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.hint { display: block; font-weight: normal; color: var(--muted); font-size: 12px; margin-top: 4px; }
.form-actions { display: flex; gap: 10px; margin-top: 8px; }

.site-summary { display: grid; grid-template-columns: 140px 1fr; row-gap: 8px; margin: 0 0 20px; font-size: 14px; }
.site-summary dt { color: var(--muted); font-weight: 600; }
.site-summary dd { margin: 0; }

.progress-bar { background: #f3f4f6; border-radius: 999px; height: 10px; overflow: hidden; margin: 16px 0 8px; }
.progress-fill { background: var(--primary); height: 100%; width: 0; transition: width .3s ease; }
.crawl-log { list-style: none; margin: 16px 0 0; padding: 0; max-height: 260px; overflow-y: auto; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; }
.crawl-log li { padding: 4px 0; border-bottom: 1px solid var(--border); word-break: break-all; }

.search-page { max-width: 720px; margin: 0 auto; text-align: center; }
.search-page h1 { margin: 40px 0 20px; }
.search-form { display: flex; gap: 8px; margin-bottom: 24px; }
.search-form input[type="text"] {
  flex: 1;
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 15px;
}
.search-form select { padding: 12px; border: 1px solid var(--border); border-radius: 8px; font-size: 14px; }

.results { text-align: left; }
.result { padding: 18px 0; border-bottom: 1px solid var(--border); }
.result-title { font-size: 17px; font-weight: 600; }
.result-url { color: #059669; font-size: 13px; margin: 2px 0 6px; }
.result-snippet { margin: 0; color: var(--text); font-size: 14px; line-height: 1.5; }

.pagination { display: flex; gap: 8px; justify-content: center; align-items: center; margin-top: 24px; flex-wrap: wrap; }
.pagination a { padding: 6px 12px; border: 1px solid var(--border); border-radius: 6px; }
.pagination a.active { background: var(--primary); color: #fff; border-color: var(--primary); }
.pagination-ellipsis { padding: 6px 4px; color: var(--muted); }