/* ===========================================================
   K12Bot 合作公司端 · 全局皮肤（Apple 高级风）
   目标：苹果官网那种高级感——浅色大留白 / SF 字体 / 发丝线边框
   / 柔阴影 / 精致排版。一处定义，全站（现在+将来所有页）自动套用。
   本机无 node/npm，用注入式全局 CSS 覆盖 Filament 默认皮肤。
   字体：优先真 SF（Apple 设备），跨平台用 Inter（SF 的最佳替身）。
   =========================================================== */

:root {
    --pp-bg: #f5f5f7;          /* Apple 标志性浅灰 */
    --pp-card: #ffffff;
    --pp-text: #1d1d1f;        /* Apple 主文字 */
    --pp-text2: #6e6e73;       /* Apple 次文字 */
    --pp-text3: #86868b;
    --pp-line: #e6e6eb;        /* 发丝线 */
    --pp-line-strong: #d2d2d7;
    --pp-blue: #0071e3;        /* Apple 蓝 */
    --pp-blue-d: #0064cc;
    --pp-tintblue: rgba(0, 113, 227, .08);
    --pp-radius: 22px;
    --pp-radius-sm: 13px;
    --pp-shadow: 0 1px 2px rgba(20, 28, 45, .04), 0 10px 30px rgba(20, 28, 45, .06);
    --pp-shadow-sm: 0 1px 2px rgba(20, 28, 45, .05);
    --pp-font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
        "Inter", "PingFang SC", "Microsoft YaHei", "Segoe UI", system-ui, sans-serif;
}

/* ---------- 全局底色 / 苹果字体 / 抗锯齿 ---------- */
html, body,
.fi-body,
.fi-layout,
.fi-main,
.fi-sidebar,
.fi-topbar,
button, input, select, textarea, .fi *,
.fi-ta, .fi-section, .fi-modal {
    font-family: var(--pp-font) !important;
}
body,
.fi-body,
.fi-layout {
    background: linear-gradient(180deg, #eaf0f9 0%, #f1f3f8 26%, #f5f5f7 60%) !important;
    background-attachment: fixed !important;
    color: var(--pp-text) !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    letter-spacing: .01em;
}
/* 主内容区透出渐变底（不要再盖一层死灰） */
.fi-main { background: transparent !important; }

/* ---------- 顶栏：白色玻璃拟态（apple.com 导航感） ---------- */
.fi-topbar,
.fi-topbar > nav,
.fi-topbar .fi-topbar-ctn {
    background-color: rgba(255, 255, 255, .72) !important;
    -webkit-backdrop-filter: saturate(180%) blur(20px) !important;
    backdrop-filter: saturate(180%) blur(20px) !important;
    border-bottom: 1px solid var(--pp-line) !important;
    box-shadow: none !important;
}
.fi-topbar a, .fi-topbar button, .fi-topbar svg,
.fi-topbar .fi-icon-btn, .fi-topbar .fi-dropdown-trigger {
    color: var(--pp-text) !important;
}
.fi-topbar .fi-global-search-field input {
    background: #f5f5f7 !important;
    color: var(--pp-text) !important;
    border: 1px solid transparent !important;
    border-radius: 980px !important;
}

/* 顶栏品牌字：加重 + 收紧字距（苹果味） */
.fi-topbar .fi-logo,
.fi-topbar a[href][wire\:navigate] {
    font-weight: 600 !important;
    letter-spacing: -.01em !important;
}

/* ---------- 侧栏：白底 + 发丝线 + 圆润激活态 ---------- */
.fi-sidebar,
.fi-sidebar-nav {
    background: rgba(255, 255, 255, .82) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    backdrop-filter: blur(20px) !important;
    border-right: 1px solid var(--pp-line) !important;
}
.fi-sidebar-group-label {
    color: var(--pp-text3) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: .04em !important;
    text-transform: uppercase;
}
.fi-sidebar-item-button {
    border-radius: 10px !important;
    font-size: 14px !important;
    font-weight: 450 !important;
    color: var(--pp-text) !important;
    transition: background .15s ease !important;
}
.fi-sidebar-item-button:hover {
    background: rgba(0, 0, 0, .04) !important;
}
.fi-sidebar-item.fi-active > .fi-sidebar-item-button,
.fi-sidebar-item-button[aria-current="page"] {
    background: var(--pp-tintblue) !important;
    color: var(--pp-blue) !important;
    font-weight: 600 !important;
}
.fi-sidebar-item.fi-active > .fi-sidebar-item-button svg {
    color: var(--pp-blue) !important;
}

/* ---------- 页面标题：大、收紧字距 ---------- */
.fi-header-heading,
.fi-page-heading,
h1.fi-header-heading {
    font-weight: 700 !important;
    letter-spacing: -.022em !important;
    color: var(--pp-text) !important;
}
.fi-header-subheading,
.fi-breadcrumbs {
    color: var(--pp-text2) !important;
}

/* ---------- 卡片 / 区块 / 表容器 / 统计卡 / 弹窗：白卡大圆角柔阴影 ---------- */
.fi-section,
.fi-ta-ctn,
.fi-wi-stats-overview-stat,
.fi-fo-section,
.fi-wi-panel,
.fi-modal-window,
.fi-dropdown-panel {
    border-radius: var(--pp-radius) !important;
    box-shadow: var(--pp-shadow) !important;
    border: 1px solid var(--pp-line) !important;
    background: var(--pp-card) !important;
    overflow: hidden;
}

/* ---------- 表格：大留白、发丝线分隔、表头小字大写 ---------- */
.fi-ta-table { border-collapse: separate !important; }
.fi-ta-header-cell {
    background: #fcfcfd !important;
    border-bottom: 1px solid var(--pp-line) !important;
}
.fi-ta-header-cell-label {
    color: var(--pp-text3) !important;
    font-weight: 600 !important;
    font-size: 11.5px !important;
    letter-spacing: .03em !important;
    text-transform: uppercase;
}
.fi-ta-cell {
    vertical-align: top !important;
    padding-top: 14px !important;
    padding-bottom: 14px !important;
    border-bottom: 1px solid #f0f0f3 !important;
    font-size: 13px !important;
}
.fi-ta-row {
    transition: background .12s ease !important;
}
.fi-ta-row:hover {
    background: #fafafc !important;
}

/* ---------- 统计卡：超大 SF 数字 ---------- */
.fi-wi-stats-overview-stat {
    padding: 22px 24px !important;
}
.fi-wi-stats-overview-stat-value {
    font-size: 34px !important;
    font-weight: 600 !important;
    letter-spacing: -.02em !important;
    color: var(--pp-text) !important;
    line-height: 1.1 !important;
}
.fi-wi-stats-overview-stat-label {
    color: var(--pp-text2) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
}
.fi-wi-stats-overview-stat-description {
    color: var(--pp-text3) !important;
    font-size: 12px !important;
}

/* ---------- 按钮：苹果蓝、药丸圆角、轻量 ---------- */
.fi-btn {
    border-radius: 980px !important;
    font-weight: 500 !important;
    letter-spacing: -.01em !important;
    box-shadow: none !important;
}
.fi-btn-color-primary {
    background-color: var(--pp-blue) !important;
    border-color: var(--pp-blue) !important;
}
.fi-btn-color-primary:hover {
    background-color: var(--pp-blue-d) !important;
}

/* ---------- 输入 / 下拉 / 筛选：圆角发丝线 ---------- */
.fi-input,
.fi-select-input,
.fi-fo-field-wrp .fi-input-wrp {
    border-radius: var(--pp-radius-sm) !important;
    border-color: var(--pp-line-strong) !important;
    box-shadow: none !important;
}
.fi-input-wrp:focus-within {
    border-color: var(--pp-blue) !important;
    box-shadow: 0 0 0 4px var(--pp-tintblue) !important;
}

/* 徽章圆润 */
.fi-badge {
    border-radius: 980px !important;
    font-weight: 500 !important;
}

/* 分页 / 链接色 */
a, .fi-link { color: var(--pp-blue) !important; }

/* 滚动条（细、苹果味） */
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: rgba(0,0,0,.18); border-radius: 980px; border: 2px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,.30); background-clip: content-box; }
*::-webkit-scrollbar-track { background: transparent; }

/* ---------- 平铺筛选区（AboveContent）：白卡、舒展留白、圆角下拉 ---------- */
.fi-ta-filters {
    padding: 18px 22px !important;
    background: rgba(255,255,255,.7) !important;
    border-bottom: 1px solid var(--pp-line) !important;
}
.fi-ta-filters .fi-fo-field-wrp-label,
.fi-ta-filters label {
    font-size: 12px !important;
    color: var(--pp-text3) !important;
    font-weight: 600 !important;
    letter-spacing: .02em !important;
}
/* KPI 卡片区与表格之间留白 */
.pp-kpi-wrap { margin-bottom: 6px; }

/* 让整页内容更舒展 */
.fi-page > section, .fi-page .fi-ta { margin-top: 2px; }

/* ---------- 截图缩略图（设备页）：圆角 + 柔边 ---------- */
.pp-shot {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    margin-right: 8px;
}
.pp-shot img {
    width: 48px;
    height: 64px;
    object-fit: cover;
    border-radius: 9px;
    border: 1px solid var(--pp-line);
    background: #f5f5f7;
    cursor: pointer;
    box-shadow: var(--pp-shadow-sm);
    transition: transform .14s ease, box-shadow .14s ease;
}
.pp-shot img:hover {
    transform: translateY(-1px) scale(1.03);
    box-shadow: 0 6px 18px rgba(0,0,0,.12);
}
.pp-shot .pp-shot-label {
    font-size: 9px;
    color: var(--pp-text3);
    letter-spacing: .02em;
}