body {
  font-family: Arial, sans-serif;
  line-height: 1.5;
  margin: 0;
  padding: 0;
  background-color: #ffffff;
  color: #000000;
}

/*
Screen-reader-only content remains available to assistive technology while
staying visually hidden. This supports live regions, table captions, and
field hints without cluttering the visible UI.
*/
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: -999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

  .skip-link:focus {
    position: static;
    width: auto;
    height: auto;
    padding: 8px;
    background: #ffffff;
    border: 2px solid #005fcc;
    z-index: 1000;
  }

.page-header {
  margin-bottom: 0.25rem;
  padding: 0.5rem 1rem 0.25rem 1rem;
}

  .page-header h1,
  .page-header h2 {
    margin: 0;
  }

.brand-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.county-seal {
  width: 64px;
  height: 64px;
  flex: 0 0 auto;
  object-fit: contain;
}

.app-title {
  font-size: 1.6rem;
  font-weight: 700;
}

.category-title {
  font-size: 1.1rem;
  font-weight: 400;
  margin-top: 0.25rem;
  color: #333333;
}

.section-title {
  margin-top: 0;
  margin-bottom: 0.5rem;
}

.main-content {
  padding: 0.5rem 1rem 1rem 1rem;
}

/*
Bid mode is a dedicated Category 31 dashboard mode.

JavaScript also sets hidden/display state directly, but this CSS rule is a
defensive layer that prevents the normal public-records search form and generic
search-results section from leaking below the Bid Dashboard if stale inline
state or browser cache gets involved.
*/
body.bid-mode #searchPanel,
body.bid-mode .results-section {
  display: none !important;
}

.page-footer {
  padding: 1rem;
  margin-top: 2rem;
  font-size: 0.9rem;
}

.search-form {
  max-width: 600px;
}

.form-group {
  margin-bottom: 10px;
}

.field-help {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.9rem;
  color: #333333;
}

input[type="text"],
input[type="date"],
select {
  width: 100%;
  padding: 6px;
  box-sizing: border-box;
}

fieldset {
  border: 1px solid #cccccc;
  padding: 1rem;
  margin: 0 0 1rem 0;
}

legend {
  font-weight: 700;
  padding: 0 0.25rem;
}

.form-actions {
  margin-top: 10px;
}

button {
  padding: 6px 12px;
  cursor: pointer;
}

  button:disabled {
    cursor: not-allowed;
    opacity: 0.65;
  }

  /*
Focus styling is intentionally visible and consistent across links, inputs,
buttons, selects, focusable grid text, and focusable table cells so keyboard
users can track their position through both controls and readable content.
*/
  button:focus,
  input:focus,
  select:focus,
  a:focus,
  [tabindex="0"]:focus,
  td[tabindex="0"]:focus {
    outline: 3px solid #005fcc;
    outline-offset: 2px;
  }

.btn-primary {
  background-color: #005fcc;
  color: #ffffff;
  border: none;
}

.btn-secondary {
  background-color: #f3f3f3;
  color: #000000;
  border: 1px solid #777777;
  white-space: nowrap;
}

.results-container {
  margin-top: 10px;
}

#bidDashboard section {
  margin-bottom: 2rem;
}

table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 0.5rem;
}

caption {
  text-align: left;
  font-weight: 700;
  padding: 0.25rem 0;
}

th,
td {
  padding: 8px;
  border: 1px solid #ddd;
  text-align: left;
  vertical-align: top;
}

th {
  font-weight: 700;
  background: #f3f3f3;
  white-space: nowrap;
}

.action-cell {
  min-width: 115px;
  white-space: nowrap;
}

.pagination {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.75rem;
  flex-wrap: wrap;
}

.grid-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 1rem 0 0.5rem 0;
  flex-wrap: wrap;
}

.grid-summary,
.grid-page-count {
  font-size: 0.95rem;
}

  .grid-summary[tabindex="0"],
  .grid-page-count[tabindex="0"] {
    padding: 4px 6px;
    border-radius: 2px;
  }

.grid-page-size {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

  .grid-page-size label {
    font-weight: 700;
  }

  .grid-page-size select {
    width: auto;
    min-width: 125px;
  }

.grid-export button {
  white-space: nowrap;
}

.grid-pagination {
  margin-bottom: 1rem;
}

.view-toolbar {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 0.5rem 0;
  flex-wrap: wrap;
}

.date-entry-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

  .date-entry-row input[type="text"] {
    flex: 1;
  }

/*
High-contrast mode users may override colors. Avoid removing native outlines
or relying solely on color to communicate state.
*/
@media (forced-colors: active) {
  button,
  input,
  select,
  table,
  th,
  td,
  [tabindex="0"] {
    forced-color-adjust: auto;
  }
}

@media (max-width: 520px) {
  .brand-header {
    align-items: flex-start;
  }

  .county-seal {
    width: 48px;
    height: 48px;
  }

  .app-title {
    font-size: 1.35rem;
  }
}