@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");

/* ServerHive Status — dark theme tokens (from the design system) */
:root {
    --sh-bg: #1c1c1c;
    --sh-surface: #242424;
    --sh-surface-hover: #2c2c2c;
    --sh-border: rgba(255, 255, 255, 0.07);
    --sh-border-strong: rgba(255, 255, 255, 0.12);

    --sh-text: rgba(255, 255, 255, 0.87);
    --sh-text-secondary: rgba(255, 255, 255, 0.50);
    --sh-text-muted: rgba(255, 255, 255, 0.28);

    --sh-accent: #e99014;
    --sh-accent-hover: #d4820f;

    --sh-success: #10b981;
    --sh-success-subtle: rgba(16, 185, 129, 0.12);
    --sh-warning: #f59e0b;
    --sh-warning-subtle: rgba(245, 158, 11, 0.12);
    --sh-danger: #ef4444;
    --sh-danger-subtle: rgba(239, 68, 68, 0.12);

    --sh-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    --sh-radius: 8px;
    --sh-radius-sm: 5px;

    --sh-font-sans: 'Inter', system-ui, -apple-system, sans-serif;
    --sh-font-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    background: var(--sh-bg);
    color: var(--sh-text);
    font-family: var(--sh-font-sans);
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--sh-accent); text-decoration: none; transition: color 120ms ease; }
a:hover { color: var(--sh-accent-hover); text-decoration: underline; }

.sh-page {
    max-width: 880px;
    margin: 0 auto;
    padding: 36px 24px 64px;
    display: flex;
    flex-direction: column;
    gap: 28px;
}

/* Header */
.sh-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.sh-header-brand { display: flex; align-items: center; gap: 12px; }
.sh-header-brand img { height: 30px; filter: invert(1) brightness(2); opacity: 0.85; }
.sh-status-pill {
    font-size: 0.8rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em;
    color: var(--sh-text-secondary);
    border: 1px solid var(--sh-border-strong); border-radius: 20px; padding: 3px 10px;
}
.sh-header-actions { display: flex; align-items: center; gap: 10px; }
.sh-header-actions > a { font-size: 0.85rem; }

/* Buttons */
.sh-btn {
    display: inline-flex; align-items: center; gap: 6px;
    border: none; border-radius: var(--sh-radius-sm); cursor: pointer;
    font-family: inherit; font-weight: 500;
    transition: background 120ms ease, color 120ms ease;
}
.sh-btn-primary { background: var(--sh-accent); color: #fff; }
.sh-btn-primary:hover { background: var(--sh-accent-hover); color: #fff; text-decoration: none; }
.sh-btn-sm { padding: 5px 10px; font-size: 0.8rem; }

/* Cards */
.sh-card {
    background: var(--sh-surface);
    border: 1px solid var(--sh-border);
    border-radius: var(--sh-radius);
    box-shadow: var(--sh-shadow);
}
.sh-card-header {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 14px 20px; border-bottom: 1px solid var(--sh-border);
}
.sh-card-header h3 { margin: 0; font-size: 0.95rem; font-weight: 600; }
.sh-card-body { padding: 20px; }

/* Badges */
.sh-badge {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 0.78rem; font-weight: 500;
    border-radius: 20px; padding: 3px 10px; white-space: nowrap;
}
.sh-badge-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.sh-badge-success { background: var(--sh-success-subtle); color: var(--sh-success); }
.sh-badge-warning { background: var(--sh-warning-subtle); color: var(--sh-warning); }
.sh-badge-danger  { background: var(--sh-danger-subtle);  color: var(--sh-danger); }
.sh-badge-neutral { background: rgba(255, 255, 255, 0.06); color: var(--sh-text-secondary); }

/* Overall status banner */
.sh-banner {
    padding: 20px;
    display: flex; align-items: flex-start; gap: 14px;
}
.sh-banner.success { border-color: rgba(16, 185, 129, 0.35);  background: var(--sh-success-subtle); }
.sh-banner.warning { border-color: rgba(245, 158, 11, 0.35);  background: var(--sh-warning-subtle); }
.sh-banner.danger  { border-color: rgba(239, 68, 68, 0.35);   background: var(--sh-danger-subtle); }
.sh-banner-led { width: 10px; height: 10px; border-radius: 50%; flex: none; margin-top: 5px; }
.sh-banner.success .sh-banner-led { background: var(--sh-success); box-shadow: 0 0 8px var(--sh-success); }
.sh-banner.warning .sh-banner-led { background: var(--sh-warning); box-shadow: 0 0 8px var(--sh-warning); }
.sh-banner.danger  .sh-banner-led { background: var(--sh-danger);  box-shadow: 0 0 8px var(--sh-danger); }
.sh-banner-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sh-banner h1 { font-size: 1.35rem; font-weight: 600; margin: 0; }
.sh-banner-updated { font-size: 0.8rem; color: var(--sh-text-secondary); font-family: var(--sh-font-mono); }
.sh-banner-message { margin: 8px 0 0; font-size: 0.9rem; line-height: 1.6; color: var(--sh-text-secondary); white-space: pre-line; }

/* Incident timelines */
.sh-affected { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sh-microlabel {
    font-size: 0.8rem; font-weight: 500; text-transform: uppercase;
    letter-spacing: 0.04em; color: var(--sh-text-muted);
}
.sh-timeline { display: flex; flex-direction: column; gap: 14px; }
.sh-timeline-row { display: grid; grid-template-columns: 130px 1fr; gap: 12px; }
.sh-timeline-time {
    font-size: 0.78rem; color: var(--sh-text-muted);
    font-family: var(--sh-font-mono); padding-top: 2px;
}
.sh-timeline-row p { margin: 0; font-size: 0.9rem; line-height: 1.55; }
.sh-timeline-row p strong { font-weight: 600; color: var(--sh-text); }
.sh-timeline-row.older p { color: var(--sh-text-secondary); }

/* Services */
.sh-service-row { padding: 16px 20px; border-top: 1px solid var(--sh-border); }
.sh-service-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sh-service-id { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.sh-service-name { font-size: 0.95rem; font-weight: 600; }
.sh-service-desc { font-size: 0.78rem; color: var(--sh-text-muted); }
.sh-service-meta { display: flex; align-items: center; gap: 14px; }
.sh-service-uptime { font-size: 0.85rem; color: var(--sh-text-secondary); font-family: var(--sh-font-mono); }
.sh-strip { display: flex; gap: 2px; height: 32px; margin-top: 12px; }
.sh-strip-cell { flex: 1; border-radius: 2px; cursor: default; transition: opacity 100ms ease; }
.sh-strip-cell:hover { opacity: 0.75; }
.sh-strip-cell.ok      { background: var(--sh-success); }
.sh-strip-cell.warning { background: var(--sh-warning); }
.sh-strip-cell.danger  { background: var(--sh-danger); }
.sh-strip-cell.none    { background: rgba(255, 255, 255, 0.08); }
.sh-strip-range { display: flex; justify-content: space-between; margin-top: 6px; }

/* Custom hover tooltip for uptime cells: enlarged 24h day timeline */
.sh-tip {
    position: absolute; z-index: 10; width: 230px;
    background: #2a2a2a;
    border: 1px solid var(--sh-border-strong);
    border-radius: 6px; padding: 10px 12px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.6);
    pointer-events: none;
}
.sh-tip-date { font-size: 0.78rem; font-weight: 600; margin-bottom: 7px; }
.sh-tip-bar { display: flex; height: 10px; border-radius: 2px; overflow: hidden; }
.sh-tip-bar i { display: block; height: 100%; }
.sh-tip-hours {
    display: flex; justify-content: space-between;
    font-size: 0.65rem; color: var(--sh-text-muted);
    font-family: var(--sh-font-mono);
    margin: 3px 0 7px;
}
.sh-tip-text { font-size: 0.75rem; color: var(--sh-text-secondary); line-height: 1.45; }
.sh-strip-range span { font-size: 0.72rem; color: var(--sh-text-muted); }
.sh-legend { display: flex; gap: 20px; padding: 12px 20px; border-top: 1px solid var(--sh-border); }
.sh-legend span {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 0.72rem; color: var(--sh-text-muted);
}
.sh-legend i { width: 8px; height: 8px; border-radius: 2px; display: inline-block; }

/* Past incidents */
.sh-past { display: flex; flex-direction: column; gap: 14px; }
.sh-past h2 { font-size: 1.1rem; font-weight: 600; margin: 0; }
.sh-past .sh-card-header h3 { font-size: 0.85rem; color: var(--sh-text-secondary); font-weight: 600; }
.sh-past-empty { padding: 14px 20px; }
.sh-past-empty span { font-size: 0.85rem; color: var(--sh-text-muted); }
.sh-past-incident { display: flex; flex-direction: column; gap: 12px; }
.sh-past-incident-title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sh-past-incident-title b { font-size: 0.95rem; font-weight: 600; }
.sh-history-link { font-size: 0.85rem; align-self: flex-start; }

/* Footer */
.sh-footer {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    border-top: 1px solid var(--sh-border); padding-top: 20px;
}
.sh-footer span { font-size: 0.78rem; color: var(--sh-text-muted); }
.sh-footer nav { display: flex; gap: 16px; }
.sh-footer nav a { font-size: 0.78rem; }

@media (max-width: 560px) {
    .sh-timeline-row { grid-template-columns: 1fr; gap: 2px; }
    .sh-service-top { flex-direction: column; align-items: flex-start; gap: 6px; }
    .sh-service-meta { width: 100%; justify-content: space-between; }
}