/* ============================================
   CRONTIQ — App Pages (register, login, dashboard, monitor-detail)
   Extends crontiq.css variables. Dark mode only.
   ============================================ */

:root {
    --cq-green: #00FF88;
    --cq-green-dim: #00CC6A;
    --cq-charcoal: #0D1117;
    --cq-surface: #161B22;
    --cq-surface2: #21262D;
    --cq-border: #30363D;
    --cq-text-primary: #E6EDF3;
    --cq-text-secondary: #8B949E;
    --cq-warning: #F0A500;
    --cq-danger: #FF4D4D;
    --cq-violet: #7C5CFC;
}

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

html { scroll-behavior: smooth; }

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    background: var(--cq-charcoal);
    color: var(--cq-text-primary);
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
}

code, pre, .mono {
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
}

a { color: var(--cq-green); text-decoration: none; transition: color 0.15s; }
a:hover { color: var(--cq-green-dim); }

.container { max-width: 1100px; margin: 0 auto; padding: 0 24px; }

/* ---- Wordmark ---- */
.wordmark {
    font-weight: 800;
    letter-spacing: -2px;
    font-size: 24px;
    color: #fff;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.wordmark .q { color: var(--cq-green); }
.cq-wordmark {
    display: flex !important;
    gap: 0 !important;
    align-items: baseline;
    font-weight: 800;
    letter-spacing: -2px;
}
.cq-wordmark .cq-w { color: #fff; }
.cq-wordmark .cq-q { color: var(--cq-green); }

/* ---- App Nav ---- */
.app-nav {
    padding: 16px 0;
    border-bottom: 1px solid var(--cq-border);
    background: rgba(13, 17, 23, 0.95);
    backdrop-filter: blur(12px);
    position: sticky;
    top: 0;
    z-index: 100;
}
.app-nav .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.app-nav-right {
    display: flex;
    align-items: center;
    gap: 20px;
}
.app-nav-email {
    color: var(--cq-text-secondary);
    font-size: 13px;
}
.app-nav-link {
    color: var(--cq-text-secondary);
    font-size: 13px;
    font-weight: 500;
    transition: color 0.15s;
}
.app-nav-link:hover { color: var(--cq-text-primary); }

/* ---- Buttons ---- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 24px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    border: none;
    transition: all 0.2s;
    text-decoration: none;
    font-family: inherit;
}

.btn-primary {
    background: var(--cq-green);
    color: var(--cq-charcoal);
}
.btn-primary:hover {
    background: var(--cq-green-dim);
    color: var(--cq-charcoal);
    transform: translateY(-1px);
}

.btn-secondary {
    background: transparent;
    color: var(--cq-text-primary);
    border: 1.5px solid var(--cq-border);
}
.btn-secondary:hover {
    border-color: var(--cq-text-secondary);
    color: #fff;
}

.btn-sm { padding: 6px 14px; font-size: 12px; }
.btn-danger { background: var(--cq-danger); color: #fff; }
.btn-danger:hover { background: #e64444; }
.btn-full { width: 100%; }

/* ---- Cards ---- */
.card {
    background: var(--cq-surface);
    border: 1px solid var(--cq-border);
    border-radius: 12px;
    padding: 24px;
}

/* ---- Forms ---- */
.form-group {
    margin-bottom: 20px;
}
.form-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--cq-text-secondary);
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.form-input {
    width: 100%;
    padding: 12px 16px;
    background: var(--cq-surface2);
    border: 1px solid var(--cq-border);
    border-radius: 8px;
    color: var(--cq-text-primary);
    font-size: 15px;
    font-family: inherit;
    outline: none;
    transition: border-color 0.15s;
}
.form-input:focus {
    border-color: var(--cq-green);
}
.form-input::placeholder {
    color: var(--cq-text-secondary);
}

/* ---- Auth pages (register / login) ---- */
.auth-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 80px);
    padding: 40px 24px;
}
.auth-card {
    width: 100%;
    max-width: 420px;
    text-align: center;
}
.auth-logo {
    margin-bottom: 32px;
}
.auth-title {
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -1px;
    margin-bottom: 8px;
}
.auth-subtitle {
    color: var(--cq-text-secondary);
    font-size: 15px;
    margin-bottom: 32px;
}
.auth-form {
    text-align: left;
}
.auth-success {
    background: rgba(0, 255, 136, 0.08);
    border: 1px solid rgba(0, 255, 136, 0.2);
    border-radius: 12px;
    padding: 32px;
    text-align: center;
}
.auth-success-icon {
    font-size: 48px;
    margin-bottom: 16px;
}
.auth-success h3 {
    font-size: 18px;
    margin-bottom: 8px;
    color: var(--cq-green);
}
.auth-success p {
    color: var(--cq-text-secondary);
    font-size: 14px;
}
.auth-error {
    background: rgba(255, 77, 77, 0.08);
    border: 1px solid rgba(255, 77, 77, 0.2);
    border-radius: 8px;
    padding: 12px 16px;
    color: var(--cq-danger);
    font-size: 14px;
    margin-bottom: 20px;
    text-align: center;
}
/* ---- OAuth Buttons ---- */
.oauth-buttons {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 20px;
}
.oauth-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 11px 20px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    border: 1px solid var(--cq-border);
    transition: all 0.2s;
    text-decoration: none;
    font-family: inherit;
}
.github-btn {
    background: #24292e;
    color: #fff;
}
.github-btn:hover {
    background: #2f363d;
    color: #fff;
    border-color: var(--cq-text-secondary);
}
.google-btn {
    background: #fff;
    color: #333;
}
.google-btn:hover {
    background: #f5f5f5;
    color: #333;
    border-color: var(--cq-text-secondary);
}

.auth-separator {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
    color: var(--cq-text-secondary);
    font-size: 13px;
}
.auth-separator::before,
.auth-separator::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--cq-border);
}

.auth-footer {
    margin-top: 24px;
    font-size: 13px;
    color: var(--cq-text-secondary);
    text-align: center;
}

/* ---- Verify error ---- */
.verify-error-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 80px);
    padding: 40px 24px;
    text-align: center;
}
.verify-error-icon {
    font-size: 64px;
    margin-bottom: 24px;
}
.verify-error-title {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 12px;
}
.verify-error-text {
    color: var(--cq-text-secondary);
    font-size: 15px;
    margin-bottom: 32px;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

/* ---- Dashboard ---- */
.dash-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 32px;
    padding-top: 32px;
}
.dash-header h1 {
    font-size: 24px;
    font-weight: 700;
}
.dash-count {
    color: var(--cq-text-secondary);
    font-size: 14px;
}

/* Quick Start */
.quick-start {
    border-color: var(--cq-green);
    margin-bottom: 32px;
    position: relative;
}
.quick-start::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--cq-green);
    border-radius: 12px 12px 0 0;
}
.quick-start h3 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 16px;
    color: var(--cq-green);
}
.quick-start-label {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--cq-text-secondary);
    margin-bottom: 8px;
}
.api-key-box {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--cq-surface2);
    border: 1px solid var(--cq-border);
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 20px;
}
.api-key-value {
    font-family: 'JetBrains Mono', monospace;
    font-size: 14px;
    color: var(--cq-green);
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.copy-btn {
    background: transparent;
    border: 1px solid var(--cq-border);
    color: var(--cq-text-secondary);
    padding: 4px 10px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 12px;
    font-family: inherit;
    font-weight: 500;
    transition: all 0.15s;
    white-space: nowrap;
}
.copy-btn:hover {
    border-color: var(--cq-green);
    color: var(--cq-green);
}
.quick-start-code {
    background: var(--cq-surface2);
    border: 1px solid var(--cq-border);
    border-radius: 8px;
    padding: 16px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    color: var(--cq-green);
    overflow-x: auto;
    white-space: pre;
    line-height: 1.6;
}

/* Monitor list */
.monitor-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.monitor-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    background: var(--cq-surface);
    border: 1px solid var(--cq-border);
    border-radius: 10px;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s, background 0.15s;
}
.monitor-row:hover {
    border-color: var(--cq-text-secondary);
    background: var(--cq-surface2);
    color: inherit;
}
.monitor-status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}
.dot-up { background: var(--cq-green); box-shadow: 0 0 6px var(--cq-green); }
.dot-down { background: var(--cq-danger); box-shadow: 0 0 6px var(--cq-danger); }
.dot-warning { background: var(--cq-violet); box-shadow: 0 0 6px var(--cq-violet); }
.dot-late { background: var(--cq-warning); box-shadow: 0 0 6px var(--cq-warning); }
.dot-new { background: var(--cq-text-secondary); }
.dot-paused { background: var(--cq-text-secondary); opacity: 0.5; }

.monitor-info { flex: 1; min-width: 0; }
.monitor-slug {
    font-weight: 600;
    font-size: 15px;
    font-family: 'JetBrains Mono', monospace;
}
.monitor-meta {
    font-size: 12px;
    color: var(--cq-text-secondary);
    margin-top: 2px;
}
.monitor-status-label {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 3px 10px;
    border-radius: 4px;
}
.label-up { background: rgba(0,255,136,0.1); color: var(--cq-green); }
.label-down { background: rgba(255,77,77,0.1); color: var(--cq-danger); }
.label-warning { background: rgba(124,92,252,0.1); color: var(--cq-violet); }
.label-late { background: rgba(240,165,0,0.1); color: var(--cq-warning); }
.label-new { background: rgba(139,148,158,0.1); color: var(--cq-text-secondary); }
.label-paused { background: rgba(139,148,158,0.06); color: var(--cq-text-secondary); }

.monitor-empty {
    text-align: center;
    padding: 64px 24px;
    color: var(--cq-text-secondary);
    font-size: 15px;
}

/* ---- Monitor Detail ---- */
.detail-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 32px;
    margin-bottom: 32px;
}
.detail-header h1 {
    font-size: 24px;
    font-weight: 700;
    font-family: 'JetBrains Mono', monospace;
    display: flex;
    align-items: center;
    gap: 12px;
}
.detail-back {
    color: var(--cq-text-secondary);
    font-size: 13px;
    font-weight: 500;
}
.detail-back:hover { color: var(--cq-text-primary); }

/* Anomaly banner */
.anomaly-banner {
    background: rgba(240, 165, 0, 0.08);
    border: 1px solid rgba(240, 165, 0, 0.25);
    border-radius: 10px;
    padding: 16px 20px;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--cq-warning);
    font-size: 14px;
}
.anomaly-banner-icon { font-size: 20px; }

/* Pings table */
.pings-section {
    margin-bottom: 32px;
}
.section-heading {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 16px;
    color: var(--cq-text-primary);
}
.pings-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.pings-table thead {
    background: var(--cq-surface2);
}
.pings-table th {
    padding: 10px 16px;
    text-align: left;
    font-weight: 600;
    font-size: 11px;
    color: var(--cq-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid var(--cq-border);
}
.pings-table td {
    padding: 10px 16px;
    border-bottom: 1px solid var(--cq-border);
    color: var(--cq-text-secondary);
}
.pings-table tbody tr:last-child td {
    border-bottom: none;
}
.ping-type {
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 2px 8px;
    border-radius: 4px;
}
.ping-success { background: rgba(0,255,136,0.1); color: var(--cq-green); }
.ping-fail { background: rgba(255,77,77,0.1); color: var(--cq-danger); }
.ping-start { background: rgba(124,92,252,0.1); color: var(--cq-violet); }
.ping-log { background: rgba(139,148,158,0.06); color: var(--cq-text-secondary); }

/* Metrics section */
.metrics-section {
    margin-bottom: 32px;
}
.metric-card {
    background: var(--cq-surface);
    border: 1px solid var(--cq-border);
    border-radius: 10px;
    padding: 16px 20px;
    margin-bottom: 12px;
}
.metric-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}
.metric-card-key {
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    color: var(--cq-text-secondary);
}
.metric-card-value {
    font-family: 'JetBrains Mono', monospace;
    font-size: 16px;
    font-weight: 700;
}
.metric-anomaly {
    color: var(--cq-danger);
}

/* Badge section */
.badge-section {
    margin-bottom: 32px;
}
.badge-preview {
    background: var(--cq-surface2);
    border-radius: 8px;
    padding: 20px;
    text-align: center;
    margin-bottom: 12px;
}
.badge-snippet {
    background: var(--cq-surface2);
    border: 1px solid var(--cq-border);
    border-radius: 8px;
    padding: 12px 16px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    color: var(--cq-text-secondary);
    overflow-x: auto;
    white-space: nowrap;
}

/* Settings section */
.settings-section {
    margin-bottom: 48px;
}
.settings-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.toggle-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}
.toggle-label {
    font-size: 14px;
    color: var(--cq-text-primary);
}
.toggle-switch {
    position: relative;
    width: 44px;
    height: 24px;
}
.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}
.toggle-slider {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: var(--cq-surface2);
    border: 1px solid var(--cq-border);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s;
}
.toggle-slider::before {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--cq-text-secondary);
    top: 2px;
    left: 2px;
    transition: all 0.2s;
}
.toggle-switch input:checked + .toggle-slider {
    background: rgba(0, 255, 136, 0.15);
    border-color: var(--cq-green);
}
.toggle-switch input:checked + .toggle-slider::before {
    background: var(--cq-green);
    transform: translateX(20px);
}

/* ---- Footer ---- */
.app-footer {
    text-align: center;
    padding: 32px 0;
    color: var(--cq-text-secondary);
    font-size: 12px;
    border-top: 1px solid var(--cq-border);
    margin-top: 48px;
}

/* ---- Responsive ---- */
@media (max-width: 768px) {
    .dash-header {
        flex-direction: column;
        gap: 12px;
        align-items: flex-start;
    }
    .detail-header {
        flex-direction: column;
        gap: 12px;
        align-items: flex-start;
    }
    .settings-grid {
        grid-template-columns: 1fr;
    }
    .monitor-row {
        flex-wrap: wrap;
    }
}

@media (max-width: 480px) {
    .auth-title {
        font-size: 22px;
    }
    .container {
        padding: 0 16px;
    }
}