/* SherDore Uptime — hand-written, dependency-free stylesheet.
   No build step, no CDN, no framework. Swap for a Tailwind/Vite
   pipeline later if/when a Node toolchain is set up on the VPS — this
   file is intentionally simple to make that swap low-risk.

   Palette is modeled on uptimerobot.com's own site (navy background +
   mint-green as the PRIMARY accent, not just a status color, plus
   fully pill-shaped buttons) — matches how the category leader in
   this exact product space presents itself; colors pulled via
   computed-style inspection of their live pages, not eyeballed.
   --green and --accent are intentionally the same hue: a button and a
   status badge are already visually distinct by shape (pill vs small
   chip), so sharing the color isn't ambiguous in practice, and it
   mirrors UptimeRobot's own homepage (their CTA buttons and "up"
   checkmarks are the same green). --accent-text is the dark navy used
   as the button *label* color on the bright green fill — white text on
   mint-green fails contrast; UptimeRobot's own buttons use a dark
   label for exactly this reason (confirmed via their live button's
   computed color, not assumed). */

:root {
    --bg: #1c2434;
    --bg-elevated: #232c40;
    --bg-hover: #2a3450;
    --border: #2f3a52;
    --text: #e6eaeb;
    --text-muted: #8b93a8;
    --accent: #3bd671;
    --accent-hover: #52e085;
    --accent-text: #131b25;
    --green: #3bd671;
    --yellow: #d29922;
    --red: #f85149;
    --link: #58a6ff;
    --radius: 10px;
    --radius-pill: 999px;
    --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: var(--font);
    background: var(--bg);
    color: var(--text);
    line-height: 1.5;
    font-size: 15px;
}

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

h1, h2, h3 { font-weight: 600; margin: 0 0 8px; }
h1 { font-size: 28px; }
h2 { font-size: 20px; }
h3 { font-size: 16px; }
p { margin: 0 0 12px; color: var(--text-muted); }

/* --- Layout shell --- */
/* Brand lockup is a real PNG (dark ink on transparent, pulled from
   accounts.sherdore.com's own asset, same as its login page) — it isn't
   recolorable via CSS the way the old inline-SVG lockup was. Rather than
   float it on a badge over a dark bar, the topbar itself takes the
   light, warm background the mark was actually designed against
   (matches sherdore.com's own header), with its own dark text/border
   tokens — the rest of the page stays on the dark --bg/--text theme. */
.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 24px;
    border-bottom: 1px solid #e8ddc9;
    background: #fdfaf6;
}
.topbar .brand { display: flex; align-items: center; }
.brand-mark { height: 24px; width: auto; display: block; }
.topbar nav a { margin-left: 20px; color: #57534e; font-size: 14px; }
.topbar nav a:hover { color: #1c1917; text-decoration: none; }
.topbar-user { color: #57534e; font-size: 14px; }

.account-menu {
    position: relative;
    display: inline-block;
    margin-left: 20px;
    vertical-align: middle;
}
.account-menu summary {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 10px 4px 4px;
    border-radius: 999px;
    cursor: pointer;
    list-style: none;
    color: var(--text);
    font-size: 14px;
    font-weight: 500;
}
.account-menu summary::-webkit-details-marker { display: none; }
.account-menu summary:hover { background: var(--bg-hover); }
.account-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--accent);
    color: var(--accent-text);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
}
.account-menu-dropdown {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 10px;
    min-width: 200px;
    padding: 6px;
    z-index: 20;
    display: flex;
    flex-direction: column;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
}
.account-menu-dropdown a,
.account-menu-dropdown button {
    display: block;
    width: 100%;
    margin: 0;
    padding: 9px 12px;
    background: none;
    border: none;
    border-radius: 6px;
    color: var(--text);
    font-size: 14px;
    text-align: left;
    cursor: pointer;
}
.account-menu-dropdown a:hover,
.account-menu-dropdown button:hover {
    background: var(--bg-hover);
    text-decoration: none;
}
.account-menu-dropdown .divider {
    height: 1px;
    margin: 6px 4px;
    background: var(--border);
}

.shell {
    display: flex;
    min-height: calc(100vh - 53px);
}
.sidebar {
    width: 220px;
    flex-shrink: 0;
    border-right: 1px solid var(--border);
    padding: 20px 0;
}
.sidebar a {
    display: block;
    padding: 8px 20px;
    color: var(--text-muted);
    font-size: 14px;
}
.sidebar a:hover, .sidebar a.active {
    color: var(--text);
    background: var(--bg-hover);
    text-decoration: none;
}
.sidebar .section-label {
    padding: 16px 20px 6px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}
.main { flex: 1; padding: 32px; max-width: 1100px; }

/* --- Cards --- */
.card {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px;
    margin-bottom: 16px;
}
.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

/* A <details class="card"> with <summary class="card-header"> — same
   look as a plain card, but the whole body collapses. The marker
   triangle browsers put on <summary> is suppressed in favor of
   .card-toggle-arrow, which is positioned wherever it's placed inside
   the header (right side, after any header controls) and flips on
   [open] via CSS only, no JS. */
summary.card-header { cursor: pointer; list-style: none; }
summary.card-header::-webkit-details-marker { display: none; }
.card-toggle-arrow {
    display: inline-block;
    color: var(--text-muted);
    transition: transform .15s ease;
}
details[open] > summary .card-toggle-arrow { transform: rotate(180deg); }

.grid { display: grid; gap: 16px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 720px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

/* --- Buttons & forms --- */
.btn {
    display: inline-block;
    padding: 9px 20px;
    border-radius: var(--radius-pill);
    background: var(--accent);
    color: var(--accent-text);
    border: none;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}
.btn:hover { background: var(--accent-hover); text-decoration: none; }
.btn-secondary { background: transparent; color: var(--text); border: 1px solid var(--border); }
.btn-secondary:hover { background: var(--bg-hover); border-color: var(--text-muted); }
.btn-danger { background: var(--red); color: #fff; }

label { display: block; font-size: 13px; color: var(--text-muted); margin-bottom: 4px; }
input[type=text], input[type=email], input[type=password], input[type=url], input[type=number], select, textarea {
    width: 100%;
    padding: 8px 10px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    font-size: 14px;
    margin-bottom: 14px;
}
input:focus, select:focus, textarea:focus { outline: 1px solid var(--accent); border-color: var(--accent); }

.error { color: var(--red); font-size: 13px; margin: -10px 0 12px; }
.help-text { font-size: 12px; color: var(--text-muted); margin-top: -8px; margin-bottom: 12px; }

/* --- Badges / status --- */
.badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
}
.badge-green { background: rgba(59,214,113,0.15); color: var(--green); }
.badge-yellow { background: rgba(210,153,34,0.15); color: var(--yellow); }
.badge-red { background: rgba(248,81,73,0.15); color: var(--red); }
.badge-gray { background: rgba(139,148,158,0.15); color: var(--text-muted); }

/* --- Table --- */
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--border); font-size: 14px; }
th { color: var(--text-muted); font-weight: 500; font-size: 12px; text-transform: uppercase; letter-spacing: 0.03em; }
tr:last-child td { border-bottom: none; }

/* --- Guest / marketing pages --- */
.guest-shell { min-height: 100vh; display: flex; flex-direction: column; }
.hero {
    text-align: center;
    padding: 100px 24px 60px;
    max-width: 720px;
    margin: 0 auto;
}
.hero h1 { font-size: 42px; margin-bottom: 16px; }
.hero p { font-size: 18px; margin-bottom: 32px; }
.hero .btn { padding: 12px 28px; font-size: 15px; margin: 0 6px; }

.auth-box {
    max-width: 380px;
    margin: 80px auto;
    padding: 32px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.auth-box h1 { font-size: 22px; text-align: center; margin-bottom: 24px; }

.features {
    max-width: 960px;
    margin: 0 auto;
    padding: 56px 24px;
}
.features:first-of-type { padding-top: 20px; }
.features:last-of-type { padding-bottom: 100px; }
.section-heading { text-align: center; max-width: 620px; margin: 0 auto 28px; }
.section-heading h2 { font-size: 26px; margin-bottom: 8px; }
.section-heading p { font-size: 15px; }

.guest-flash {
    max-width: 520px;
    margin: 20px auto -10px;
    padding: 10px 16px;
    border: 1px solid var(--green);
    border-radius: var(--radius);
    color: var(--text);
    font-size: 14px;
    text-align: center;
}
.guest-flash.is-error { border-color: var(--red); }

.empty-state { text-align: center; padding: 48px 24px; color: var(--text-muted); }

/* --- Site footer --- */
.site-footer {
    margin-top: auto;
    border-top: 1px solid var(--border);
    padding: 20px 0;
}
.site-footer-inner {
    max-width: 960px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.site-footer-copy { color: var(--text-muted); font-size: 13px; }
.site-footer-social { display: flex; gap: 16px; }
.site-footer-social a { color: var(--text-muted); display: inline-flex; }
.site-footer-social a:hover { color: var(--text); }
.site-footer-social svg { width: 18px; height: 18px; }

/* --- Alerts, posted incidents, multiple status pages, subscribers (ported from Azvian Uptime Monitor) --- */
.btn-block { display: block; width: 100%; text-align: center; }
.field-error { color: var(--red); font-size: 13px; margin: -10px 0 12px; }
.subscribe-row { display: flex; gap: 10px; align-items: flex-start; flex-wrap: wrap; }
.subscribe-row input[type=email] { flex: 1 1 220px; margin-bottom: 0; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.dns-steps { margin-top: 12px; padding: 12px 14px; border: 1px dashed var(--border); border-radius: var(--radius); }
.dns-steps code { background: var(--bg); border: 1px solid var(--border); border-radius: 4px; padding: 1px 6px; font-size: 12px; word-break: break-all; }
.dns-steps table { margin-bottom: 12px; }
/* --- Public status page: per-site uptime bars --- */
.site-row { padding: 12px 0; border-top: 1px solid var(--border); }
.site-row:first-of-type { border-top: 0; padding-top: 4px; }
.site-row-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.site-name { font-weight: 500; }
.site-uptime { display: inline-flex; align-items: center; gap: 10px; color: var(--text-muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.uptime-bars { display: flex; gap: 2px; height: 30px; }
.uptime-bar { flex: 1 1 0; min-width: 1px; border-radius: 2px; background: var(--border); }
.uptime-bar.is-ok { background: var(--green); }
.uptime-bar.is-warn { background: var(--yellow); }
.uptime-bar.is-bad { background: var(--red); }
.uptime-bar.is-maint { background: var(--link); opacity: .55; }
.uptime-bar:hover { opacity: .75; }
.uptime-axis { display: flex; justify-content: space-between; margin-top: 4px; color: var(--text-muted); font-size: 11px; }
.history-month { font-size: 15px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; margin: 24px 0 10px; }

.timeline { display: flex; flex-direction: column; }
.timeline-item { padding: 12px 0 12px 16px; border-left: 2px solid var(--border); position: relative; }
.timeline-item::before { content: ""; position: absolute; left: -6px; top: 18px; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); }
.timeline-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.timeline-time { color: var(--text-muted); font-size: 12px; }
.timeline-body { margin: 6px 0 0; color: var(--text); }