/* --- Global Styles --- */
html { overflow-y: scroll; }

body {
    background-color: #fef6e1;
    font-family: 'Poppins', sans-serif;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
}

.wrapper {
    width: 90%;
    text-align: center;
    padding: 5px 20px 20px 20px;
    box-sizing: border-box;
}

/* --- Header --- */
header img {
  max-width: 250px; /* slightly smaller for desktop */
  height: auto;
}

/* --- Navigation (retro button-style) --- */
nav {
  margin-top: 15px;
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* Base button look */
nav a {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  /* button sizing */
  padding: 10px 16px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;

  /* retro palette */
  color: #9d000e;                 /* diner red text */
  background: linear-gradient(180deg, #ffffff, #fffaf0);

  /* "desktop icon / button" look */
  border: 2px solid #9d000e;      /* red outline */
  border-radius: 10px;
  text-decoration: none;

  /* raised effect */
  box-shadow: 3px 3px 0 #000d38;  /* your deep navy as the shadow */
  transition: transform 0.12s ease, filter 0.12s ease, background 0.2s ease;
}

/* Hover: slight lift + teal hint */
nav a:hover {
  filter: brightness(1.02);
  transform: translateY(-1px);
  background: linear-gradient(180deg, #ffffff, #f3fffe);
  border-color: #008080;          /* teal border on hover */
  color: #008080;                 /* teal text on hover */
}

/* Active: press down like a real button */
nav a:active {
  transform: translateY(1px);
  box-shadow: 1px 1px 0 #000d38;
}

/* Keyboard focus accessibility */
nav a:focus-visible {
  outline: 3px solid rgba(0, 128, 128, 0.35);
  outline-offset: 3px;
}

/* --- CTA Button (high-CTR) --- */
nav a.nav-cta {
  color: #000d38; /* deep navy text */
  background: linear-gradient(180deg, #fff3c4, #ffd966);
  border-color: #c89b00;

  box-shadow: 3px 3px 0 #008080; /* teal shadow for contrast */
  font-weight: 700;
}

/* Hover: extra pop */
nav a.nav-cta:hover {
  background: linear-gradient(180deg, #fff7d8, #ffdf7a);
  color: #008080;
  border-color: #008080;
}

/* Active press */
nav a.nav-cta:active {
  transform: translateY(1px);
  box-shadow: 1px 1px 0 #008080;
}

@media (max-width: 768px) {
  nav a.nav-cta {
    flex-basis: 100%;
    justify-content: center;
    margin-top: 6px;
  }
}

@media (max-width: 768px) {
  nav {
    gap: 10px;
  }
  nav a {
    padding: 10px 14px;
    font-size: 15px;
  }
}

/* --- Main content --- */
main {
    background: white;
	width: 98%;
    margin-top: 15px;
    padding: 10px 0 40px;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    text-align: left;
}

main h1 {
    color: #9d000e;
    font-size: 22px;
	padding: 0 20px;
	overflow-wrap: anywhere;
	word-break: break-word;
}

main h2 {
    color: #9d000e;
    font-size: 20px;
    padding: 0 20px;
	overflow-wrap: anywhere;
	word-break: break-word;
}

main h3 {
    color: #000;
    font-size: 18px;
    padding: 0 20px;
	overflow-wrap: anywhere;
	word-break: break-word;
}

main p {
    color: #333;
    line-height: 1.6;
	padding: 20px 20px;
}

main a {
  text-decoration: underline;
  color: #008080; /* teal color */
  transition: color 0.2s ease;
}

main a:hover {
  color: #004d4d; /* darker teal on hover */
  text-decoration: none; /* optional, can keep underline if you prefer */
}

.nice-div {
    color: #333;
    line-height: 1.6;
    padding: 10px 20px;
}

/* --- Table Styles --- */
.table-container {
    display: flex;
    flex-direction: column;
    border: 2px solid #000;
    width: 95%;               
    box-sizing: border-box;   
    margin: 0 auto;           
    background-color: #fff;
    box-shadow: 4px 4px 0 #888;
}

.row {
    display: flex;
    flex-wrap: wrap;
    border-bottom: 1px solid #000;
    padding: 4px 8px;
}

.row.header {
    font-weight: bold;
    background-color: #008080;
    color: #fff;
    border-bottom: 2px solid #000;
}

/* Adjust column widths */
.cell {
    padding: 4px 8px;
    border-right: 1px solid #000;
    white-space: normal;
    word-break: break-word;
    overflow: visible;   
    text-overflow: initial;
    max-width: 100%;
    min-width: 0;
}

/* Apply scroll for long content */
.cell.hostname {
    flex: 2;
    max-height: 120px;        /* max height for content */
    overflow-y: auto;         /* vertical scrollbar if content exceeds max height */
    padding-right: 4px;       /* small padding so scrollbar doesn't cover text */
	
    /* vertical centering */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Other flex sizes */
.cell.bot-name { flex: 1; }
.cell.ip { flex: 1; }
.cell.user-agent { flex: 3; }
.cell.count { flex: 1; }

.cell:last-child {
    border-right: none;
}

.row:nth-child(even):not(.header) {
    background-color: #e0e0e0;
}

.row:nth-child(odd):not(.header) {
    background-color: #f0f0f0;
}

/* Vertical centering for name + IP + hostname */
.cell.bot-name,
.cell.ip,
.cell.hostname {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.visited-time {
    font-size: 0.85em;
    color: #444;
    font-style: italic;
}

/* --- Pagination --- */
.pagination {
    text-align: center;
    margin: 50px auto;
}

.pagination a {
    margin: 0 6px;
    padding: 10px 16px;
    background: #008080;
    color: #ffffff;
    text-decoration: none;
    border-radius: 6px;
    font-size: 16px;
    line-height: 1.2;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.pagination a:hover {
    background: #004f4f;
    color: #eaffff;
}

.pagination a.active {
    background: #000;
    color: #ffffff;
}

/* Expand-on-click behavior */
.cell.expandable {
    cursor: pointer;
    transition: all 0.2s ease;
}
.cell.expandable.open {
    white-space: normal;
    overflow: visible;
    background-color: #fff6b3;
}

.row.header a {
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    display: inline-block;
}

.row.header a:hover {
    text-decoration: underline;
}

/* --- Bot Counter Styling --- */
.bot-count-wrapper {
    text-align: center; /* centers the inline-block element inside */
    margin-bottom: 15px;
}

.bot-count {
    display: inline-block;
    font-family: 'Courier New', Courier, monospace;
    font-size: 14px;
    font-weight: bold;
    color: #008080; /* match main accent color */
    background-color: #f0f0f0; /* soft light background to match table rows */
    padding: 12px 25px;
    border: 2px solid #008080; /* teal border to match theme */
    border-radius: 6px;
    box-shadow: 2px 2px 0 #888; /* subtle shadow to mimic table style */
}

.bot-count-number {
    font-size: 18px;
    text-decoration: underline;
}

/* --- Form Styling --- */
.bot-search-form {
    margin: 20px 0;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
}

.bot-search-form .form-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Style the selects, input, and button */
.bot-search-form select,
.bot-search-form input[type="text"],
.bot-search-form button {
    padding: 8px 10px;
    font-size: 16px;
    min-width: 150px;
    width: 200px; /* uniform width for desktop */
    box-sizing: border-box;
}

.bot-search-form button {
    background-color: #008080;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.bot-search-form .clear-link {
    margin-left: 10px;
    color: #9d000e;
    text-decoration: underline;
}

/* Main area images */
.responsive-image {
    display: block;
    margin: 0 auto;
    width: 100%;
    max-width: 350px;
    height: auto;
  }
  
     .retro-footer-inner {
      display: inline-block;
      background: #fffef7;
      border: 2px dashed #6c757d;
      border-radius: 15px;
      padding: 2rem 2rem; /* top/bottom 2rem, left/right 2rem */
      margin: 2rem 0;     /* top/bottom 2rem, left/right 0 */
      box-shadow: 3px 3px 0 #ccc;
      text-align: center; /* center all content */
    }

.retro-footer .footer-links {
  margin: 0.25rem 0;   /* smaller top/bottom margin */
  padding: 0.10rem 0; /* smaller top/bottom padding */
  display: inline-block;
}

    .retro-footer .footer-links a {
      text-decoration: underline;
      color: #008080; /* teal color */
      margin: 0 0.5rem; /* spacing between links */
      transition: color 0.2s ease;
    }

    .retro-footer .footer-links a:hover {
      color: #004d4d; /* darker teal on hover */
      text-decoration: none;
    }

    .retro-footer .copyright {
      color: #555;
      margin-top: 1.5rem;
    }

.retro-footer .copyright a {
  text-decoration: underline;
  color: #008080; /* teal color */
  transition: color 0.2s ease;
}

.retro-footer .copyright a:hover {
  color: #004d4d; /* darker teal on hover */
  text-decoration: none;
}

.top-bots-container {
    width: 80%;
    margin: 40px auto 10px auto; /* top 40px, bottom 10px */
    text-align: center;
}

.top-bots-horizontal {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;         /* allow wrapping */
    align-items: center;     /* vertically align label and links */
    gap: 10px;
    justify-content: center; /* center items on each line */
}

.top-bots-horizontal li {
    margin: 0;
    flex: 1 1 auto;    /* grow and shrink naturally */
    min-width: 120px;  /* prevents links from shrinking too small */
}


.top-bots-horizontal li a {
    text-decoration: none;
    background-color: #008080;
    color: #fff;
    padding: 5px 10px;
    border-radius: 4px;
    transition: background-color 0.2s ease;
    font-family: Arial, sans-serif;
    font-weight: normal;
    white-space: nowrap;     /* keep link text on one line */
}

.top-bots-horizontal li a:hover {
    background-color: #004d4d;
}

.top-bots-horizontal .top-bots-label {
    font-weight: bold;
    font-size: 1.5em;
    font-family: 'Courier New', monospace; /* 50's retro font */
    color: #000d38;
    margin-right: 10px;
    flex: 0 0 auto;          /* label doesn't shrink */
}

/* Main search bar */

.ai-search-section {
  margin: 30px 0; /* top & bottom */
}

.ai-search {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 18px 0 10px;
}

.ai-search-shell {
  width: min(900px, 96%);
  display: flex;
  align-items: center;
  gap: 10px;

  background: linear-gradient(180deg, #ffffff, #fffaf0);
  border: 2px solid rgba(0, 128, 128, 0.55);
  border-radius: 999px;
  padding: 10px 10px;

  box-shadow:
    0 10px 24px rgba(0,0,0,0.08),
    0 0 0 4px rgba(0, 128, 128, 0.08);
  position: relative;
}

.ai-search-shell:focus-within {
  border-color: rgba(0, 128, 128, 0.9);
  box-shadow:
    0 12px 30px rgba(0,0,0,0.12),
    0 0 0 5px rgba(0, 128, 128, 0.18);
}

/* Dropdown */
.ai-search-select {
  border: 2px solid rgba(0,0,0,0.15);
  background: #f0f0f0;
  border-radius: 999px;
  padding: 10px 12px;
  font-size: 15px;
  font-family: 'Poppins', sans-serif;
  color: #222;
  outline: none;
  flex: 0 0 auto;
}

.ai-search-select:focus {
  border-color: rgba(0, 128, 128, 0.9);
}

/* Input */
.ai-search-input {
  border: none;
  outline: none;
  background: transparent;
  font-size: 16px;
  font-family: 'Poppins', sans-serif;
  color: #111;
  padding: 10px 8px;
  width: 100%;
  min-width: 120px;
}

.ai-search-input::placeholder {
  color: #666;
}

/* Button */
.ai-search-btn {
  border: none;
  cursor: pointer;
  background: linear-gradient(180deg, #008080, #006b6b);
  color: #fff;
  border-radius: 999px;
  padding: 10px 14px;
  font-size: 16px;
  font-family: 'Poppins', sans-serif;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;

  box-shadow: 2px 2px 0 #888;
  transition: transform 0.12s ease, filter 0.12s ease;
}

.ai-search-btn:hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
}

.ai-search-btn:active {
  transform: translateY(0);
}

.ai-search-btn-icon {
  font-family: 'Courier New', Courier, monospace;
  font-weight: bold;
}

.ai-search-hint {
  width: min(900px, 96%);
  margin-top: 8px;
  font-size: 13px;
  color: #444;
  text-align: center;
  opacity: 0.95;
}

/* Mobile: stack nicely */
@media (max-width: 768px) {
  .ai-search-shell {
    flex-wrap: wrap;
    border-radius: 18px;
    padding: 10px;
  }
  
  .ai-search-select {
    width: 100%;
  }

  .ai-search-input {
    width: 100%;
    padding: 12px 10px;
  }

  .ai-search-btn {
    width: 100%;
    justify-content: center;
  }

  .ai-search-hint {
    text-align: center;
  }
}

    @media (max-width: 600px) {
      .retro-footer-inner {
        padding: 1rem;
        width: 90%;
      }
    }

  /* When the screen width is 768px or less (typical mobile) */
  @media (max-width: 768px) {
    .responsive-image {
      width: 70%;
    }
  }

/* --- Mobile adjustments --- */
@media (max-width: 768px) {
    .bot-search-form {
        flex-direction: column;
        align-items: center;
    }
    .bot-search-form .form-row {
        flex-direction: column;
        width: 100%;
        align-items: center;
    }
    .bot-search-form select,
    .bot-search-form input[type="text"],
    .bot-search-form button {
        width: 90%;
        max-width: 300px;
    }
}

/* --- Responsive Table (Mobile) --- */
@media (max-width: 768px) {

    /* Hide Hostname and User-Agent */
    .cell.hostname,
    .cell.user-agent {
        display: none;
    }

    /* Header version */
    .row.header .cell.hostname,
    .row.header .cell.user-agent {
        display: none;
    }

    /* Rebalance visible columns */
    .cell.bot-name { flex: 1.5; }
    .cell.ip { flex: 2; }

    /* Remove the right border on IP (now last column) */
    .cell.ip {
        border-right: none;
    }
}


/* --- Mobile Adjustments for Bot Counter --- */
@media (max-width: 768px) {
    .bot-count {
        padding-left: 15px;
        padding-right: 15px;
        max-width: 95%; /* prevent stretching edge-to-edge */
        box-sizing: border-box; /* ensures padding doesn’t overflow */
    }
}

@media (max-width: 768px) {
    /* Remove the right border (|) on hostname for mobile */
    .cell.ip {
        border-right: none;
    }
}

/* --- Mobile adjustment --- */
@media (max-width: 768px) {
  header img {
    max-width: 180px; /* smaller logo on tablets/phones */
  }
}

@media (max-width: 480px) {
  header img {
    max-width: 150px; /* even smaller for small phones */
  }
}

@media (max-width: 768px) {
    main p {
        padding: 20px 20px;
    }
}

@media (max-width: 768px) {

  /* give yourself full width on mobile */
  .top-bots-container {
    width: 100% !important;
  }

  /* keep the inline-block flow */
  .top-bots-horizontal {
    display: block !important;
    text-align: center !important;
  }

  /* put the "Top Bots:" label on its own line */
  .top-bots-horizontal > li.top-bots-label {
    display: block !important;
    width: 100% !important;
    margin: 0 0 10px 0 !important;
    font-size: 1.2em !important; /* slightly smaller for mobile */
  }

  /* buttons flow side-by-side when they fit */
  .top-bots-horizontal > li:not(.top-bots-label) {
    display: inline-block !important;
    width: auto !important;
    margin: 4px 4px !important;
    vertical-align: middle;
  }

  /* tighten button size so 2 can fit more often */
  .top-bots-horizontal > li > a {
    display: inline-block !important;
    width: auto !important;
    font-size: 14px !important;
    padding: 4px 8px !important;
    white-space: nowrap !important;
  }
}