/* =====================================================
   KNOCKDNS - NO KNOCK EDITION  –  stylesheet
   ===================================================== */

:root {
    --bg:          #f0eeea;
    --surface:     #ffffff;
    --surface2:    #f7f6f3;
    --border:      #dedad4;
    --accent:      #0d9488;
    --accent-dark: #0f766e;
    --accent-pale: #ccfbf1;
    --green:       #16a34a;
    --text:        #1c1917;
    --muted:       #78716c;
    --danger:      #dc2626;
    --danger-pale: #fee2e2;
    --radius:      8px;
    --font:        Inter, "Segoe UI", system-ui, -apple-system, sans-serif;
    --mono:        "JetBrains Mono", "Fira Code", ui-monospace, "SFMono-Regular", Consolas, monospace;
    --shadow:      0 1px 3px rgba(0,0,0,.08), 0 4px 16px rgba(0,0,0,.06);
    --shadow-lg:   0 2px 8px rgba(0,0,0,.08), 0 12px 40px rgba(0,0,0,.1);
}

/* =====================================================
   Reset & base
   ===================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--font);
    font-size: 16px;
    line-height: 1.65;
    margin: 0;
    min-height: 100vh;
    padding: 40px 16px 80px;
    text-align: center;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

p { margin: 0 0 16px; }

ul, ol { padding-left: 22px; }
ul li, ol li { margin-bottom: 6px; }

code, kbd {
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 5px;
    font-family: var(--mono);
    font-size: .82em;
    padding: 2px 6px;
}

pre {
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-family: var(--mono);
    font-size: .82em;
    margin: 12px 0;
    overflow-x: auto;
    padding: 16px;
    text-align: left;
}

pre code { background: none; border: none; padding: 0; }

/* =====================================================
   Layout
   ===================================================== */

#form_container {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: var(--shadow-lg);
    margin: 0 auto;
    max-width: 720px;
    padding: 0 0 12px;
    text-align: left;
}

#page_content {
    padding: 28px 36px 8px;
}

/* =====================================================
   Header
   ===================================================== */

h1 {
    background: var(--accent);
    border-radius: 13px 13px 0 0;
    margin: 0;
}

h1 a {
    color: #fff;
    display: block;
    font-family: var(--font);
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: .06em;
    padding: 18px 36px;
    text-decoration: none;
    text-transform: uppercase;
}

h1 a:hover { opacity: .9; text-decoration: none; }

/* =====================================================
   Page headings
   ===================================================== */

h2 {
    color: var(--text);
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0 0 6px;
}

h3 {
    color: var(--muted);
    font-size: .95rem;
    font-weight: 400;
    margin: 0 0 18px;
}

h4 { margin: 0 0 8px; }

/* =====================================================
   Footer
   ===================================================== */

#footer {
    border-top: 1px solid var(--border);
    color: var(--muted);
    font-size: .8rem;
    margin-top: 20px;
    padding: 14px 36px;
    text-align: center;
}

#footer a {
    color: var(--muted);
}

#footer a:hover {
    color: var(--accent);
    text-decoration: underline;
}

/* =====================================================
   Index page nav action cards
   ===================================================== */

ul.nav-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    list-style: none;
    margin: 24px 0 8px;
    padding: 0;
}

ul.nav-actions li { margin: 0; }

ul.nav-actions a {
    align-items: center;
    background: var(--surface2);
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius);
    color: var(--text);
    display: flex;
    font-size: .95rem;
    font-weight: 500;
    padding: 14px 18px;
    text-decoration: none;
    transition: background .15s, color .15s, border-color .15s;
}

ul.nav-actions a:hover {
    background: var(--accent-pale);
    border-left-color: var(--accent-dark);
    color: var(--accent-dark);
    text-decoration: none;
}

/* =====================================================
   Forms
   ===================================================== */

form.appnitro {
    font-family: var(--font);
    font-size: 15px;
    margin: 0;
    padding: 0;
}

form ul {
    font-size: 100%;
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
}

form li {
    display: block;
    margin: 0 0 20px;
    padding: 0;
    position: relative;
}

form li::after { clear: both; content: ""; display: block; }

.form_description {
    border-bottom: 1px solid var(--border);
    margin: 0 0 24px;
    padding-bottom: 20px;
}

.form_description h2 { font-size: 1.25rem; margin: 0 0 8px; }
.form_description p  { color: var(--muted); font-size: .95rem; margin: 0; }

/* ---- Labels ---- */

label.description {
    color: var(--text);
    display: block;
    font-size: .9rem;
    font-weight: 600;
    margin-bottom: 8px;
}

/* ---- Inputs ---- */

input.text, input[type="text"],
textarea.textarea,
select, select.select {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    font-family: var(--font);
    font-size: 1rem;
    margin: 0;
    min-height: 44px;
    padding: 10px 14px;
    transition: border-color .15s, box-shadow .15s;
    width: 100%;
}

input.text:focus, input[type="text"]:focus,
textarea.textarea:focus, select:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(13,148,136,.15);
    outline: none;
}

input.small,  select.small  { width: 28%; }
input.medium, select.medium { width: 62%; }
input.large,  select.large  { width: 100%; }

textarea.small  { height: 5em; }
textarea.medium { height: 9em; }
textarea.large  { height: 18em; }

/* Inline subdomain selector — sit beside the hostname input */
.hostname-row {
    display: flex;
    gap: 8px;
}

.hostname-row input  { flex: 1; min-width: 0; width: auto !important; }
.hostname-row select { flex: 0 0 auto; width: auto !important; min-width: 160px; }

select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2378716c' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    cursor: pointer;
    padding-right: 34px;
}

/* ---- Radio / checkbox ---- */

input.radio, input.checkbox {
    accent-color: var(--accent);
    display: inline-block;
    height: 16px;
    margin: 0 7px 0 0;
    vertical-align: middle;
    width: 16px;
}

label.choice {
    color: var(--text);
    display: inline-block;
    font-size: .9rem;
    line-height: 1.5;
    margin: 0 0 6px;
    vertical-align: middle;
}

/* ---- Submit button ---- */

.buttons { clear: both; margin-top: 24px; }

input.button_text, .buttons input[type="submit"] {
    background: var(--accent);
    border: none;
    border-radius: var(--radius);
    color: #fff;
    cursor: pointer;
    font-family: var(--font);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: .01em;
    min-height: 44px;
    padding: 10px 32px;
    transition: background .15s, transform .1s;
    width: auto;
}

input.button_text:hover, .buttons input[type="submit"]:hover {
    background: var(--accent-dark);
    transform: translateY(-1px);
}

input.button_text:active, .buttons input[type="submit"]:active {
    transform: translateY(0);
}

/* ---- Section break ---- */

form li.section_break {
    border-top: 1px solid var(--border);
    margin-top: 24px;
    padding-top: 20px;
    width: 100% !important;
}

form .section_break h3 {
    color: var(--accent);
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 12px;
}

form .section_break p { font-size: .88rem; }

/* ---- Guidelines tooltip (desktop only) ---- */

form .guidelines {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    color: var(--muted);
    font-size: .8rem;
    left: 102%;
    line-height: 1.5;
    margin: 0;
    padding: 10px 14px;
    position: absolute;
    top: 0;
    visibility: hidden;
    width: 40%;
    z-index: 1000;
}

form .guidelines small { font-size: 105%; }
form li:hover .guidelines,
form li.highlighted .guidelines { visibility: visible; }

.no_guidelines .guidelines { display: none !important; }
.no_guidelines form li { width: 97%; }

/* =====================================================
   Errors & validation
   ===================================================== */

#error_message {
    background: var(--danger-pale);
    border: 1px solid #fca5a5;
    border-radius: var(--radius);
    margin-bottom: 16px;
    padding: 14px;
    text-align: center;
}

#error_message_title {
    color: var(--danger);
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0 0 6px;
}

#error_message_desc { color: var(--text); }

#error_message_desc strong {
    background: #fecaca;
    border-radius: 4px;
    color: var(--danger);
    padding: 2px 5px;
}

form li.error {
    background: var(--danger-pale);
    border: 1px solid #fca5a5;
    border-radius: var(--radius);
    padding: 8px 12px;
}

form li.error label { color: var(--danger) !important; }
form p.error { color: var(--danger); font-size: .85rem; font-weight: 700; margin: 4px 0 0; }
form .required { color: var(--danger); font-weight: 700; }

form li.highlighted {
    background: var(--accent-pale);
    border-radius: var(--radius);
    padding: 8px 12px;
}

/* =====================================================
   Success / thanks pages
   ===================================================== */

.form_success { padding: 60px 32px; text-align: center; }
.form_success h2 { font-size: 1.5rem; }

/* =====================================================
   Admin password page
   ===================================================== */

ul.password { list-style: none; margin: 60px auto; padding: 0; text-align: center; }
.password h2 { color: var(--danger); font-weight: 700; }
.password input.text { font-size: 1.4rem; text-align: center; width: min(360px, 100%); }
.password label { display: block; font-size: 1.1rem; font-weight: 700; padding-top: 10px; }

/* =====================================================
   Embedded mode
   ===================================================== */

.embed #form_container { border: none; width: 100%; }
.embed h1 { display: none; }
.embed #footer { padding-left: 10px; text-align: left; }
.embed form.appnitro { margin: 0; }

/* =====================================================
   Mobile — small screens
   ===================================================== */

@media (max-width: 640px) {
    body { padding: 0 0 48px; }

    #form_container {
        border-left: none;
        border-radius: 0;
        border-right: none;
        border-top: none;
        box-shadow: none;
        max-width: 100%;
    }

    h1 { border-radius: 0; }

    h1 a {
        font-size: .95rem;
        padding: 16px 20px;
    }

    #page_content { padding: 20px 16px 8px; }

    #footer { padding: 14px 16px; }

    /* Stack hostname + subdomain selector vertically on small screens */
    .hostname-row { flex-direction: column; }
    .hostname-row select { min-width: 0; width: 100% !important; }

    /* Widen medium inputs to full width */
    input.medium, select.medium { width: 100%; }

    /* Hide tooltip — no room for absolute positioned element */
    form .guidelines { display: none; }

    /* Full-width submit button */
    input.button_text, .buttons input[type="submit"] { width: 100%; }

    ul.nav-actions a { padding: 16px; }
}

/* =====================================================
   Tablet — medium screens
   ===================================================== */

@media (min-width: 641px) and (max-width: 860px) {
    body { padding: 16px 16px 48px; }

    #form_container { max-width: 100%; }

    form .guidelines { width: 36%; }
}

/* =====================================================
   Calendar (light theme)
   ===================================================== */

div.calendar { position: relative; }

.calendar table {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    color: var(--text);
    cursor: pointer;
    font-family: var(--font);
    font-size: 11px;
}

.calendar .button { padding: 2px; text-align: center; }
.calendar .nav { background: var(--surface2); }

.calendar thead .title {
    background: var(--surface2);
    color: var(--accent);
    font-weight: bold;
    padding: 4px 0;
    text-align: center;
}

.calendar thead .headrow  { background: var(--surface2); color: var(--muted); font-weight: bold; }
.calendar thead .daynames { background: var(--surface2); color: var(--text); font-weight: bold; }
.calendar thead .name     { border-bottom: 1px dotted var(--border); padding: 2px; text-align: center; }
.calendar thead .weekend  { color: var(--muted); }
.calendar thead .hilite   { background: var(--border); color: var(--text); }
.calendar thead .active   { background: var(--accent); color: #fff; }

.calendar tbody .day           { color: var(--text); padding: 2px; text-align: right; width: 1.8em; }
.calendar tbody .day.othermonth { color: var(--muted); font-size: 80%; }
.calendar tbody .rowhilite td  { background: var(--accent-pale); }
.calendar tbody td.hilite      { background: var(--border) !important; color: var(--text) !important; }
.calendar tbody td.active      { background: var(--accent) !important; color: #fff; }
.calendar tbody td.selected    { background: var(--surface2) !important; border: 1px solid var(--accent); font-weight: bold; }
.calendar tbody td.weekend     { color: var(--muted); }
.calendar tbody td.today       { background: rgba(22,163,74,.1); color: var(--green); font-weight: bold; }
.calendar tbody .disabled      { color: var(--muted); }
.calendar tbody .emptycell     { visibility: hidden; }
.calendar tbody .emptyrow      { display: none; }

.calendar tfoot .footrow { background: var(--surface2); color: var(--muted); text-align: center; }
.calendar tfoot .ttip    { background: var(--surface2); border-top: 1px solid var(--border); color: var(--muted); font-size: 10px; padding: 3px; }
.calendar tfoot .hilite  { background: var(--accent-pale); border: 1px solid var(--accent); color: var(--text); }
.calendar tfoot .active  { background: var(--accent); color: #fff; }

.calendar .combo {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text);
    display: none;
    font-size: 90%;
    left: 0;
    position: absolute;
    top: 0;
    width: 4em;
    z-index: 100;
}

.calendar .combo .label, .calendar .combo .label-IEfix { padding: 1px; text-align: center; }
.calendar .combo .label-IEfix { width: 4em; }
.calendar .combo .hilite      { background: var(--border); color: var(--text); }
.calendar .combo .active      { background: var(--surface2); border-bottom: 1px solid var(--border); border-top: 1px solid var(--border); font-weight: bold; }

/* =====================================================
   Admin pages
   ===================================================== */

.admin-table {
    border-collapse: collapse;
    font-size: 0.9rem;
    margin: 0 auto;
    text-align: left;
    width: 100%;
}

.admin-table th {
    background: var(--surface2);
    border-bottom: 2px solid var(--border);
    color: var(--muted);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: .06em;
    padding: 10px 14px;
    text-transform: uppercase;
    white-space: nowrap;
}

.admin-table td {
    border-bottom: 1px solid var(--border);
    padding: 10px 14px;
    vertical-align: middle;
}

.admin-table tr:hover td { background: var(--surface2); }

.admin-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

.admin-actions form { margin: 0; }

/* Buttons */
.btn {
    background: var(--accent);
    border: none;
    border-radius: 6px;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    font-size: 0.85rem;
    font-weight: 600;
    padding: 7px 16px;
    text-decoration: none;
    transition: background .15s;
}

.btn:hover { background: var(--accent-dark); text-decoration: none; }

.btn-small { font-size: 0.8rem; padding: 5px 12px; }

.btn-danger { background: var(--danger); }
.btn-danger:hover { background: #b91c1c; }

.btn-muted  { background: var(--surface2); border: 1px solid var(--border); color: var(--text); }
.btn-muted:hover { background: var(--border); }

/* Admin edit form */
.admin-edit-form {
    margin: 0 auto;
    max-width: 560px;
    text-align: left;
}

.form-field {
    margin-bottom: 18px;
}

.form-field label {
    color: var(--muted);
    display: block;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: .06em;
    margin-bottom: 6px;
    text-transform: uppercase;
}

.form-field input[type="text"],
.form-field input[type="email"],
.form-field input:disabled {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text);
    font-size: 0.95rem;
    padding: 9px 12px;
    width: 100%;
}

.form-field input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(13,148,136,.15);
    outline: none;
}

.form-field input:disabled { color: var(--muted); cursor: not-allowed; background: var(--surface2); }

.form-actions {
    display: flex;
    gap: 12px;
    margin-top: 24px;
}

.admin-filters {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
}

.admin-filters input[type="search"] {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text);
    flex: 1;
    font-size: 0.9rem;
    padding: 8px 12px;
    transition: border-color .15s, box-shadow .15s;
}

.admin-filters input[type="search"]:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(13,148,136,.15);
    outline: none;
}