/*
 * iOS 风格主题覆盖层（扁平化 / 白灰主题 / 圆角卡片）
 * 仅做视觉覆盖，布局与交互仍由 Bootstrap 5 负责，业务模板无需改动。
 */

:root {
    --ios-bg: #f2f2f7;
    --ios-card: #ffffff;
    --ios-separator: rgba(60, 60, 67, .08);
    --ios-label: #1c1c1e;
    --ios-secondary: rgba(60, 60, 67, .6);
    --ios-tertiary: rgba(60, 60, 67, .35);
    --ios-tint: #007aff;
    --ios-green: #34c759;
    --ios-red: #ff3b30;
    --ios-orange: #ff9500;
    --ios-gray: #8e8e93;
    --ios-blue-light: #5ac8fa;
    --ios-radius: 14px;
    --ios-radius-sm: 10px;
    --ios-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 6px 20px rgba(0, 0, 0, .045);
    --ios-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
        "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
    --bs-body-font-family: var(--ios-font);
    --bs-body-color: var(--ios-label);
    --bs-body-bg: var(--ios-bg);
    --bs-border-radius: var(--ios-radius-sm);
    --bs-link-color: var(--ios-tint);
    --bs-link-hover-color: #0062cc;
}

* {
    -webkit-tap-highlight-color: transparent;
    scrollbar-width: thin;
    scrollbar-color: rgba(60, 60, 67, .25) transparent;
}
*::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
*::-webkit-scrollbar-thumb {
    background: rgba(60, 60, 67, .22);
    border-radius: 999px;
}
*::-webkit-scrollbar-thumb:hover {
    background: rgba(60, 60, 67, .35);
}
*::-webkit-scrollbar-track {
    background: transparent;
}

body {
    background: var(--ios-bg);
    color: var(--ios-label);
    font-family: var(--ios-font);
    font-size: .9rem;
    letter-spacing: -0.003em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

::selection {
    background: rgba(0, 122, 255, .18);
}

/* ================= 顶部导航：毛玻璃 ================= */
.navbar.ios-nav {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: rgba(255, 255, 255, .82);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid var(--ios-separator);
    padding: .55rem 0;
}

.ios-brand {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    font-weight: 600;
    font-size: .95rem;
    letter-spacing: -0.01em;
    color: var(--ios-label);
}

.ios-brand-dot {
    width: 22px;
    height: 22px;
    border-radius: 7px;
    background: linear-gradient(145deg, #2ac0ff, var(--ios-tint));
    box-shadow: 0 2px 6px rgba(0, 122, 255, .35);
    flex: 0 0 auto;
}

/* 导航项做成胶囊（iOS 标签栏观感） */
.ios-nav .navbar-nav {
    gap: .2rem;
}
.ios-nav .nav-link {
    color: var(--ios-secondary);
    font-weight: 500;
    font-size: .875rem;
    padding: .35rem .8rem;
    border-radius: 9px;
    transition: background-color .18s ease, color .18s ease;
}
.ios-nav .nav-link:hover {
    color: var(--ios-label);
    background: rgba(60, 60, 67, .06);
}
.ios-nav .nav-link.active {
    color: var(--ios-tint);
    background: rgba(0, 122, 255, .1);
}

.ios-user {
    font-size: .82rem;
    color: var(--ios-secondary);
    padding: .3rem .7rem;
    background: var(--ios-bg);
    border-radius: 999px;
}

/* ================= 内容区 ================= */
.ios-main {
    max-width: 1440px;
    margin: 0 auto;
    padding: 1.5rem 1.25rem 3rem;
}

/* ================= 卡片 ================= */
.card {
    background: var(--ios-card);
    border: 0;
    border-radius: var(--ios-radius);
    box-shadow: var(--ios-shadow);
    overflow: hidden;
}
.card-body {
    padding: 1.05rem 1.15rem;
}
.card-header,
.card-footer {
    background: transparent;
    border-bottom: 1px solid var(--ios-separator);
    padding: .8rem 1.15rem;
    font-size: .875rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--ios-label);
}
.card-footer {
    border-bottom: 0;
    border-top: 1px solid var(--ios-separator);
    padding: .65rem 1.15rem;
}
.card-header:first-child {
    border-radius: 0;
}

/* 统计卡 */
.ios-stat .card-body {
    padding: 1.15rem 1rem;
}
.ios-stat-label {
    font-size: .78rem;
    font-weight: 500;
    color: var(--ios-secondary);
}
.ios-stat-value {
    font-size: 1.85rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.25;
    margin-top: .1rem;
}

/* ================= 表格 ================= */
.table {
    --bs-table-bg: transparent;
    --bs-table-striped-bg: transparent;
    --bs-table-striped-color: var(--ios-label);
    --bs-table-hover-bg: rgba(0, 122, 255, .045);
    --bs-table-hover-color: var(--ios-label);
    --bs-table-color: var(--ios-label);
    margin: 0;
    border-color: var(--ios-separator);
}
.table > :not(caption) > * > * {
    padding: .68rem 1.15rem;
    border-bottom-width: 1px;
    border-color: var(--ios-separator);
    background-color: transparent;
}
.table thead th {
    font-size: .78rem;
    font-weight: 600;
    color: var(--ios-secondary);
    white-space: nowrap;
    background: #fafafc;
    border-bottom: 1px solid var(--ios-separator);
}
.table tbody tr:last-child > * {
    border-bottom: 0;
}
.table tbody tr {
    transition: background-color .12s ease;
}
.table td {
    vertical-align: middle;
    font-size: .855rem;
}
/* 去掉 Bootstrap 斑马纹，改为纯净分隔线 */
.table-striped > tbody > tr:nth-of-type(odd) > * {
    --bs-table-accent-bg: transparent;
    background-color: transparent;
}

/* ================= 徽章（iOS 色板 + 胶囊） ================= */
.badge {
    border-radius: 999px;
    font-weight: 500;
    font-size: .735rem;
    letter-spacing: .01em;
    padding: .32em .7em;
}
.bg-success {
    background-color: var(--ios-green) !important;
}
.bg-danger {
    background-color: var(--ios-red) !important;
}
.bg-warning {
    background-color: var(--ios-orange) !important;
}
.bg-secondary {
    background-color: var(--ios-gray) !important;
}
.bg-info {
    background-color: var(--ios-blue-light) !important;
    color: #0b6a86 !important;
}
.badge.bg-light {
    background-color: var(--ios-bg) !important;
    color: var(--ios-secondary) !important;
    border: 0;
    font-weight: 500;
}

/* ================= 表单 ================= */
.form-label {
    font-size: .8rem;
    font-weight: 500;
    color: var(--ios-secondary);
    margin-bottom: .3rem;
}
.form-control,
.form-select {
    border: 0;
    background-color: var(--ios-bg);
    border-radius: var(--ios-radius-sm);
    color: var(--ios-label);
    box-shadow: inset 0 0 0 1px transparent;
    transition: box-shadow .15s ease, background-color .15s ease;
}
.form-control::placeholder {
    color: var(--ios-tertiary);
}
.form-control:focus,
.form-select:focus {
    background-color: #fff;
    border: 0;
    box-shadow: inset 0 0 0 1.5px var(--ios-tint), 0 0 0 4px rgba(0, 122, 255, .12);
}
.form-control-sm,
.form-select-sm {
    font-size: .84rem;
    padding: .42rem .7rem;
}
.form-select {
    /* 箭头必须显式 no-repeat 并定位，否则会平铺成多列；右侧留出 padding 避免文字压到箭头 */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%238e8e93' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.6' d='M3.5 6.25 8 10.75l4.5-4.5'/%3e%3c/svg%3e");
    /* 必须干掉原生外观，否则浏览器自带箭头会和背景箭头叠加成两列 */
    -webkit-appearance: none;
    appearance: none;
    background-repeat: no-repeat;
    background-position: right .62rem center;
    background-size: .85rem;
    padding-right: 1.9rem;
    cursor: pointer;
}
.form-text {
    font-size: .76rem;
    color: var(--ios-tertiary);
    margin-top: .3rem;
}
input[type="date"].form-control {
    min-height: 2.05rem;
}
textarea.form-control {
    line-height: 1.55;
}

/* ================= 按钮（扁平、无描边、系统色） ================= */
.btn {
    border: 0;
    border-radius: var(--ios-radius-sm);
    font-weight: 500;
    font-size: .855rem;
    letter-spacing: -0.008em;
    padding: .5rem 1rem;
    transition: background-color .15s ease, transform .08s ease, opacity .15s ease;
}
.btn:active {
    transform: scale(.975);
}
.btn:focus {
    outline: none;
    box-shadow: 0 0 0 4px rgba(0, 122, 255, .18);
}
.btn-sm {
    font-size: .8rem;
    padding: .35rem .75rem;
    border-radius: 8px;
}
.btn-primary {
    background: var(--ios-tint);
    color: #fff;
}
.btn-primary:hover,
.btn-primary:focus {
    background: #0066d6;
    color: #fff;
}
.btn-secondary {
    background: var(--ios-bg);
    color: var(--ios-label);
}
.btn-secondary:hover {
    background: #e8e8ee;
    color: var(--ios-label);
}
.btn-success {
    background: var(--ios-green);
}
.btn-danger {
    background: var(--ios-red);
    color: #fff;
}
.btn-danger:hover {
    background: #e0331f;
    color: #fff;
}
.btn-warning {
    background: var(--ios-orange);
    color: #fff;
}
.btn-warning:hover {
    background: #e08600;
    color: #fff;
}
/* 描边按钮改为柔和色块（扁平化） */
.btn-outline-primary {
    background: rgba(0, 122, 255, .1);
    color: var(--ios-tint);
    border: 0;
}
.btn-outline-primary:hover {
    background: rgba(0, 122, 255, .18);
    color: #0062cc;
}
.btn-outline-secondary {
    background: var(--ios-bg);
    color: var(--ios-secondary);
    border: 0;
}
.btn-outline-secondary:hover {
    background: #e8e8ee;
    color: var(--ios-label);
}
.btn-outline-danger {
    background: rgba(255, 59, 48, .1);
    color: var(--ios-red);
    border: 0;
}
.btn-outline-danger:hover {
    background: rgba(255, 59, 48, .18);
    color: #d62c1c;
}
.btn-outline-light {
    background: var(--ios-bg);
    color: var(--ios-secondary);
    border: 0;
}
.btn-outline-light:hover {
    background: #e8e8ee;
    color: var(--ios-label);
}
.btn-link {
    color: var(--ios-tint);
    text-decoration: none;
}

/* ================= 提示条 ================= */
.alert {
    border: 0;
    border-radius: 12px;
    font-size: .855rem;
    padding: .85rem 1.05rem;
}
.alert-success {
    background: rgba(52, 199, 89, .13);
    color: #248a3d;
}
.alert-danger {
    background: rgba(255, 59, 48, .1);
    color: #c9251c;
}
.alert-warning {
    background: rgba(255, 149, 0, .14);
    color: #9a6200;
}
.alert-info {
    background: rgba(0, 122, 255, .1);
    color: #0062cc;
}
.alert .btn-close {
    opacity: .4;
    padding: .8rem;
}

/* ================= 分页 ================= */
.pagination {
    gap: .15rem;
}
.page-link {
    border: 0;
    background: transparent;
    color: var(--ios-secondary);
    border-radius: 8px !important;
    font-size: .82rem;
    padding: .3rem .62rem;
}
.page-link:hover {
    background: rgba(60, 60, 67, .06);
    color: var(--ios-label);
}
.page-item.active .page-link {
    background: var(--ios-tint);
    color: #fff;
}

/* ================= 其他细节 ================= */
code,
.mono {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}
code {
    background: var(--ios-bg);
    color: #3a3a3c;
    padding: .2rem .45rem;
    border-radius: 6px;
    font-size: .8rem;
}
.mono {
    font-size: .82rem;
    color: #3a3a3c;
}
.text-muted {
    color: var(--ios-secondary) !important;
}
.text-success {
    color: var(--ios-green) !important;
}
.text-danger {
    color: var(--ios-red) !important;
}
hr {
    border: 0;
    border-top: 1px solid var(--ios-separator);
    opacity: 1;
}

/* ================= 登录页 ================= */
.ios-login {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(1100px 520px at 50% -8%, #e9f1fb 0%, rgba(233, 241, 251, 0) 62%),
        var(--ios-bg);
    padding: 1.5rem;
}
.ios-login-card {
    width: 100%;
    max-width: 372px;
}
.ios-app-icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    margin: 0 auto .85rem;
    background: linear-gradient(145deg, #2ac0ff, var(--ios-tint));
    box-shadow: 0 8px 20px rgba(0, 122, 255, .32);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: -0.04em;
}
.ios-login-title {
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: -0.015em;
    text-align: center;
    margin-bottom: 1.4rem;
}
.ios-login-foot {
    margin-top: 1.1rem;
    text-align: center;
    font-size: .76rem;
    color: var(--ios-tertiary);
}

/* ================= 响应式 ================= */
@media (max-width: 991.98px) {
    .ios-main {
        padding: 1.1rem .85rem 2.5rem;
    }
    .ios-nav .nav-link {
        padding: .3rem .6rem;
        font-size: .82rem;
    }
    .table > :not(caption) > * > * {
        padding: .6rem .8rem;
    }
}