/* ============================================================
   NetlistVCS — 深色黑白高對比主題（dark brutalist mono）
   與 LTS_Passport / AgentDeck / ET-ASF 共用同一套視覺語彙。
   正本語彙出自 LTS_Passport/wwwroot/app.css —— 改配色請一併考慮那邊的一致性
   （目前是四份手工複製，沒有單一事實來源）。
   規則：#0a0a0a 底、#fff 主文字、#aaa 次要、#333 細節線；
   實心白 = 主要動作/啟用狀態，黑底白框 = 次要/未啟用，
   卡片 = 2px 白框 + 白色硬陰影。品牌識別 = 外星人 logo（alien.png）。
   （bootstrap 走 data-bs-theme="dark"，這裡再覆寫成純黑白）

   ⚠️ 本專案「不用」CSS isolation（見 CLAUDE.md），所以 Passport 那邊分散在
   MainLayout.razor.css / NavMenu.razor.css 的規則全部攤平在本檔下半部，
   且 ::deep 已移除。兩個 .top-row 靠 `.sidebar .top-row` 後代選擇器區隔——
   Passport 是靠 scoping，攤平後若不區隔會互相覆蓋。
   ============================================================ */

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;
}

/* ============================================================
   Layout —— 由 LTS_Passport 的 MainLayout.razor.css / NavMenu.razor.css
   攤平而來（本專案無 CSS isolation，::deep 已移除）。
   ============================================================ */

.page {
    position: relative;
    display: flex;
    flex-direction: column;
}

main {
    flex: 1;
}

.sidebar {
    background: #000;
    border-right: 1px solid #333;
}

/* 主內容區的頂列（帳號區塊）。側欄的品牌列是 `.sidebar .top-row`，見下方——
   兩者刻意不同：這條是 #0a0a0a + 2px 白線，那條是純黑 + 1px #333 細線。 */
.top-row {
    background-color: #0a0a0a;
    border-bottom: 2px solid #fff;
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

    .top-row a, .top-row .btn-link {
        white-space: nowrap;
        margin-left: 1.5rem;
        text-decoration: none;
    }

    .top-row a:hover, .top-row .btn-link:hover {
        text-decoration: underline;
        background: none;
    }

@media (max-width: 640.98px) {
    .top-row {
        justify-content: space-between;
    }

    .top-row a, .top-row .btn-link {
        margin-left: 0;
    }
}

@media (min-width: 641px) {
    .page {
        flex-direction: row;
    }

    .sidebar {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    .top-row {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .top-row, article {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}

/* ---- NavMenu（側欄）---- */
.navbar-toggler {
    appearance: none;
    cursor: pointer;
    width: 3.5rem;
    height: 2.5rem;
    color: white;
    position: absolute;
    top: 0.5rem;
    right: 1rem;
    border: 1px solid #fff;
    background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='white' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>") no-repeat center/1.75rem rgba(255, 255, 255, 0.1);
}

.navbar-toggler:checked {
    background-color: rgba(255, 255, 255, 0.5);
}

/* 側欄的品牌列 —— 純黑 + 細灰線，跟主內容區的 .top-row 區隔開 */
.sidebar .top-row {
    min-height: 3.5rem;
    height: auto;
    background-color: #000;
    border-bottom: 1px solid #333;
    justify-content: flex-start;
}

    .sidebar .top-row a {
        margin-left: 0;
    }

.navbar-brand {
    font-size: 1.1rem;
    color: #fff;
}

.brand-text {
    font-weight: 900;
    letter-spacing: .18em;
    color: #fff;
}

.bi {
    display: inline-block;
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.75rem;
    top: -1px;
    background-size: cover;
}

.nav-item {
    font-size: 0.9rem;
    padding-bottom: 0.5rem;
}

    .nav-item:first-of-type {
        padding-top: 1rem;
    }

    .nav-item:last-of-type {
        padding-bottom: 1rem;
    }

    .nav-item .nav-link {
        color: #d7d7d7;
        background: none;
        border: none;
        border-radius: 4px;
        height: 3rem;
        display: flex;
        align-items: center;
        line-height: 3rem;
        width: 100%;
    }

/* active 反白；圖示是白色 SVG，跟著反轉成黑 */
.nav-item a.active {
    background-color: #fff;
    color: #000;
    border-radius: 0;
    font-weight: 700;
}

    .nav-item a.active .bi {
        filter: invert(1);
    }

.nav-item .nav-link:hover {
    background-color: rgba(255, 255, 255, 0.15);
    color: #fff;
}

.nav-scrollable {
    display: none;
}

.navbar-toggler:checked ~ .nav-scrollable {
    display: block;
}

@media (min-width: 641px) {
    .navbar-toggler {
        display: none;
    }

    .nav-scrollable {
        /* 永遠展開；不要捲動（會蓋掉頂列的展開/收合） */
        display: block;
        height: calc(100vh - 3.5rem);
        overflow-y: auto;
    }
}

/* ---- 錯誤列：Blazor 預設是淺黃色，跟主題完全不合，改成黑白 ---- */
#blazor-error-ui {
    color-scheme: dark only;
    background: #fff;
    color: #000;
    font-weight: 700;
    bottom: 0;
    box-shadow: 0 -2px 0 #000;
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui a { color: #000; }

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

/* ============================================================
   Nav icons —— 由 Bootstrap Icons 1.11.3 原始 SVG 產生（fill='white'）。
   Passport 沒有 folder2-open / box-arrow-in-right，故取自上游而非憑記憶手寫。
   ============================================================ */
.bi-folder2-open-nav-menu {
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'> <path d='M1 3.5A1.5 1.5 0 0 1 2.5 2h2.764c.958 0 1.76.56 2.311 1.184C7.985 3.648 8.48 4 9 4h4.5A1.5 1.5 0 0 1 15 5.5v.64c.57.265.94.876.856 1.546l-.64 5.124A2.5 2.5 0 0 1 12.733 15H3.266a2.5 2.5 0 0 1-2.481-2.19l-.64-5.124A1.5 1.5 0 0 1 1 6.14zM2 6h12v-.5a.5.5 0 0 0-.5-.5H9c-.964 0-1.71-.629-2.174-1.154C6.374 3.334 5.82 3 5.264 3H2.5a.5.5 0 0 0-.5.5zm-.367 1a.5.5 0 0 0-.496.562l.64 5.124A1.5 1.5 0 0 0 3.266 14h9.468a1.5 1.5 0 0 0 1.489-1.314l.64-5.124A.5.5 0 0 0 14.367 7z'/> </svg>");
}

.bi-box-arrow-in-right-nav-menu {
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'> <path fill-rule='evenodd' d='M6 3.5a.5.5 0 0 1 .5-.5h8a.5.5 0 0 1 .5.5v9a.5.5 0 0 1-.5.5h-8a.5.5 0 0 1-.5-.5v-2a.5.5 0 0 0-1 0v2A1.5 1.5 0 0 0 6.5 14h8a1.5 1.5 0 0 0 1.5-1.5v-9A1.5 1.5 0 0 0 14.5 2h-8A1.5 1.5 0 0 0 5 3.5v2a.5.5 0 0 0 1 0z'/> <path fill-rule='evenodd' d='M11.854 8.354a.5.5 0 0 0 0-.708l-3-3a.5.5 0 1 0-.708.708L10.293 7.5H1.5a.5.5 0 0 0 0 1h8.793l-2.147 2.146a.5.5 0 0 0 .708.708z'/> </svg>");
}

.bi-people-fill-nav-menu {
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'> <path d='M7 14s-1 0-1-1 1-4 5-4 5 3 5 4-1 1-1 1zm4-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6m-5.784 6A2.24 2.24 0 0 1 5 13c0-1.355.68-2.75 1.936-3.72A6.3 6.3 0 0 0 5 9c-4 0-5 3-5 4s1 1 1 1zM4.5 8a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5'/> </svg>");
}

.bi-house-door-fill-nav-menu {
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'> <path d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5'/> </svg>");
}
/* ============================================================
   專案特有 —— VersionView 的 Excel 式儲存格內編輯（v1.1.1）。
   原本是藍底白卡的配色，這裡改成黑白主題：欄位平時透明融入表格，
   hover/focus 才浮出白框（沿用「黑底白框 = 可互動」的語彙）。
   ============================================================ */
.comment-cell-input {
    width: 100%;
    border: 1px solid transparent;
    border-radius: 0;
    background: transparent;
    font-size: 0.85em;
    padding: 1px 4px;
    color: #fff;
}

    .comment-cell-input:hover {
        border-color: #fff;
        background: #000;
    }

    .comment-cell-input:focus {
        border-color: #fff;
        background: #000;
        color: #fff;
        outline: none;
        box-shadow: 0 0 0 2px #000, 0 0 0 4px #fff;
    }

    .comment-cell-input.cleared {
        color: #888;
        text-decoration: line-through;
    }

        .comment-cell-input.cleared:focus {
            color: #fff;
            text-decoration: none;
        }