/* =====================================================================
   mac-address-converter.css : only for the MAC Address Converter & Formatter page
   Loaded with:  $page_styles = ['/assets/css/mac-address-converter.css'];
   Shared calculator styles (buttons, fonts, result tables, show-columns) come from site.css.
   ===================================================================== */

/* Result table box: fixed width, scrolls sideways and up/down */
.res-scroll { max-width: 100%; max-height: 360px; overflow: auto; border: 1px solid #d5dbe3; border-radius: 8px; }
.res-table { border-radius: 0; }
.res-table th, .res-table td { text-align: center; }
@media (min-width: 1024px) { .res-scroll { max-height: 420px; } }

/* Example box (copy it, then paste it into the box below) */
.ex-box { margin: 0 0 8px; padding: 8px 12px; background: #f1f8f8; border: 1px dashed #b9dcdd; border-radius: 10px;
  font-family: 'IBM Plex Mono', monospace; font-size: var(--fs-input); line-height: 1.7; color: #22577A; white-space: pre-wrap; overflow-x: auto; }

/* Big box for the list of ranges */
textarea.tool-input { height: auto; min-height: 130px; padding: 9px 12px; line-height: 1.6; resize: vertical;
  font-family: 'IBM Plex Mono', monospace; display: block; }
@media (min-width: 1024px) { textarea.tool-input { min-height: 150px; } }

/* Small number tiles */
.stat-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; margin: 4px 0 8px; }
@media (min-width: 640px) { .stat-row { grid-template-columns: repeat(4, 1fr); gap: 8px; } }
.stat { background: #f1f8f8; border: 1px solid #d9ecec; border-radius: 10px; padding: 6px 10px; min-width: 0; }
.stat b { display: block; font-size: 17px; line-height: 1.3; color: #22577A; font-family: 'IBM Plex Mono', monospace; }
.stat span { display: block; font-size: var(--fs-note); color: #4b5563; line-height: 1.3; }

/* Small headings inside the result card */
.sub-title { font-size: var(--fs-title); font-weight: 700; color: #22577A; margin: 10px 0 5px; line-height: 1.3; }
.sub-rule { border: 0; border-top: 1px solid #e3e8ee; margin: 12px 0 0; }

/* Guide */
.article .ex-title { font-family: 'Syne', sans-serif; font-weight: 700; font-size: 15px; color: #22577A; margin: 14px 0 6px; }

/* Status words in the table */
td.st-bad { color: #b91c1c; font-weight: 600; }
.res-table td.left { text-align: left; }

/* Output format and other small drop-downs in the options bar */
.mini-select { height: 28px; padding: 0 26px 0 8px; border: 1px solid #cbd5e1; border-radius: 8px; background: #fff; font-size: var(--fs-label); color: #22577A; font-weight: 600; cursor: pointer; }
.mini-select:focus { outline: none; border-color: var(--brand-teal); box-shadow: 0 0 0 3px rgba(56,163,165,.18); }

/* Copy-ready list of converted MAC addresses */
.out-box { width: 100%; height: 170px; padding: 8px 12px; border: 1px solid #d5dbe3; border-radius: 8px; background: #fff; resize: vertical;
  font-family: 'IBM Plex Mono', monospace; font-size: var(--fs-result); line-height: 1.6; color: #1f2937; white-space: pre; overflow: auto; display: block; }
.out-box:focus { outline: none; border-color: var(--brand-teal); box-shadow: 0 0 0 3px rgba(56,163,165,.18); }
.res-table td.mono-cell { font-family: 'IBM Plex Mono', monospace; }