/* ============================================================
   STYLES (Unified with Scanner Plugin Design)
   ============================================================ */

/* Unified font style for the entire document */
body, label { font-family: Arial, sans-serif; font-size: 14px; }

/* Page header */
#header { margin-top: 20px; margin-left: 0; margin-bottom: 0; font-size: 24px; }

/* Container for the search and refresh controls */
#controls {
  display: flex; flex-wrap: wrap; justify-content: space-between;
  align-items: center; margin-bottom: 10px; width: 100%; box-sizing: border-box;
}

/* Flexible area for the search input */
#searchContainer {
  flex: 1; display: flex; flex-direction: column;
  align-items: flex-start; margin-bottom: 5px;
}

/* Styling for the search input */
#searchInput {
  padding: 5px; width: 100%; max-width: 300px; min-width: 100px;
  box-sizing: border-box; margin-bottom: 5px; margin-right: 10px;
}

/* Container for the distance filter checkboxes/inputs */
#filterContainer { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 5px; align-items: center; }

/* Container for the buttons */
#buttonContainer { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }

/* Styling for the buttons */
.button, #darkModeButton, #clipboardButton, #downloadTableBtn, #downloadCsvBtn {
  padding: 10px 20px; border: none; border-radius: 5px;
  cursor: pointer; color: white;
}

#darkModeButton { background-color: #6c757d; }
#darkModeButton:hover { background-color: #5a6268; }
#clipboardButton, #downloadTableBtn, #downloadCsvBtn { background-color: #007bff; }
#clipboardButton:hover, #downloadTableBtn:hover, #downloadCsvBtn:hover { background-color: #0056b3; }

/* Dark mode styling */
body.dark-mode { background-color: #121212; color: white; }
body.dark-mode table { color: white; }
body.dark-mode th { background-color: #1f1f1f; }
body.dark-mode td { border-color: #333; }
body.dark-mode a { color: #d6a8f5; }
body.dark-mode a:hover { color: #b57edc; }
body.dark-mode #searchInput, body.dark-mode #fmlistOmIdInput { background-color: #6c757d; color: white; border: 1px solid #333; }
body.dark-mode #searchInput::placeholder, body.dark-mode #fmlistOmIdInput::placeholder { color: white; }
body.dark-mode #afCheckBtn, body.dark-mode #idCheckBtn { color: white; }
body.dark-mode #minDistInput, body.dark-mode #maxDistInput, body.dark-mode #piCodesInput { background-color: #6c757d; color: white; border: 1px solid #333; }
body.dark-mode #minDistInput::placeholder, body.dark-mode #maxDistInput::placeholder, body.dark-mode #piCodesInput::placeholder { color: white; }

/* Table headers – clickable & resizable */
th {
  cursor: pointer; background-color: #f2f2f2; position: relative;
  padding-right: 8px; white-space: nowrap;
}

/* Cell text styling */
td { white-space: nowrap; }

/* Column resizer handle */
.resizer {
  position: absolute; right: 0; top: 0; width: 5px; height: 100%;
  cursor: col-resize; user-select: none; background-color: transparent;
}
.resizer:hover { background-color: #ccc; }

/* Table layout (Auto layout for cleaner data presentation) */
table { width: 100%; border-collapse: collapse; table-layout: auto; }
th, td { padding: 3px; text-align: left; }

/* Dynamic zebra striping class (applied via JS to handle hidden rows) */
tr.zebra { background-color: #e6e6e6; }
body.dark-mode tr.zebra { background-color: #1f1f1f; }

/* Upload container */
#uploadContainer { margin-top: 10px; }

/* Italic detail rows (AF / RT) - Allow wrapping so they do not stretch the table infinitely */
.detailRowAF td, .detailRowRT td { font-style: italic; white-space: normal; }

/* Toast notification */
.toast {
  position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
  color: #fff; padding: 10px 20px; border-radius: 5px; z-index: 1000; font-size: 14px;
}

/* Download button area – hidden until data is loaded */
#downloadContainer { margin-top: 10px; text-align: center; display: none; }

/* ---- AF-Check column ---- */
.af-check-cell   { font-size: 12px; white-space: nowrap; }
.af-check-good   { color: #28a745; font-weight: bold; }
.af-check-medium { color: #fd7e14; font-weight: bold; }
.af-check-bad    { color: #dc3545; font-weight: bold; }
/* AF-Check header and cells hidden until feature is enabled */
th.af-hidden, td.af-hidden { display: none !important; }

/* ============================================================
   Highpoint's Webtools Panel Styles
   ============================================================ */
:root {
  --wt-bg: #ffffff; --wt-text: #222222; --wt-border: #cccccc;
  --wt-muted: #6b7280; --wt-chip-bg: #f3f4f6;
  --wt-chip-bg-hover: #e5e7eb; --wt-shadow: 0 10px 25px rgba(0,0,0,.10);
}
#webtools {
  position: relative; display: flex; flex-direction: column;
  align-items: center; z-index: 1000; margin-top: -25px; font-family: inherit;
}
#webtools-toggle {
  display: inline-block; background: var(--wt-bg); color: var(--wt-text);
  border: 1px solid var(--wt-border); padding: 8px 18px;
  border-radius: 0 0 10px 10px; font-size: 14px; font-weight: 700;
  cursor: pointer; box-shadow: var(--wt-shadow);
}
#webtools-toggle:hover { background: var(--wt-chip-bg); }
#webtools-panel {
  width: 100%; width: 800px; margin-top: 8px;
  border: 1px solid var(--wt-border); background: var(--wt-bg);
  box-shadow: var(--wt-shadow); overflow: hidden; max-height: 0; opacity: 0;
  border-radius: 10px; transition: max-height .25s ease, opacity .2s ease;
}
#webtools.open #webtools-panel { max-height: 330px; opacity: 1; margin-bottom: 8px; }
#webtools-links {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; padding: 12px;
}
#webtools-links a {
  flex: 0 0 auto; display: flex; flex-direction: column; align-items: center;
  justify-content: center; min-width: 150px; padding: 10px 12px;
  text-decoration: none; color: var(--wt-text); background: var(--wt-chip-bg);
  border: 1px solid var(--wt-border); border-radius: 6px;
  transition: background .15s ease, transform .12s ease;
}
#webtools-links a:hover { background: var(--wt-chip-bg-hover); transform: translateY(-1px); }
#webtools-links .title { font-weight: 700; font-size: 14px; }
#webtools-links .desc  { color: var(--wt-muted); font-size: 12px; line-height: 1.2; }

/* Custom visited state for dynamic javascript links */
a.visited-custom { color: #551A8B; }
body.dark-mode a.visited-custom { color: #b57edc; }

/* ============================================================
   Layout fix for body/webtools positioning
   ============================================================ */
body { display: block !important; margin: 20px; }
#webtools {
  width: 100% !important; display: flex !important; flex-direction: column !important;
  align-items: center !important; margin-bottom: 12px !important;
}
.content-row { display: flex; justify-content: space-between; gap: 20px; }
.content-row .main-content { flex: 1 1 auto; margin-right: 0 !important; }
.content-row .sidebar { width: 450px; }
#webtools-panel { max-width: 980px; }