/* ==========================================================================
   1. BASE TOOL CONTAINER
   ========================================================================== */

.as-tool {
  border: 1px solid #e5e7eb;
  border-radius: 0px;
  padding: 10px 16px;
  margin: 6px 0 15px 0;
  background: #fff;
  max-width: 900px;
  font-family: 'Roboto', sans-serif;
}

/* ==========================================================================
   2. TOOL ROWS & GRID LAYOUTS
   ========================================================================== */

.as-tool__row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 10px 0;
  flex-wrap: wrap;
}

.as-grid {
  display: grid;
  gap: 12px;
  margin: 10px 0;
  grid-template-columns: 1fr; /* default mobile = 1 col */
}

/* ≥600px → 2 columns */
@media (min-width: 600px) {
  .as-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ≥900px → 3 columns */
@media (min-width: 900px) {
  .as-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ≥1200px → 4 columns */
@media (min-width: 1200px) {
  .as-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}


/* ==========================================================================
   3. INPUT FIELDS & UNITS
   ========================================================================== */

.as-input {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #d1d5db;
  border-radius: 0px;
  padding-right: 8px;
}

.as-input input,
.as-input select {
  border: 1px solid #ccc;
  outline: none;
  min-width: 70px;   /* enough space for 2–3 digits + unit */
  box-sizing: border-box;
  background: transparent;
}

.as-input:has(select) {
  padding-right: 0px;
}

/* Right-align when there's a PREFIX (span before input) */
.as-input:has(> span:first-child + input) {
  justify-content: flex-end;
  padding-right: 0px;
}

.as-unit {
  opacity: 0.75;
}

.as-grid input[type="number"], input[type="text"] {
    margin-bottom: 0px;
	height: 35px;
}

.as-tool select {
    margin-bottom: 0px;
	height: 35px;
}

.as-tool label {
    cursor: auto;
}

/* Align labels at the bottom so input fields always line up */
.as-grid > div {
  display: flex;
  flex-direction: column;
  justify-content: flex-end; /* push label up, align input fields */
}

.as-grid > div label {
  margin-bottom: 4px; /* small gap above the input */
}

.as-disabled {
  opacity: 0.5;
  pointer-events: none; /* disables typing/clicking without showing 🚫 cursor */
}



/* ==========================================================================
   4. SEGMENTED BUTTONS & ACTION BUTTONS
   ========================================================================== */

.as-seg {
  display: inline-flex;
  border: 1px solid #d1d5db;
  border-radius: 0px;
  overflow: hidden;
}

.as-seg__btn {
  background: #fff;
  border: 0;
  padding: 8px 12px;
  cursor: pointer;
}

.as-seg__btn.as-active {
  background: #333;
  color: #fff;
}

/* Hover effect only if not active */
.as-seg__btn:not(.as-active):hover {
  background: #fff; /* or your hover color */
  color: #333;         /* hover text color */
}

.as-seg button,
.as-seg input[type="button"],
.as-seg input[type="reset"],
.as-seg input[type="submit"] {
  /* padding: 4px 15px; */
  color: #a6a6a6;
  letter-spacing: 2px;
}
	
.as-btn {
  background: #333;
  color: #fff;
  border: 0;
  padding: 10px 14px;
  border-radius: 10px;
  cursor: pointer;
}

.as-btn--ghost {
  background: #fff;
  color: #333;
  border: 1px solid #d1d5db;
}


/* ==========================================================================
   5. RESULTS AND KPI BLOCKS
   ========================================================================== */

.as-results {
  margin-top: 14px;
}

/* Default: 1 column */
.as-grid--results {
  grid-template-columns: 1fr;
}

/* 2 columns on small tablets */
@media (min-width: 480px) {
  .as-grid--results {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* 3 columns on wider screens */
@media (min-width: 800px) {
  .as-grid--results {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.as-kpi {
  font-size: 20px;
  font-weight: 700;
}

.as-kpi__label {
  font-size: 12px;
  opacity: 0.8;
}

.as-kpi__sub {
  font-size: 12px;
  opacity: 0.6;
}

/* ==========================================================================
   6. NOTES, HELPERS, AND ERRORS
   ========================================================================== */

.as-note {
  font-size: 12px;
  opacity: 0.7;
  margin-top: 8px;
}

.as-help {
  font-size: 12px;
  opacity: 0.7;
}

.as-error {
  color: #b00020;
  font-size: 12px;
  margin-top: 6px;
}

/* ==========================================================================
   7. CATEGORY LISTS (Parent & Child Pages)
   ========================================================================== */

.as-child-list .as-cat-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.as-child-list .as-cat-list li {
  margin: 0.4rem 0;
}

/* Parent category lists (remove bullets + left indent) */
.as-cat-hub .as-cat-list {
  list-style: none;
  margin: 0;
  padding-left: 0; /* some themes indent ULs */
}

.as-cat-hub .as-cat-list li {
  margin: .4rem 0;
}

/* ==========================================================================
   8. PAGINATION
   ========================================================================== */

.as-pagination {
  margin-top: 1rem;
}

.as-pagination ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: inline-flex;
  gap: 0.35rem;
}

.as-pagination a,
.as-pagination span {
  padding: 0.35rem 0.6rem;
  border: 1px solid #ddd;
  border-radius: 0.35rem;
  text-decoration: none;
}

.as-pagination .current {
  background: #f2f3f5;
  font-weight: 600;
}


/* ==========================================================================
   9. BREADCRUMBS (overrides theme spacing)
   ========================================================================== */

.as-breadcrumbs .as-bc-list {
  column-gap: 6px; /* horizontal */
  row-gap: 0;      /* vertical */
}

.as-breadcrumbs li {
  margin: 0;
}