/* =============================================================
   主题层：只做品牌定制，组件全部来自 Bootstrap 5.3 + Tabler
   开源组件：Bootstrap (MIT) / Tabler (MIT) / Bootstrap Icons (MIT)
   注意：基础规则在前，响应式覆盖在最后，避免顺序打架
   ============================================================= */

/* ---------- 品牌主色：跟随 logo（墨紫 / 蜜桃 / 薄荷） ---------- */

:root,
[data-bs-theme="light"] {
    --tblr-primary: #7965c8;
    --tblr-primary-rgb: 121, 101, 200;
    --tblr-primary-lt: #eeebfa;
    --tblr-primary-lt-rgb: 238, 235, 250;
    --tblr-primary-darken: #6959b4;
    --tblr-primary-text-emphasis: #5d4fa0;

    --bs-primary: #7965c8;
    --bs-primary-rgb: 121, 101, 200;
    --bs-primary-bg-subtle: #eeebfa;
    --bs-primary-border-subtle: #d9d2f3;
    --bs-primary-text-emphasis: #5d4fa0;

    --app-accent: #7965c8;
    --app-accent-2: #ed8fa6;
    --app-accent-3: #99d8d0;
}

[data-bs-theme="dark"] {
    --tblr-primary: #a795ea;
    --tblr-primary-rgb: 167, 149, 234;
    --tblr-primary-lt: #2e2846;
    --tblr-primary-lt-rgb: 46, 40, 70;
    --tblr-primary-darken: #8e7ad6;
    --tblr-primary-text-emphasis: #c5b9f5;

    --bs-primary: #a795ea;
    --bs-primary-rgb: 167, 149, 234;
    --bs-primary-bg-subtle: #2e2846;
    --bs-primary-border-subtle: #463c6b;
    --bs-primary-text-emphasis: #c5b9f5;

    --app-accent: #a795ea;
    --app-accent-2: #f0a8ba;
    --app-accent-3: #99d8d0;
}

/* ---------- 品牌标识 ---------- */

.brand-logo {
    height: 2.25rem;
    width: auto;
    display: inline-block;
    vertical-align: middle;
    flex: 0 0 auto;
}

.brand-logo-lg {
    height: 3.5rem;
}

.brand-logo-sm {
    height: 1.75rem;
}

/* ---------- 头像 ---------- */

.avatar {
    overflow: hidden;
    flex: 0 0 auto;
}

.avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ---------- 验证前台 ---------- */

.portal-hero {
    min-height: 100vh;
    background:
        radial-gradient(760px 420px at 6% -12%, rgba(var(--tblr-primary-rgb), .22), transparent 62%),
        radial-gradient(640px 420px at 96% -6%, rgba(237, 143, 166, .18), transparent 60%),
        var(--tblr-body-bg);
    background-attachment: fixed;
}

.portal-card {
    border-radius: 1rem;
    box-shadow: 0 1.25rem 2.5rem -1.5rem rgba(0, 0, 0, .45);
}

.theme-tile {
    border-radius: .75rem;
    overflow: hidden;
    height: 100%;
}

.theme-tile .theme-cover {
    height: 8rem;
    display: grid;
    place-items: center;
    font-size: 1.5rem;
    font-weight: 700;
    color: rgba(255, 255, 255, .35);
    background: linear-gradient(135deg, #1c2333, #151a26);
}

/* ---------- 页面头部 ---------- */

.page-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1rem;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
}

.page-head-text {
    min-width: 0;
}

.page-head-actions {
    flex: 0 0 auto;
}

.page-header-title {
    font-size: 1.5rem;
    margin: 0;
}

/* ---------- 兑换码展示 ---------- */

.code-box {
    font-family: var(--bs-font-monospace);
    font-size: .875rem;
    letter-spacing: .04em;
    line-height: 1.8;
}

.code-box code {
    color: var(--tblr-primary);
}

/* ---------- 表格细节 ---------- */

.table > :not(caption) > * > * {
    padding: .6rem .75rem;
}

.table thead th {
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--tblr-secondary);
    white-space: nowrap;
}

.card-table {
    margin-bottom: 0;
}

.table-actions {
    display: flex;
    gap: .35rem;
    flex-wrap: nowrap;
    justify-content: flex-end;
    white-space: nowrap;
}

.empty-state {
    text-align: center;
    color: var(--tblr-secondary);
    padding: 2rem .75rem !important;
}

/* ---------- 细节 ---------- */

.form-label {
    font-size: .8125rem;
    font-weight: 500;
}

.stat-number {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.02em;
}

.code-chip {
    font-family: var(--bs-font-monospace);
    font-size: .8125rem;
}

/* =============================================================
   电脑 / 手机自适应
   ============================================================= */

/* 允许 flex 子项收缩，否则宽表格会把整页撑破导致横向滚动 */
.page,
.page-wrapper,
.page-body,
.page-body > .container-xl,
.topbar > .container-xl {
    min-width: 0;
}

.page-body .card,
.page-body .table-responsive {
    max-width: 100%;
}

@media (max-width: 991.98px) {
    .page-head {
        flex-direction: column;
        align-items: stretch;
    }

    .page-head-actions,
    .page-head-actions .btn {
        width: 100%;
    }
}

@media (max-width: 767.98px) {
    .page-body > .container-xl {
        padding-left: .75rem;
        padding-right: .75rem;
    }

    .topbar {
        padding-left: .75rem;
        padding-right: .75rem;
    }

    .topbar .container-xl {
        padding-left: 0;
        padding-right: 0;
    }

    .page-header-title {
        font-size: 1.25rem;
    }

    .stat-number {
        font-size: 1.4rem;
    }

    .panel {
        padding: 1rem;
    }

    .panel > h2 {
        font-size: 1rem;
    }

    .form-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 575.98px) {
    /* 侧边栏变顶部条后，隐藏站点名只留标识，避免撑破屏幕 */
    .navbar-vertical .brand-name {
        display: none;
    }

    /* 展开后的菜单必须锁在视口宽度内，否则会把整页撑宽、导致无法横向拖动 */
    .navbar-vertical,
    .navbar-vertical > .container-fluid,
    .navbar-vertical .navbar-collapse {
        min-width: 0;
        max-width: 100%;
    }

    .navbar-vertical .navbar-collapse {
        flex-basis: 100%;
        overflow: hidden;
    }

    /* 菜单项横向排列，可左右拖动 */
    .navbar-vertical .navbar-nav {
        flex-direction: row;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        padding-bottom: .25rem;
    }

    /* 不允许压缩，宽度超出后由上面的容器横向滚动 */
    .navbar-vertical .navbar-nav .nav-item {
        flex: 0 0 auto;
        white-space: nowrap;
    }

    .navbar-vertical .nav-item {
        white-space: nowrap;
    }

    .table > :not(caption) > * > * {
        padding: .5rem .5rem;
    }

    /* 手机上不要把中文列压成一字一行，交给表格自身横向滚动 */
    .page-body .table td,
    .page-body .table th {
        white-space: nowrap;
    }

    .table-actions {
        flex-wrap: wrap;
        justify-content: flex-start;
    }
}