/* ============================================================
   LinuxBear DNS — stylesheet
   Modelled after intoDNS.com: clean, functional, table-first
   ============================================================ */

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background: #e8e8e8;
  color: #222;
  font-family: Verdana, Arial, sans-serif;
  font-size: 12px;
  line-height: 1.5;
}

a { color: #0066cc; text-decoration: none; }
a:hover { text-decoration: underline; }

code {
  font-family: 'Courier New', monospace;
  font-size: 11px;
  background: #f0f0f0;
  padding: 1px 4px;
  border: 1px solid #ddd;
  border-radius: 2px;
  color: #c00;
}

/* ── WRAPPER ── */
#wrapper {
  width: 900px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid #ccc;
  border-top: none;
  min-height: 100vh;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

/* ── HEADER ── */
#header {
  background: #1a3a5c;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  gap: 20px;
  border-bottom: 3px solid #f97316;
}

#logo {
  height: 48px;
  width: auto;
}

#header-tagline {
  color: #a8c4e0;
  font-size: 13px;
  font-style: italic;
}

/* ── SEARCH BAR ── */
#searchbar {
  background: #f5f5f5;
  border-bottom: 1px solid #ddd;
  padding: 12px 20px;
}

#searchbar label {
  display: block;
  margin-bottom: 7px;
  font-weight: bold;
  color: #444;
  font-size: 12px;
}

#input-row {
  display: flex;
  gap: 8px;
  align-items: center;
}

#domain-input {
  flex: 1;
  max-width: 400px;
  padding: 6px 10px;
  border: 1px solid #aaa;
  border-radius: 3px;
  font-family: Verdana, Arial, sans-serif;
  font-size: 13px;
  color: #222;
  background: #fff;
  outline: none;
  transition: border-color 0.15s;
}

#domain-input:focus {
  border-color: #0066cc;
  box-shadow: 0 0 0 2px rgba(0,102,204,0.15);
}

#check-btn {
  padding: 6px 18px;
  background: #1a3a5c;
  color: #fff;
  border: 1px solid #0d2640;
  border-radius: 3px;
  font-family: Verdana, Arial, sans-serif;
  font-size: 12px;
  font-weight: bold;
  cursor: pointer;
  transition: background 0.15s;
}

#check-btn:hover { background: #2a5080; }
#check-btn:active { background: #0d2640; }

/* ── CONTENT ── */
#content {
  padding: 16px 20px 24px;
}

#home-intro {
  padding: 20px 0 10px;
  max-width: 640px;
  line-height: 1.8;
}

#home-intro p { margin-bottom: 10px; }

.form-error {
  color: #c00;
  background: #fff5f5;
  border: 1px solid #fcc;
  padding: 8px 12px;
  border-radius: 3px;
  margin-top: 12px;
}

/* ── REPORT HEADER ── */
#report-header {
  padding: 12px 0 16px;
  border-bottom: 1px solid #e0e0e0;
  margin-bottom: 14px;
}

#report-header h1 {
  font-size: 16px;
  font-weight: bold;
  color: #1a3a5c;
  margin-bottom: 8px;
}

.report-icon { margin-right: 6px; }

.domain-highlight {
  color: #f97316;
  font-family: 'Courier New', monospace;
  font-size: 15px;
}

#report-summary {
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
  font-size: 12px;
}

.summary-pass  { color: #1a7a1a; font-weight: bold; }
.summary-warn  { color: #b07000; font-weight: bold; }
.summary-error { color: #c00000; font-weight: bold; }
.summary-time  { color: #888; margin-left: auto; }

/* ── RESULTS TABLE ── */
#results-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid #c8c8c8;
  font-size: 12px;
}

#results-table thead tr {
  background: #1a3a5c;
  color: #fff;
}

#results-table thead th {
  padding: 8px 10px;
  text-align: left;
  font-size: 12px;
  font-weight: bold;
  white-space: nowrap;
}

#feedback-link {
  color: #88bbdd;
  font-size: 11px;
  font-weight: normal;
}

.col-category  { width: 80px; }
.col-status    { width: 60px; }
.col-testname  { width: 200px; }
.col-info      { }

/* Table rows */
#results-table tbody tr {
  vertical-align: top;
}

#results-table tbody tr:nth-child(odd)  { background: #f9f9f9; }
#results-table tbody tr:nth-child(even) { background: #ffffff; }
#results-table tbody tr:hover           { background: #f0f5ff; }

/* Row status colouring */
tr.row-error { background: #fff5f5 !important; }
tr.row-error:hover { background: #ffe8e8 !important; }
tr.row-warn  { background: #fffbf0 !important; }
tr.row-warn:hover  { background: #fff3d0 !important; }

/* Section divider row (first row of each category) */
tr.row-first td.cell-category {
  border-top: 2px solid #c0c8d8;
}

/* Cells */
.cell-category {
  background: #dce8f5 !important;
  font-weight: bold;
  font-size: 12px;
  color: #1a3a5c;
  text-align: center;
  vertical-align: middle;
  padding: 8px 8px;
  border-right: 1px solid #c0c8d8;
  border-bottom: 1px solid #d8e0ec;
  line-height: 1.4;
}

.cell-status {
  text-align: center;
  padding: 7px 6px;
  border-right: 1px solid #e0e0e0;
  border-bottom: 1px solid #ececec;
  white-space: nowrap;
  vertical-align: middle;
}

.cell-testname {
  padding: 7px 10px;
  border-right: 1px solid #e0e0e0;
  border-bottom: 1px solid #ececec;
  font-weight: bold;
  color: #333;
  vertical-align: middle;
}

.cell-info {
  padding: 7px 12px;
  border-bottom: 1px solid #ececec;
  color: #444;
  line-height: 1.7;
}

/* ── STATUS BADGES ── */
.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 3px;
  font-size: 11px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

.badge-pass  { background: #d4edda; color: #155724; border: 1px solid #b8dfc5; }
.badge-warn  { background: #fff3cd; color: #856404; border: 1px solid #ffd96a; }
.badge-error { background: #f8d7da; color: #721c24; border: 1px solid #f0b4ba; }
.badge-info  { background: #d1ecf1; color: #0c5460; border: 1px solid #a8d8e0; }

/* ── PROCESSED LINE ── */
#processed-line {
  margin-top: 14px;
  color: #888;
  font-size: 11px;
  text-align: right;
}

/* ── LOADING SPINNER ── */
#loading-overlay {
  display: none;
  text-align: center;
  padding: 40px 20px;
}

#loading-overlay .spinner {
  display: inline-block;
  width: 28px;
  height: 28px;
  border: 3px solid #ddd;
  border-top-color: #1a3a5c;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  margin-bottom: 12px;
}

@keyframes spin { to { transform: rotate(360deg); } }

#loading-overlay p {
  color: #666;
  font-size: 13px;
}

/* ── FOOTER ── */
#footer {
  background: #1a3a5c;
  border-top: 3px solid #f97316;
  padding: 12px 20px;
  text-align: center;
  color: #a8c4e0;
  font-size: 11px;
}

#footer a { color: #88bbdd; }
#footer a:hover { color: #fff; }

/* ── RESPONSIVE ── */
@media (max-width: 920px) {
  #wrapper { width: 100%; border: none; }
}

@media (max-width: 620px) {
  .col-category { width: 60px; }
  .col-testname { width: 130px; }
  #report-summary { flex-direction: column; gap: 6px; }
  .summary-time { margin-left: 0; }
}