/* intoDNS-clone styling — faithful recreation of intodns.com */

* { box-sizing: border-box; }

body {
    margin: 0;
    padding: 0;
    font-family: Verdana, Geneva, Arial, sans-serif;
    font-size: 11px;
    color: #333;
    background: #fff;
    line-height: 1.4;
}

.page {
    max-width: 1000px;
    margin: 0 auto;
    padding: 20px;
}

/* ---------- Header ---------- */
.topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0 30px;
}

.logo {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: inherit;
}

.logo-mark {
    display: inline-grid;
    grid-template-columns: repeat(2, 14px);
    grid-template-rows: repeat(2, 14px);
    gap: 2px;
    margin-right: 8px;
    transform: rotate(45deg);
    vertical-align: middle;
}
.logo-mark .sq {
    width: 14px;
    height: 14px;
    background: #7a9cc2;
    display: block;
}
.logo-mark .sq2 { background: #9eb6d1; }
.logo-mark .sq3 { background: #9eb6d1; }
.logo-mark .sq4 { background: #c2d2e3; }

.logo-text {
    font-size: 28px;
    color: #6b8caf;
    letter-spacing: -1px;
    font-weight: normal;
    vertical-align: middle;
    margin-left: 6px;
}
.logo-text strong {
    color: #4a7398;
    font-weight: bold;
}
.logo-text sub {
    font-size: 9px;
    color: #999;
    vertical-align: sub;
    margin-left: 2px;
    letter-spacing: 0;
}

.search {
    display: flex;
    gap: 0;
}
.search input {
    width: 240px;
    padding: 6px 8px;
    border: 1px solid #b0b0b0;
    border-radius: 3px 0 0 3px;
    font-family: inherit;
    font-size: 13px;
    color: #333;
    background: #fff;
    outline: none;
}
.search input:focus { border-color: #6b8caf; }
.search button {
    padding: 6px 16px;
    background: #5d8ab8;
    color: #fff;
    border: 1px solid #4a7398;
    border-left: none;
    border-radius: 0 3px 3px 0;
    cursor: pointer;
    font-family: inherit;
    font-size: 12px;
    font-weight: bold;
}
.search button:hover { background: #4a7398; }

/* ---------- Intro (when no report) ---------- */
.intro {
    text-align: center;
    padding: 60px 20px;
    color: #666;
}
.intro h1 {
    font-size: 24px;
    font-weight: normal;
    color: #6b8caf;
    margin: 0 0 10px;
}
.intro p {
    font-size: 12px;
    max-width: 500px;
    margin: 0 auto;
}

.error-banner {
    background: #fee;
    border: 1px solid #fbb;
    padding: 10px 14px;
    margin: 0 0 20px;
    color: #900;
    border-radius: 3px;
}

/* ---------- Status line ---------- */
.status-line {
    text-align: center;
    font-size: 11px;
    color: #444;
    margin-bottom: 14px;
}
.status-line a { color: #5d8ab8; text-decoration: none; }
.status-line a:hover { text-decoration: underline; }

/* ---------- Report table ---------- */
.report {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid #cfd9e3;
    background: #fff;
}

.report thead th {
    background: #dde6ef;
    color: #333;
    text-align: left;
    font-weight: bold;
    font-size: 11px;
    padding: 6px 10px;
    border: 1px solid #cfd9e3;
    position: relative;
}

.report th.col-cat    { width: 90px; }
.report th.col-status { width: 50px; text-align: center; }
.report th.col-test   { width: 170px; }
.report th.col-info   { /* fills the rest */ }

.feedback {
    position: absolute;
    right: 10px;
    top: 6px;
    color: #5d8ab8;
    font-weight: normal;
    text-decoration: none;
    font-size: 11px;
}
.feedback:hover { text-decoration: underline; }
.feedback::after { content: " \1F4AC"; font-size: 10px; }

.report td {
    border: 1px solid #cfd9e3;
    padding: 8px 10px;
    vertical-align: top;
    font-size: 11px;
}

.report td.cat {
    background: #fff;
    font-weight: normal;
    vertical-align: top;
    color: #333;
}

.report td.status {
    text-align: center;
    vertical-align: middle;
    width: 50px;
}

.report td.test {
    color: #333;
    width: 170px;
}

.report td.info {
    color: #333;
    line-height: 1.5;
}

/* Row colors for problem rows */
.report tr.row-warn td.test,
.report tr.row-warn td.info,
.report tr.row-warn td.status {
    background: #fdecec;
}
.report tr.row-error td.test,
.report tr.row-error td.info,
.report tr.row-error td.status {
    background: #fdecec;
}

/* ---------- Status badges ---------- */
.badge {
    display: inline-block;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    text-align: center;
    line-height: 18px;
    font-size: 12px;
    font-weight: bold;
    color: #fff;
    font-family: Arial, sans-serif;
}
.badge-ok    { background: #6ebd6e; }
.badge-info  { background: #5d8ab8; font-style: italic; font-family: Georgia, serif; }
.badge-warn  { background: #e08a2b; }
.badge-error { background: #d44; }

/* ---------- Footer ---------- */
.elapsed {
    text-align: center;
    color: #666;
    margin: 14px 0;
    font-size: 11px;
}

footer {
    display: flex;
    justify-content: space-between;
    padding: 14px 0;
    color: #888;
    font-size: 10px;
    border-top: 1px solid #eee;
    margin-top: 20px;
}
footer a {
    color: #5d8ab8;
    text-decoration: none;
}
footer a:hover { text-decoration: underline; }

/* ---------- Responsive (mild) ---------- */
@media (max-width: 700px) {
    .topbar { flex-direction: column; gap: 16px; }
    .search input { width: 200px; }
    .report th.col-cat, .report td.cat { width: 60px; }
    .report th.col-test, .report td.test { width: 120px; }
    .page { padding: 10px; }
}