/* ============================================================
   尔东广告工单系统 — 后台视觉主题
   基调：深海军蓝侧边栏（唯一的重笔）+ 冷灰底白卡片 + 企业蓝
   ============================================================ */

:root {
    --ed-sidebar-bg: #101c2e;
    --ed-sidebar-bg-2: #16263d;
    --ed-sidebar-text: rgba(255, 255, 255, 0.78);
    --ed-sidebar-muted: rgba(255, 255, 255, 0.42);
    --ed-sidebar-hover: rgba(255, 255, 255, 0.07);
    --ed-sidebar-active: rgba(59, 130, 246, 0.22);
    --ed-content-bg: #f3f5f9;
    --ed-card-border: #e4e8ef;
    --ed-shadow: 0 1px 2px rgba(15, 30, 60, 0.04), 0 4px 16px rgba(15, 30, 60, 0.05);
}

/* ---------- 字体 ---------- */

body.fi-body,
.fi-simple-layout {
    font-family: 'Inter', 'PingFang SC', 'HarmonyOS Sans SC', 'MiSans',
        'Microsoft YaHei', 'Noto Sans CJK SC', system-ui, sans-serif;
}

/* ---------- 内容区底色，让白卡片浮起来 ---------- */

html:not(.dark) body.fi-body {
    background-color: var(--ed-content-bg);
}

/* ---------- 侧边栏：深海军蓝 ---------- */

.fi-sidebar {
    background: linear-gradient(180deg, var(--ed-sidebar-bg) 0%, var(--ed-sidebar-bg-2) 100%) !important;
    border-inline-end: none !important;
}

/* 品牌区：白字 + 蓝色小方标 */
.fi-sidebar-header {
    background: transparent !important;
    box-shadow: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.fi-sidebar-header .fi-logo {
    color: #fff;
    font-weight: 600;
    letter-spacing: 0.02em;
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.fi-sidebar-header .fi-logo::before {
    content: '';
    display: inline-block;
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 0.2rem;
    background: linear-gradient(135deg, #3b82f6, #60a5fa);
    box-shadow: 0 0 10px rgba(59, 130, 246, 0.55);
    flex: none;
}

/* 折叠按钮 */
.fi-sidebar-header button,
.fi-sidebar-header .fi-icon-btn {
    color: var(--ed-sidebar-muted);
}

/* 分组标题 */
.fi-sidebar-group-label {
    color: var(--ed-sidebar-muted) !important;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
}

.fi-sidebar-group-collapse-btn {
    color: var(--ed-sidebar-muted) !important;
}

/* 导航项 */
.fi-sidebar-item-btn {
    border-radius: 0.5rem;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.fi-sidebar-item-btn .fi-sidebar-item-label {
    color: var(--ed-sidebar-text);
}

.fi-sidebar-item-btn .fi-sidebar-item-icon {
    color: var(--ed-sidebar-muted);
}

.fi-sidebar-item-btn:hover {
    background-color: var(--ed-sidebar-hover) !important;
}

.fi-sidebar-item-btn:hover .fi-sidebar-item-label,
.fi-sidebar-item-btn:hover .fi-sidebar-item-icon {
    color: #fff;
}

/* 活动项：蓝色胶囊 + 左侧指示条 */
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn,
.fi-sidebar-item.fi-sidebar-item-has-active-child-items > .fi-sidebar-item-btn {
    background-color: var(--ed-sidebar-active) !important;
    box-shadow: inset 3px 0 0 #3b82f6;
}

.fi-sidebar-item.fi-active > .fi-sidebar-item-btn .fi-sidebar-item-label {
    color: #fff;
    font-weight: 500;
}

.fi-sidebar-item.fi-active > .fi-sidebar-item-btn .fi-sidebar-item-icon {
    color: #7cb1ff;
}

/* 子项分组线 */
.fi-sidebar-item-grouped-border-part,
.fi-sidebar-item-grouped-border-part-not-first,
.fi-sidebar-item-grouped-border-part-not-last {
    border-color: rgba(255, 255, 255, 0.12) !important;
}

/* 侧栏徽标（未读数） */
.fi-sidebar-item-badge-ctn .fi-badge {
    box-shadow: none;
}

/* ---------- 顶栏品牌：深色字 + 蓝色小方标 ---------- */

.fi-topbar .fi-logo {
    font-weight: 600;
    letter-spacing: 0.01em;
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

html:not(.dark) body.fi-body .fi-topbar .fi-logo {
    color: #14233a;
}

.fi-topbar .fi-logo::before {
    content: '';
    display: inline-block;
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 0.2rem;
    background: linear-gradient(135deg, #2563eb, #60a5fa);
    flex: none;
}

/* ---------- 顶栏 ---------- */

html:not(.dark) body.fi-body .fi-topbar > nav,
html:not(.dark) body.fi-body .fi-topbar {
    background-color: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--ed-card-border);
    box-shadow: none;
}

/* ---------- 卡片 / 区块：柔和圆角与投影 ---------- */

html:not(.dark) body.fi-body .fi-section,
html:not(.dark) body.fi-body .fi-ta-ctn,
html:not(.dark) body.fi-body .fi-wi-stats-overview-stat,
html:not(.dark) body.fi-body .fi-fo-tabs,
html:not(.dark) body.fi-body .fi-in-tabs,
html:not(.dark) body.fi-body .fi-tabs.fi-contained {
    border-radius: 0.75rem;
    border: 1px solid var(--ed-card-border);
    box-shadow: var(--ed-shadow);
}

/* 统计卡片：等宽数字 + 轻提升 */
.fi-wi-stats-overview-stat {
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

html:not(.dark) body.fi-body .fi-wi-stats-overview-stat:hover {
    transform: translateY(-2px);
    box-shadow: 0 2px 4px rgba(15, 30, 60, 0.05), 0 8px 24px rgba(15, 30, 60, 0.09);
}

.fi-wi-stats-overview-stat-value {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    letter-spacing: -0.01em;
}

/* ---------- 表格 ---------- */

html:not(.dark) body.fi-body .fi-ta-header-cell {
    background-color: #f7f9fc;
}

html:not(.dark) body.fi-body .fi-ta-header-cell,
html:not(.dark) body.fi-body .fi-ta-header-cell button,
html:not(.dark) body.fi-body .fi-ta-header-cell span {
    color: #5a6b85;
    font-weight: 600;
}

html:not(.dark) body.fi-body .fi-ta-row:hover > .fi-ta-cell {
    background-color: #f2f7ff;
}

/* ---------- 页面标题 ---------- */

.fi-header-heading {
    font-weight: 600;
    letter-spacing: -0.01em;
}

/* ---------- 登录页 ---------- */

html:not(.dark) body:has(.fi-simple-layout),
html:not(.dark) body.fi-body .fi-simple-layout {
    background:
        radial-gradient(1200px 600px at 15% -10%, rgba(37, 99, 235, 0.09), transparent 60%),
        radial-gradient(900px 500px at 110% 110%, rgba(16, 28, 46, 0.08), transparent 55%),
        #f3f5f9;
}

html:not(.dark) body.fi-body .fi-simple-main {
    border-radius: 1rem;
    border: 1px solid var(--ed-card-border);
    box-shadow: 0 1px 3px rgba(15, 30, 60, 0.05), 0 16px 48px rgba(15, 30, 60, 0.1);
}

.fi-simple-main .fi-logo {
    color: #14233a;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.fi-simple-main .fi-logo::before {
    content: '';
    display: inline-block;
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 0.2rem;
    background: linear-gradient(135deg, #3b82f6, #60a5fa);
    flex: none;
}

/* ============================================================
   第二轮细节打磨（保持浅色基调）
   ============================================================ */

/* ---------- 区块标题：左侧蓝色小竖条 ---------- */

.fi-section-header-heading {
    position: relative;
    padding-inline-start: 0.75rem;
    font-weight: 600;
}

.fi-section-header-heading::before {
    content: '';
    position: absolute;
    inset-inline-start: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 1em;
    border-radius: 2px;
    background: linear-gradient(180deg, #3b82f6, #60a5fa);
}

/* ---------- 表格里的状态徽章：前置小圆点 ---------- */

.fi-ta-cell .fi-badge {
    gap: 0.35rem;
}

.fi-ta-cell .fi-badge::before {
    content: '';
    width: 0.375rem;
    height: 0.375rem;
    border-radius: 9999px;
    background-color: currentColor;
    opacity: 0.75;
    flex: none;
}

/* ---------- 统计卡片：图标弱化为角标 ---------- */

.fi-wi-stats-overview-stat-label-ctn > .fi-icon {
    opacity: 0.55;
}

.fi-wi-stats-overview-stat-description {
    font-size: 0.78rem;
}

/* ---------- 按钮质感 ---------- */

html:not(.dark) body.fi-body .fi-btn.fi-color-primary {
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0) 45%);
    box-shadow: 0 1px 2px rgba(29, 78, 216, 0.25);
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}

html:not(.dark) body.fi-body .fi-btn.fi-color-primary:hover {
    box-shadow: 0 2px 6px rgba(29, 78, 216, 0.35);
    transform: translateY(-1px);
}

html:not(.dark) body.fi-body .fi-btn:not(.fi-color-primary) {
    transition: box-shadow 0.15s ease;
}

/* ---------- 输入框 focus：柔和外圈 ---------- */

html:not(.dark) body.fi-body .fi-input-wrp:focus-within {
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
}

/* ---------- 下拉面板 / 弹窗 ---------- */

html:not(.dark) body.fi-body .fi-dropdown-panel {
    border-radius: 0.75rem;
    border: 1px solid var(--ed-card-border);
    box-shadow: 0 4px 6px rgba(15, 30, 60, 0.04), 0 12px 32px rgba(15, 30, 60, 0.12);
}

html:not(.dark) body.fi-body .fi-modal-window {
    border-radius: 1rem;
    box-shadow: 0 8px 16px rgba(15, 30, 60, 0.08), 0 24px 64px rgba(15, 30, 60, 0.18);
}

/* ---------- 表格空状态：弱化 ---------- */

.fi-ta-empty-state-icon-ctn {
    opacity: 0.7;
}

.fi-ta-empty-state-heading {
    color: #6b7a92;
    font-weight: 500;
}

/* ---------- 面包屑：弱化非当前层级 ---------- */

html:not(.dark) body.fi-body .fi-breadcrumbs-item-label {
    color: #8494ab;
}

html:not(.dark) body.fi-body .fi-breadcrumbs-item:last-child .fi-breadcrumbs-item-label {
    color: #33445e;
    font-weight: 500;
}

/* ---------- 行选中态 ---------- */

html:not(.dark) body.fi-body .fi-ta-row.fi-selected > .fi-ta-cell,
html:not(.dark) body.fi-body .fi-ta-row:has(input:checked) > .fi-ta-cell {
    background-color: rgba(59, 130, 246, 0.06);
}

/* ---------- 顶栏全局搜索：胶囊形 ---------- */

.fi-global-search-field .fi-input-wrp {
    border-radius: 9999px;
}

/* ---------- 细滚动条 ---------- */

html:not(.dark) ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

html:not(.dark) ::-webkit-scrollbar-track {
    background: transparent;
}

html:not(.dark) ::-webkit-scrollbar-thumb {
    background-color: #c6cfdd;
    border-radius: 8px;
    border: 2px solid transparent;
    background-clip: content-box;
}

html:not(.dark) ::-webkit-scrollbar-thumb:hover {
    background-color: #a8b4c8;
}

/* 侧边栏内滚动条配合深底 */
.fi-sidebar-nav::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.16);
    border-radius: 8px;
}

/* ---------- 分页 ---------- */

html:not(.dark) body.fi-body .fi-pagination-item {
    border-radius: 0.5rem;
}

/* ---------- 通知 toast ---------- */

html:not(.dark) body.fi-body .fi-no-notification {
    border-radius: 0.75rem;
    border: 1px solid var(--ed-card-border);
    box-shadow: 0 8px 24px rgba(15, 30, 60, 0.14);
}

/* ---------- 用户头像：细渐变描边 ---------- */

.fi-topbar .fi-avatar {
    box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px rgba(59, 130, 246, 0.45);
}

html.dark .fi-topbar .fi-avatar {
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.15);
}

/* ---------- 尊重系统减少动态偏好 ---------- */

@media (prefers-reduced-motion: reduce) {
    .fi-sidebar-item-btn,
    .fi-wi-stats-overview-stat,
    .fi-btn {
        transition: none !important;
    }

    .fi-wi-stats-overview-stat:hover,
    .fi-btn:hover {
        transform: none !important;
    }
}