/* WebGuard UI styles — dark, compact management console. */
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
    font-family: -apple-system, "Segoe UI", "Microsoft JhengHei", sans-serif;
    background: #0f172a;
    color: #e2e8f0;
    line-height: 1.5;
}
a { color: #38bdf8; text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 1.6rem; }
h2 { font-size: 1.1rem; margin: 1.5rem 0 .6rem; color: #cbd5e1; }

/* Top bar */
.wg-topbar {
    display: flex; align-items: center; gap: 1.5rem;
    padding: .8rem 1.5rem; background: #1e293b; border-bottom: 1px solid #334155;
}
.wg-brand { font-weight: 700; letter-spacing: .08em; color: #38bdf8; }
.wg-nav { display: flex; gap: 1rem; }
.wg-nav a { color: #cbd5e1; }
.wg-user { margin-left: auto; color: #94a3b8; font-size: .9rem; }
.wg-logout { margin-left: .8rem; }

.wg-main { max-width: 1100px; margin: 0 auto; padding: 1.5rem; }
.wg-page-head { display: flex; align-items: baseline; justify-content: space-between; }
.wg-date { color: #64748b; font-size: .9rem; }
.wg-hint { color: #94a3b8; font-size: .9rem; margin: .5rem 0 1rem; }

/* Cards */
.wg-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; margin-top: 1rem; }
.wg-card { background: #1e293b; border: 1px solid #334155; border-radius: 8px; padding: 1rem; text-align: center; }
.wg-card-num { display: block; font-size: 1.8rem; font-weight: 700; color: #f1f5f9; }
.wg-card-label { color: #94a3b8; font-size: .85rem; }
.wg-card-warn { border-color: #7f1d1d; }
.wg-card-warn .wg-card-num { color: #f87171; }

/* Alert box */
.wg-alert-box { background: #1e293b; border: 1px solid #334155; border-radius: 8px; padding: 1rem; margin-top: 1.5rem; }
.wg-alert-list { list-style: none; }
.wg-alert-list li { display: flex; gap: .8rem; align-items: center; padding: .3rem 0; border-bottom: 1px solid #26334a; font-size: .9rem; }
.wg-ip { font-family: monospace; color: #f1f5f9; }
.wg-rule { color: #94a3b8; }
.wg-time { margin-left: auto; color: #64748b; font-size: .82rem; }

/* Severity badges */
.wg-sev { display: inline-block; padding: .1rem .5rem; border-radius: 4px; font-size: .75rem; font-weight: 700; text-transform: uppercase; }
.wg-sev-high { background: #7f1d1d; color: #fecaca; }
.wg-sev-medium { background: #78350f; color: #fed7aa; }
.wg-sev-low { background: #334155; color: #cbd5e1; }

/* Tables */
.wg-table { width: 100%; border-collapse: collapse; margin-top: .5rem; font-size: .9rem; }
.wg-table th, .wg-table td { text-align: left; padding: .5rem .6rem; border-bottom: 1px solid #26334a; vertical-align: top; }
.wg-table th { color: #94a3b8; font-weight: 600; }
.wg-empty { color: #64748b; text-align: center; padding: 1.5rem; }
.wg-evidence { white-space: pre-wrap; word-break: break-all; font-size: .72rem; color: #94a3b8; max-width: 340px; max-height: 4.5rem; overflow: auto; }

/* Buttons */
button { cursor: pointer; font: inherit; }
.wg-btn-unblock { background: #334155; color: #e2e8f0; border: 1px solid #475569; border-radius: 5px; padding: .3rem .7rem; }
.wg-btn-unblock:hover { background: #475569; }

/* Login */
.wg-login { max-width: 340px; margin: 8vh auto; background: #1e293b; border: 1px solid #334155; border-radius: 10px; padding: 2rem; text-align: center; }
.wg-login h1 { color: #38bdf8; letter-spacing: .1em; }
.wg-sub { color: #94a3b8; margin-bottom: 1.2rem; font-size: .9rem; }
.wg-login label { display: block; text-align: left; margin: .8rem 0; color: #cbd5e1; font-size: .85rem; }
.wg-login input { width: 100%; margin-top: .3rem; padding: .5rem; background: #0f172a; border: 1px solid #334155; border-radius: 5px; color: #e2e8f0; }
.wg-login button { width: 100%; margin-top: 1rem; padding: .6rem; background: #0284c7; color: #fff; border: none; border-radius: 5px; font-weight: 600; }
.wg-login button:hover { background: #0369a1; }

/* Alerts */
.wg-alert { padding: .6rem .9rem; border-radius: 6px; margin: .8rem 0; font-size: .9rem; }
.wg-alert-error { background: #7f1d1d; color: #fecaca; }
.wg-alert-ok { background: #14532d; color: #bbf7d0; }