/* dnsthingy — base stylesheet
   Spacing scale: 4 / 8 / 12 / 16 / 24px. Keep margins and paddings on it. */

:root {
    --bg:          #f6f7f9;
    --panel:       #ffffff;
    --border:      #dfe3e8;
    --text:        #1c2127;
    --text-muted:  #5f6874;   /* ≥ 4.5:1 on --bg and --panel, for small labels and notes */
    --accent:      #2a6df4;
    --accent-dark: #1d55c7;
    --danger:      #c0362c;
    --danger-bg:   #fdeceb;
    --success:     #1e7a45;
    --success-bg:  #e8f6ed;
    --warning:     #b7791f;
    --warning-bg:  #fdf6e3;
    /* Filled buttons: white text needs ≥ 4.5:1, so they don't follow --accent in dark mode */
    --btn-bg:       #2a6df4;
    --btn-bg-hover: #1d55c7;
    --focus-ring:   rgba(42, 109, 244, 0.28);
    --row-hover:    #f9fafb;
    --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* Follow the visitor's system theme; same tokens, darker values */
@media (prefers-color-scheme: dark) {
    :root {
        --bg:          #14171c;
        --panel:       #1c2026;
        --border:      #2c323b;
        --text:        #e6e9ed;
        --text-muted:  #9aa3af;
        --accent:      #5b8dff;
        --accent-dark: #3f74f0;
        --danger:      #ff8b80;
        --danger-bg:   #3a1f1d;
        --success:     #6fd39b;
        --success-bg:  #1a3125;
        --warning:     #e0b050;
        --warning-bg:  #33291a;
        --btn-bg:       #2a6df4;
        --btn-bg-hover: #1d55c7;
        --focus-ring:   rgba(91, 141, 255, 0.35);
        --row-hover:    #20252c;
    }
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

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

/* Keyboard focus: a clear ring on everything focusable (mouse clicks on buttons don't show it) */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--focus-ring);
}

/* DNS data (names, TTLs, serials, record values): monospace lines up dots and digits */
.mono { font-family: var(--mono); font-size: 13px; }

/* ── Navigation ──────────────────────────────────────────────────────────── */

nav {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 24px;
    background: var(--panel);
    border-bottom: 1px solid var(--border);
}

.nav-logo a {
    color: var(--text);
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -0.2px;
}
.nav-logo a:hover { text-decoration: none; }

.nav-links {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 0 0 0 auto;
    padding: 0;
    list-style: none;
}

.nav-links a, .nav-logout {
    color: var(--text-muted);
    font-size: 14px;
}
.nav-links a:hover, .nav-logout:hover { color: var(--text); }

/* The page you're on (up.php sets .active / aria-current) */
.nav-links a.active {
    color: var(--text);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: var(--accent);
    text-decoration-thickness: 2px;
    text-underline-offset: 6px;
}

/* The logout link is a form button — strip the button chrome */
.nav-logout {
    padding: 0;
    border: 0;
    background: none;
    font-family: inherit;
    cursor: pointer;
}

/* Hamburger, shown only on narrow screens (see media query below) */
.nav-toggle {
    display: none;
    margin-left: auto;
    padding: 4px 8px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: none;
    color: var(--text);
    font-size: 15px;
    cursor: pointer;
}

@media (max-width: 560px) {
    .nav-toggle { display: block; }
    .nav-links {
        display: none;
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        width: 100%;
        margin: 0;
        padding-top: 12px;
    }
    /* Toggled by the nav-toggle button */
    .nav-links.nav-open { display: flex; }
    nav { flex-wrap: wrap; padding: 12px 16px; }
}

/* ── Login / single-card pages ───────────────────────────────────────────── */

.login-wrap {
    display: flex;
    justify-content: center;
    padding: 48px 16px;
}

.login-card {
    width: 100%;
    max-width: 380px;
    padding: 24px;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 10px;
}

.card-title {
    margin: 0 0 16px;
    font-size: 18px;
    font-weight: 600;
}

.user-info { margin: 0 0 16px; }

/* Compact label + value row (ID / type / status, a zone's serial / owner …) */
.meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
    color: var(--text-muted);
    font-size: 13px;
}
.meta-row span { color: var(--text); font-weight: 600; }

.divider {
    margin: 24px 0;
    border: 0;
    border-top: 1px solid var(--border);
}

/* ── Forms ───────────────────────────────────────────────────────────────── */

.field { margin-bottom: 16px; }

/* Several short fields side by side (e.g. SOA timers); stacks on narrow screens */
.field-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
    gap: 0 12px;
}

/* Explanatory text above or under a form or list */
.form-note {
    margin: 0 0 16px;
    color: var(--text-muted);
    font-size: 13px;
}

.field label {
    display: block;
    margin-bottom: 4px;
    color: var(--text-muted);
    font-size: 13px;
}

.field input, .field select {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg);
    color: var(--text);
    font: inherit;
}

/* Compact input used in rows of inline controls */
.admin-input {
    flex: 1;
    min-width: 0;
    padding: 6px 10px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg);
    color: var(--text);
    font: inherit;
    font-size: 14px;
}

/* A fieldset used only to disable a group of fields: no border or spacing of its own */
.plain-fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.plain-fieldset:disabled input, .plain-fieldset:disabled select { opacity: 0.7; cursor: not-allowed; }

/* A row of controls (input + button, or several buttons) */
.inline-form {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}
.col-r .inline-form { justify-content: flex-end; }

/* ── Buttons ─────────────────────────────────────────────────────────────── */
/* One system: .btn is the primary action; -secondary for neutral actions and
   Cancel, -danger for destructive ones, -block for a full-width button (login card). */

.btn {
    display: inline-block;
    padding: 6px 12px;
    border: 1px solid transparent;
    border-radius: 6px;
    background: var(--btn-bg);
    color: #fff;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.5;
    text-align: center;
    white-space: nowrap;
    cursor: pointer;
}
.btn:hover { background: var(--btn-bg-hover); color: #fff; text-decoration: none; }

.btn-secondary {
    background: var(--panel);
    border-color: var(--border);
    color: var(--text);
}
.btn-secondary:hover { background: var(--bg); color: var(--text); }

/* Destructive action — outlined in the danger colour */
.btn-danger {
    background: none;
    border-color: var(--border);
    color: var(--danger);
}
.btn-danger:hover { background: var(--danger-bg); border-color: var(--danger); color: var(--danger); }

.btn-block { display: block; width: 100%; padding: 8px 12px; font-size: 15px; }

/* Actions in table rows: text-styled so a long list stays quiet; Delete keeps the danger colour */
.row-action {
    padding: 2px 4px;
    border: 0;
    background: none;
    color: var(--accent);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}
.row-action:hover { text-decoration: underline; }
.row-action-danger { color: var(--danger); }

/* ── Alerts ──────────────────────────────────────────────────────────────── */

.alert {
    margin-bottom: 16px;
    padding: 8px 12px;
    border: 1px solid var(--danger);
    border-radius: 6px;
    background: var(--danger-bg);
    color: var(--danger);
    font-size: 14px;
}

/* Needs a decision before going ahead (e.g. lowering a zone's serial) */
.alert-warning {
    border-color: var(--warning);
    background: var(--warning-bg);
    color: var(--text);
}
.alert-warning p { margin: 0 0 8px; }

.alert-success {
    border-color: var(--success);
    background: var(--success-bg);
    color: var(--success);
}

/* ── Content panels ──────────────────────────────────────────────────────── */

main {
    max-width: 1100px;
    margin: 0 auto;
    padding: 24px;
}
@media (max-width: 560px) { main { padding: 16px; } }

.panel {
    margin-bottom: 24px;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
}

.section-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    font-size: 14px;
    font-weight: 600;
}

.section-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--text-muted);
}
.dot-accent { background: var(--accent); }

/* Padded content area inside a panel (below its section header) */
.panel-body { padding: 16px; }

/* Add form and error sitting at the top of a panel */
.panel-form { padding: 12px 16px; border-bottom: 1px solid var(--border); }
.panel-alert { margin: 12px 16px; }

.panel-empty {
    margin: 0;
    padding: 24px 16px;
    color: var(--text-muted);
    text-align: center;
    font-size: 14px;
}

/* Page heading above a panel, with a muted part after the main title */
.page-title { margin: 0 0 8px; font-size: 22px; font-weight: 700; }
.page-title-sub { margin-left: 8px; color: var(--text-muted); font-size: 15px; font-weight: 400; }
.page-meta { margin-bottom: 16px; }

.back-link { margin: 0 0 12px; font-size: 14px; }

/* Home page numbers: three cards in a row, stacked on narrow screens; each links to /zones */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}
@media (max-width: 560px) { .stats-grid { grid-template-columns: 1fr; } }
.stat-card {
    display: block;
    padding: 16px;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text);
    text-align: center;
}
.stat-card:hover { border-color: var(--accent); text-decoration: none; }
.stat-label {
    margin-bottom: 4px;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.6px;
    text-transform: uppercase;
}
.stat-value { font-size: 26px; font-weight: 700; line-height: 1.2; }

/* ── Tabs (driven by files/js/tabs.js, markup as in the example) ── */
/* The bar sits at the top of a .panel.tabs; each .tab-panel is also a .panel-body.
   Tabs wrap onto more rows when they don't fit instead of overflowing. */
.tab-nav {
    display: flex;
    flex-wrap: wrap;
    padding: 0 16px;
    border-bottom: 1px solid var(--border);
}
.tab-btn {
    padding: 12px 16px;
    margin-bottom: -1px;
    border: 0;
    border-bottom: 2px solid transparent;
    background: none;
    color: var(--text-muted);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}
.tab-btn:hover { color: var(--text); text-decoration: none; }
.tab-btn.active { color: var(--accent); border-bottom-color: var(--accent); }
.tab-count { margin-left: 4px; color: var(--text-muted); font-weight: 400; }

.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* Form tabs (Settings, a zone's SOA / Settings, a template's Name & SOA): the content
   is a column centred in the panel. Two classes, so it beats .inline-form's margin: 0. */
.tab-panel.tab-column > * { max-width: 720px; margin-left: auto; margin-right: auto; }
.tab-panel.tab-column-narrow > * { max-width: 380px; }

/* Section heading inside a tab panel (e.g. Settings > Templates) */
.tab-heading { margin: 0 0 8px; font-size: 15px; font-weight: 600; }

/* Settings > Templates: the new-template form under the list */
.tab-column .template-add { margin-top: 12px; }
/* Template editor: Copy / Delete row, with room for the delete confirmation under it */
.tab-column .template-actions { margin-bottom: 12px; }

/* ── Tables ──────────────────────────────────────────────────────────────── */

table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    font-variant-numeric: tabular-nums;   /* dates and counts line up */
}
th, td {
    padding: 8px 16px;
    border-bottom: 1px solid var(--border);
    text-align: left;
}
th { color: var(--text-muted); font-size: 12px; font-weight: 600; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover > td { background: var(--row-hover); }
.col-r { text-align: right; }
.td-nowrap { white-space: nowrap; }
.text-muted { color: var(--text-muted); }

/* A table that sits flush with the panel edges inside a padded .panel-body */
.flush-table { margin: 0 -16px 12px; width: calc(100% + 32px); }
/* Same, for a table that may be wider than the panel: the wrapper is flush and scrolls */
.table-scroll { overflow-x: auto; margin: 0 -16px 12px; }
.table-scroll .flush-table { margin: 0; width: 100%; }

/* ── Zones and records ───────────────────────────────────────────────────── */

/* Add-zone row: the name takes the room and the row wraps on narrow screens */
.panel-form.inline-form { flex-wrap: wrap; }
.zone-name     { flex: 1 1 260px; }
.zone-template { flex: 0 1 200px; }

/* Bulk add: a folded section under the add form, the box full width */
.bulk-add summary { color: var(--accent); font-size: 13px; font-weight: 600; cursor: pointer; }
.bulk-add textarea {
    display: block;
    width: 100%;
    margin: 12px 0 8px;
    font-family: var(--mono);
    font-size: 13px;
    resize: vertical;
}
.bulk-add .inline-form { justify-content: flex-end; }
.bulk-result { margin: 12px 0 0; }
.bulk-result p { margin: 0 0 4px; }
.bulk-result ul { margin: 0; padding-left: 24px; }

/* Record type as a small neutral badge, all types alike */
.rr-type {
    display: inline-block;
    padding: 0 6px;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--bg);
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 600;
}

/* Header row opening each record type's group in the records tables */
.rr-group > td, tbody tr.rr-group:hover > td {
    padding: 4px 16px;
    background: var(--bg);
    font-size: 12px;
}

/* A disabled record (kept, not published): faded with its value struck through; the
   actions cell stays at full strength so Enable is easy to find */
.rr-disabled > td:not(.col-r) { opacity: 0.55; }
.rr-disabled .td-content { text-decoration: line-through; }
.rr-state {
    display: inline-block;
    margin-left: 4px;
    padding: 0 6px;
    border: 1px solid var(--warning);
    border-radius: 4px;
    color: var(--warning);
    font-family: inherit;
    font-size: 11px;
    font-weight: 600;
}

/* Records: content can be long (TXT) and wraps anywhere; the add form wraps on narrow screens */
.td-content { font-family: var(--mono); font-size: 13px; word-break: break-all; }
.record-by { font-size: 12px; }
.record-add { flex-wrap: wrap; margin-bottom: 16px; }
.rec-name    { flex: 1 1 120px; }
.rec-type    { flex: 0 0 auto; }
.rec-ttl     { flex: 0 1 100px; }
.rec-content { flex: 3 1 220px; }
.rec-comment { flex: 1 1 140px; }
.apply-template { max-width: 560px; }

/* The SOA form stays form-width even in a wide panel */
.soa-form { max-width: 720px; }

/* Zone sharing: the level dropdown in each grants row, and the add form */
.access-table select { flex: 0 1 auto; }
.access-add { max-width: 560px; }
.access-level { flex: 0 1 auto; }

/* ── Footer ──────────────────────────────────────────────────────────────── */

footer {
    padding: 24px;
    color: var(--text-muted);
    text-align: center;
    font-size: 12px;
}
footer p { margin: 4px 0; }