:root {
    --bg: #0f1420;
    --bg-panel: #171e2e;
    --bg-hover: #1e2740;
    --border: #2a3450;
    --text: #e6eaf2;
    --text-muted: #8b94ab;
    --accent: #4f8ff7;
    --healthy: #34d399;
    --warning: #fbbf24;
    --critical: #f87171;
    --offline: #6b7280;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--bg);
    color: var(--text);
    font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
    font-size: 15px;
}

h1 { font-size: 1.5rem; margin: 0 0 1rem; }
h2 { font-size: 1.05rem; margin: 0 0 0.75rem; color: var(--text); }
a { color: var(--accent); }

.app-shell { display: flex; flex-direction: column; min-height: 100vh; }

.app-nav {
    display: flex;
    align-items: center;
    gap: 2rem;
    padding: 0.6rem 1.25rem;
    background: var(--bg-panel);
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
}

.nav-brand { display: flex; align-items: center; gap: 0.5rem; font-weight: 600; }
.nav-links { display: flex; gap: 0.25rem; flex: 1; flex-wrap: wrap; }

.nav-links a {
    color: var(--text-muted);
    text-decoration: none;
    padding: 0.4rem 0.8rem;
    border-radius: 6px;
}

.nav-links a:hover { background: var(--bg-hover); color: var(--text); }
.nav-links a.active { background: var(--bg-hover); color: var(--accent); }

.nav-user { display: flex; align-items: center; gap: 0.75rem; }
.nav-username { color: var(--text-muted); font-size: 0.85rem; text-decoration: none; }
.nav-username:hover { color: var(--accent); }

.app-main { padding: 1.5rem; max-width: 1400px; width: 100%; margin: 0 auto; }
.auth-main { display: flex; align-items: center; justify-content: center; min-height: 100vh; }

.panel {
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 1.25rem;
    margin-bottom: 1.25rem;
}

.stat-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.stat-card {
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 1rem 1.25rem;
    display: flex;
    flex-direction: column;
}

.stat-value { font-size: 1.9rem; font-weight: 700; }
.stat-label { color: var(--text-muted); font-size: 0.85rem; }
.stat-healthy .stat-value { color: var(--healthy); }
.stat-warning .stat-value { color: var(--warning); }
.stat-critical .stat-value { color: var(--critical); }
.stat-offline .stat-value { color: var(--offline); }

.data-table { width: 100%; border-collapse: collapse; }
.data-table th {
    text-align: left;
    color: var(--text-muted);
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--border);
}
.data-table td { padding: 0.55rem 0.75rem; border-bottom: 1px solid var(--border); vertical-align: top; }
.data-table tr:last-child td { border-bottom: none; }
.row-link { cursor: pointer; }
.row-link:hover { background: var(--bg-hover); }

.badge {
    display: inline-block;
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
}
.badge-healthy, .badge-running, .badge-active, .badge-info, .badge-readonly { background: rgba(52,211,153,.15); color: var(--healthy); }
.badge-warning, .badge-starting, .badge-low, .badge-medium { background: rgba(251,191,36,.15); color: var(--warning); }
.badge-critical, .badge-failed, .badge-high { background: rgba(248,113,113,.15); color: var(--critical); }
.badge-offline, .badge-unknown, .badge-stopped, .badge-stopping { background: rgba(107,114,128,.2); color: var(--offline); }

.muted { color: var(--text-muted); }
.small { font-size: 0.8rem; }

.detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 1.25rem; }

.kv { display: grid; grid-template-columns: 140px 1fr; gap: 0.35rem 0.75rem; margin: 0; }
.kv dt { color: var(--text-muted); }
.kv dd { margin: 0; }

.metric-now { float: right; color: var(--accent); }
.sparkline { display: block; margin-bottom: 1rem; }

.usage-bar {
    background: var(--bg);
    border-radius: 4px;
    height: 8px;
    width: 120px;
    display: inline-block;
    margin-right: 0.5rem;
    overflow: hidden;
    vertical-align: middle;
}
.usage-fill { background: var(--healthy); height: 100%; }
.usage-warning { background: var(--warning); }
.usage-critical { background: var(--critical); }

.scroll-box { max-height: 360px; overflow-y: auto; }

.filter-bar { display: flex; gap: 0.75rem; margin-bottom: 1rem; }

select, input {
    background: var(--bg-panel);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 0.45rem 0.7rem;
    font-size: 0.9rem;
}

.btn {
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 0.45rem 1rem;
    cursor: pointer;
    font-size: 0.9rem;
}
.btn:hover { filter: brightness(1.1); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-small { padding: 0.25rem 0.6rem; font-size: 0.8rem; margin-right: 0.25rem; }
.btn-approve { background: var(--healthy); color: #04250f; }
.btn-reject { background: var(--critical); color: #2b0505; }
.btn-link { background: none; color: var(--text-muted); padding: 0.2rem 0.4rem; }
.btn-link:hover { color: var(--text); }
.btn-primary { width: 100%; margin-top: 1rem; padding: 0.6rem; }

.login-card {
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 2.25rem;
    width: 380px;
    max-width: 92vw;
}
.login-card h1 { text-align: center; margin-bottom: 0.25rem; }
.login-card p { text-align: center; margin-top: 0; }
.login-card label { display: block; margin: 0.9rem 0 0.3rem; color: var(--text-muted); font-size: 0.85rem; }
.login-card input[type="text"], .login-card input[type="password"], .login-card input:not([type]) { width: 100%; }
.checkbox-label { display: flex !important; align-items: center; gap: 0.5rem; }

.alert-error {
    background: rgba(248,113,113,.12);
    border: 1px solid var(--critical);
    color: var(--critical);
    border-radius: 6px;
    padding: 0.6rem 0.9rem;
    margin: 0.75rem 0;
    font-size: 0.85rem;
}

.validation-message { color: var(--critical); font-size: 0.8rem; }

.chat-panel { display: flex; flex-direction: column; min-height: 60vh; }
.chat-messages { flex: 1; display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 1rem; }
.chat-message { border-radius: 10px; padding: 0.7rem 1rem; max-width: 85%; }
.chat-user { background: var(--bg-hover); align-self: flex-end; }
.chat-assistant { background: var(--bg); border: 1px solid var(--border); align-self: flex-start; }
.chat-author { font-size: 0.75rem; color: var(--text-muted); margin-bottom: 0.2rem; }
.chat-text { white-space: pre-wrap; }
.chat-input { display: flex; gap: 0.6rem; }
.chat-input input { flex: 1; }

.tab-bar { display: flex; gap: 0.25rem; margin-bottom: 1.25rem; flex-wrap: wrap; border-bottom: 1px solid var(--border); }
.tab {
    background: none;
    border: none;
    color: var(--text-muted);
    padding: 0.5rem 1rem;
    cursor: pointer;
    font-size: 0.9rem;
    border-bottom: 2px solid transparent;
}
.tab:hover { color: var(--text); }
.tab-active { color: var(--accent); border-bottom-color: var(--accent); }

.row-problem { background: rgba(248,113,113,.08); }
.scroll-box-tall { max-height: 60vh; }
.alert-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.log-message { white-space: pre-wrap; word-break: break-word; max-width: 640px; }

.rule-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0.75rem; align-items: end; }
.rule-form label { display: flex; flex-direction: column; gap: 0.3rem; color: var(--text-muted); font-size: 0.85rem; }
.rule-form-actions { display: flex; gap: 0.5rem; }

.incident-detail-cell { background: var(--bg); padding: 1rem 1.25rem !important; }

.token-reveal { word-break: break-all; }
.token-value {
    display: block;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 0.6rem 0.9rem;
    margin-top: 0.5rem;
    font-size: 0.95rem;
    user-select: all;
}

.alert-info {
    background: rgba(79,143,247,.12);
    border: 1px solid var(--accent);
    color: var(--accent);
    border-radius: 6px;
    padding: 0.6rem 0.9rem;
    margin: 0.75rem 0;
    font-size: 0.85rem;
}

@media (max-width: 720px) {
    .app-main { padding: 1rem; }
    .detail-grid { grid-template-columns: 1fr; }
    .kv { grid-template-columns: 110px 1fr; }
}

/* Web app version next to the brand (set from the image build: -p:Version) */
.brand-version { font-size: 0.7rem; font-weight: 400; opacity: 0.6; margin-left: 0.25rem; }