/* ============================================================
   AgentDeck — 深色黑白高對比主題（dark brutalist mono）
   規則：#0a0a0a 底、#fff 主文字、#aaa 次要、#333 細節線；
   實心白 = 主要動作/啟用狀態，黑底白框 = 次要/未啟用，
   卡片 = 2px 白框 + 白色硬陰影。品牌識別 = 外星人 logo（alien.png）。
   （bootstrap 走 data-bs-theme="dark"，這裡再覆寫成純黑白）
   ============================================================ */

html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, 'Noto Sans TC', sans-serif;
    background: #0a0a0a;
    color: #fff;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 800;
    letter-spacing: .02em;
    color: #fff;
}

h1 { border-bottom: 3px solid #fff; display: inline-block; padding-bottom: .15rem; }

a, .btn-link {
    color: #fff;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}

    a:hover, .btn-link:hover { color: #fff; background: #222; }

.text-muted, .text-secondary { color: #aaa !important; }

/* ---- buttons: white/black inversion ---- */
.btn { border-radius: 0; font-weight: 700; }

.btn-primary, .btn-success {
    color: #000;
    background-color: #fff;
    border: 2px solid #fff;
}

    .btn-primary:hover, .btn-primary:active, .btn-primary:focus,
    .btn-success:hover, .btn-success:active, .btn-success:focus {
        color: #fff;
        background-color: #000;
        border-color: #fff;
    }

.btn-primary:disabled, .btn-success:disabled { background:#555; border-color:#555; color:#000; }

.btn-outline-primary, .btn-outline-secondary, .btn-outline-success,
.btn-outline-danger, .btn-outline-warning {
    color: #fff;
    background: transparent;
    border: 2px solid #fff;
}

    .btn-outline-primary:hover, .btn-outline-secondary:hover, .btn-outline-success:hover,
    .btn-outline-danger:hover, .btn-outline-warning:hover {
        color: #000;
        background: #fff;
        border-color: #fff;
    }

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus,
.form-control:focus, .form-check-input:focus, .form-select:focus {
    box-shadow: 0 0 0 3px #000, 0 0 0 5px #fff;
    border-color: #fff;
}

/* ---- badges: 實心白=啟用/成功、黑底白框=中性、雙線框=注意、外圈=錯誤 ---- */
.badge { border-radius: 0; font-weight: 700; }

.badge.bg-primary, .badge.bg-success, .badge.bg-danger, .badge.bg-dark {
    background-color: #fff !important;
    color: #000 !important;
}

.badge.bg-secondary, .badge.bg-info, .badge.bg-light {
    background-color: transparent !important;
    color: #fff !important;
    border: 1.5px solid #fff;
}

.badge.bg-warning {
    background-color: transparent !important;
    color: #fff !important;
    border: 3px double #fff;
}

.badge.bg-danger { outline: 1.5px solid #fff; outline-offset: 2px; }

/* ---- cards: 白框 + 白色硬陰影 ---- */
.card {
    background: #0a0a0a;
    border: 2px solid #fff;
    border-radius: 0;
    box-shadow: 5px 5px 0 #fff;
    color: #fff;
}

.card-header {
    background: #fff;
    color: #000;
    font-weight: 700;
    border-bottom: 2px solid #fff;
    border-radius: 0 !important;
}

    .card-header a { color: #000; }

.card-footer { background: #0a0a0a; border-top: 2px solid #fff; color: #fff; }

.list-group-item {
    background: #0a0a0a;
    color: #fff;
    border-color: #fff;
    border-radius: 0 !important;
}

    .list-group-item:hover { background: #222; color: #fff; }

    .list-group-item.active {
        background: #fff;
        border-color: #fff;
        color: #000;
    }

/* ---- tables ---- */
.table {
    --bs-table-bg: transparent;
    --bs-table-color: #fff;
    --bs-table-hover-bg: #1e1e1e;
    --bs-table-hover-color: #fff;
    border-color: #fff;
    color: #fff;
}

    .table thead th {
        background: #fff;
        color: #000;
        border-color: #fff;
        font-weight: 700;
    }

    .table td, .table th { border-color: #444; }

/* ---- forms ---- */
.form-control, .form-select {
    background-color: #000;
    border: 2px solid #fff;
    border-radius: 0;
    color: #fff;
}

    .form-control::placeholder { color: #888; }

    .form-control:focus, .form-select:focus { background-color: #000; color: #fff; }

.form-check-input {
    background-color: #000;
    border: 2px solid #fff;
    border-radius: 0;
}

    .form-check-input:checked { background-color: #fff; border-color: #fff; }

.form-switch .form-check-input { border-radius: 2em; }

/* ---- alerts ---- */
.alert { border-radius: 0; border: 2px solid #fff; color: #fff; background: #0a0a0a; }

.alert-danger { background: #fff; color: #000; }

.alert-success { border-width: 2px; }

.alert-warning { border: 3px double #fff; }

.alert-light { border: 1px dashed #888; color: #aaa; background: transparent; }

/* ---- misc ---- */
.content { padding-top: 1.1rem; }

h1:focus { outline: none; }

.valid.modified:not([type=checkbox]) { outline: 2px solid #fff; }

.invalid { outline: 2px dashed #fff; }

.validation-message { color: #fff; font-weight: 700; }

.blazor-error-boundary {
    background: #fff;
    padding: 1rem;
    color: #000;
    border: 4px double #000;
}

    .blazor-error-boundary::after { content: "An error has occurred."; }

.darker-border-checkbox.form-check-input { border-color: #fff; }

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: #888;
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* ---- brand logo（白圓底黑外星人，深色背景通用） ---- */
.brand-logo {
    background: #fff;
    border-radius: 50%;
    border: 2px solid #fff;
    object-fit: cover;
}

/* ── 數學式（MarkdownRenderer + KaTeX，2026-08-16）──────────────────
   區塊公式一律用 <span>（避免 <div> 落在 <p> 裡的不合法巢狀），
   所以 display:block 要靠 CSS 補。長公式在手機上要能橫向捲。 */
.math-display {
    display: block;
    margin: .8rem 0;
    overflow-x: auto;
    overflow-y: hidden;
    text-align: center;
}
.math-inline { white-space: nowrap; }
/* KaTeX 預設是給淺色底設計的，這站是深色 */
.katex { color: inherit; font-size: 1.05em; }