/* ==========================================================================
   外贸CRM 后台主题
   设计方向：深蓝侧栏 / 柔和卡片 / 大留白 / 清晰状态色
   ========================================================================== */

:root {
    --crm-ink: #0b1220;
    --crm-ink-soft: #111c30;
    /* 品牌色（由用户配色方案覆盖，默认深海蓝） */
    --crm-brand: #2563eb;
    --crm-brand-strong: #1d4ed8;
    --crm-brand-soft: #3b82f6;
    --crm-brand-tint: rgba(37, 99, 235, .07);
    --crm-brand-selection: rgba(37, 99, 235, .18);
    --crm-brand-glow: rgba(59, 130, 246, .95);
    --crm-brand-shadow: rgba(37, 99, 235, .85);
    --crm-ring: rgba(37, 99, 235, .45);
    --crm-ring-strong: rgba(37, 99, 235, .55);
    --crm-outline: rgba(59, 130, 246, .65);
    --crm-brand-veil: rgba(59, 130, 246, .28);
    --crm-brand-veil-strong: rgba(37, 99, 235, .22);
    /* 侧边栏强调色 */
    --crm-sidebar-icon: #a9c4ea;
    --crm-sidebar-active-icon: #93c5fd;
    --crm-sidebar-active-from: rgba(59, 130, 246, .30);
    --crm-sidebar-active-to: rgba(59, 130, 246, .10);
    --crm-sidebar-active-ring: rgba(96, 165, 250, .30);
    --crm-bg: #f4f6fb;
    --crm-card: #ffffff;
    --crm-text: #0f172a;
    --crm-muted: #64748b;
    --crm-line: #e8edf5;
    --crm-radius: 16px;
    --crm-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 14px 34px -24px rgba(15, 23, 42, .35);
}

/* ---------- 基础 ---------- */

body.fi-body {
    background: var(--crm-bg);
    color: var(--crm-text);
    font-family: "Inter", "Roboto", "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.fi-layout {
    background:
        radial-gradient(1200px 480px at 100% -10%, var(--crm-brand-tint), transparent 60%),
        var(--crm-bg);
}

::selection {
    background: var(--crm-brand-selection);
}

/* 细滚动条 */
* {
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}

*::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

*::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 999px;
}

*::-webkit-scrollbar-track {
    background: transparent;
}

/* ---------- 侧边栏 ---------- */

.fi-sidebar {
    background: linear-gradient(180deg, var(--crm-ink) 0%, var(--crm-ink-soft) 100%);
}

.fi-sidebar .fi-sidebar-header {
    height: 3.75rem;
    padding-inline: 1.35rem;
    background: transparent;
    box-shadow: none;
    --tw-ring-shadow: 0 0 #0000;
}

.fi-sidebar .fi-logo {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    color: #fff;
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: .01em;
}

/* 品牌标记：白色 logo 置于圆角渐变底 */
.fi-sidebar .fi-logo::before {
    content: "";
    display: inline-block;
    width: 30px;
    height: 30px;
    flex: none;
    border-radius: 8px;
    background-color: var(--crm-brand-strong);
    background-image: url('../images/lianway-mark-white.svg'),
        linear-gradient(135deg, var(--crm-brand-soft) 0%, var(--crm-brand-strong) 100%);
    background-repeat: no-repeat;
    background-position: center, center;
    background-size: 17px 17px, 100% 100%;
    box-shadow: 0 8px 18px -8px var(--crm-brand-glow), inset 0 1px 0 rgba(255, 255, 255, .25);
}

/* 桌面端折叠为图标栏：收窄留白，仅保留菜单图标 */
@media (min-width: 1024px) {
    .fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-header {
        padding-inline: .75rem;
    }

    .fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-nav {
        padding: .5rem .7rem 1.5rem;
    }

    .fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-group-label,
    .fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-group-collapse-button {
        display: none;
    }

    .fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-item.fi-active > .fi-sidebar-item-button::before {
        display: none;
    }
}

.fi-sidebar .fi-sidebar-nav {
    padding: .5rem 1rem 2rem;
}

.fi-sidebar .fi-sidebar-group {
    padding-block: .35rem;
}

.fi-sidebar .fi-sidebar-group-label {
    color: rgba(203, 213, 225, .72);
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.fi-sidebar .fi-sidebar-group-button:hover .fi-sidebar-group-label {
    color: rgba(226, 232, 240, .9);
}

.fi-sidebar .fi-sidebar-group-icon,
.fi-sidebar .fi-sidebar-group-collapse-button {
    color: rgba(148, 163, 184, .65);
}

.fi-sidebar .fi-sidebar-item-button {
    padding: .55rem .75rem;
    border-radius: var(--crm-radius, 10px);
    color: rgba(226, 232, 240, .82);
    transition: background-color .16s ease, color .16s ease;
}

.fi-sidebar .fi-sidebar-item-label {
    color: inherit;
    font-size: .875rem;
    font-weight: 500;
}

.fi-sidebar .fi-sidebar-item-button:hover {
    background: rgba(255, 255, 255, .06);
    color: #fff;
}

.fi-sidebar .fi-sidebar-item-icon,
.fi-sidebar .fi-sidebar-item-icon svg {
    color: var(--crm-sidebar-icon);
}

/* 选中态：柔和底色 + 左侧品牌竖条，避免整块高亮显得突兀 */
.fi-sidebar .fi-sidebar-item.fi-active > .fi-sidebar-item-button {
    background: rgba(255, 255, 255, .09);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
    color: #fff;
}

.fi-sidebar .fi-sidebar-item.fi-active > .fi-sidebar-item-button::before {
    content: "";
    position: absolute;
    inset-inline-start: .1rem;
    top: 50%;
    width: 3px;
    height: 1.125rem;
    transform: translateY(-50%);
    border-radius: 999px;
    background: var(--crm-brand-soft);
    box-shadow: 0 0 12px -2px var(--crm-brand-glow);
}

.fi-sidebar .fi-sidebar-item.fi-active > .fi-sidebar-item-button .fi-sidebar-item-icon,
.fi-sidebar .fi-sidebar-item.fi-active > .fi-sidebar-item-button .fi-sidebar-item-icon svg {
    color: var(--crm-sidebar-active-icon);
}

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

/* 侧边栏滚动条适配深色背景 */
.fi-sidebar * {
    scrollbar-color: rgba(255, 255, 255, .16) transparent;
}

.fi-sidebar ::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, .16);
}

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

.fi-topbar > nav {
    height: 3.75rem;
    background: rgba(255, 255, 255, .82);
    backdrop-filter: blur(14px);
    box-shadow: 0 1px 0 rgba(15, 23, 42, .06);
    --tw-ring-shadow: 0 0 #0000;
}

/* 顶栏全局搜索：胶囊输入框 */
.fi-topbar .fi-input-wrp {
    border-radius: 999px;
    background: #f1f5f9;
    --tw-ring-shadow: 0 0 #0000;
}

.fi-topbar .fi-input-wrp:focus-within {
    background: #fff;
    --tw-ring-shadow: 0 0 0 1px var(--crm-ring);
}

/* ---------- 内容区 ---------- */

.fi-main {
    max-width: 1440px;
}

.fi-page {
    padding-top: .25rem;
}

.fi-header-heading {
    letter-spacing: -.02em;
    color: var(--crm-text);
}

.fi-header-subheading {
    color: var(--crm-muted);
}

.fi-breadcrumbs {
    font-size: .8125rem;
}

.fi-page-content {
    gap: 1.5rem;
}

/* ---------- 卡片 / 区块 ---------- */

.fi-section {
    border-radius: var(--crm-radius);
    background: var(--crm-card);
    box-shadow: var(--crm-shadow);
    --tw-ring-shadow: 0 0 #0000;
}

.fi-section-header {
    padding: 1.15rem 1.35rem .9rem;
}

.fi-section-header-heading {
    font-size: .9375rem;
    font-weight: 650;
    letter-spacing: -.005em;
    color: var(--crm-text);
}

.fi-section-header-description {
    margin-top: .15rem;
    font-size: .75rem;
    color: var(--crm-muted);
}

.fi-section-content {
    padding: .25rem 1.35rem 1.25rem;
}

.fi-section-footer {
    background: #f8fafc;
    border-top: 1px solid var(--crm-line);
}

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

.fi-ta-ctn {
    border-radius: var(--crm-radius);
    box-shadow: var(--crm-shadow);
    --tw-ring-shadow: 0 0 #0000;
}

.fi-ta-header {
    background: #fff;
}

.fi-ta-header-toolbar {
    padding: .7rem 1rem;
    border-bottom: 1px solid var(--crm-line);
}

.fi-ta-header-cell {
    background: #f8fafc;
}

.fi-ta-header-cell-label {
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .04em;
    color: #64748b;
}

.fi-ta-row {
    transition: background-color .14s ease;
}

.fi-ta-row:hover {
    background: #f8fbff;
}

.fi-ta-row .fi-ta-cell {
    border-color: var(--crm-line);
}

/* 行内文字操作：轻量胶囊 */
.fi-ta-actions .fi-link {
    padding: .25rem .5rem;
    border-radius: 7px;
    font-size: .8125rem;
    font-weight: 500;
    transition: background-color .14s ease;
}

.fi-ta-actions .fi-link:hover {
    background: #eef4ff;
}

/* 桌面端：操作列吸附右侧，窄屏横向滚动时操作依然可见 */
@media (min-width: 1024px) {
    .fi-ta-table:has(td.fi-ta-actions-cell) > thead > tr > th:last-child,
    .fi-ta-table:has(td.fi-ta-actions-cell) > tbody > tr > td:last-child {
        position: sticky;
        right: 0;
        z-index: 1;
        background: #fff;
        box-shadow: inset 1px 0 0 var(--crm-line), -10px 0 14px -14px rgba(15, 23, 42, .45);
    }

    .fi-ta-table:has(td.fi-ta-actions-cell) > thead > tr > th:last-child {
        background: #f8fafc;
        /* 与操作单元格的 12px 内边距对齐，使表头文字在整列中居中 */
        padding-inline-end: .75rem;
    }

    /* 「操作」表头在操作组上方居中 */
    .fi-ta-table:has(td.fi-ta-actions-cell) > thead > tr > th:last-child > span:first-child {
        justify-content: center;
    }

    .fi-ta-table:has(td.fi-ta-actions-cell) > tbody > tr:hover > td:last-child {
        background: #f8fbff;
    }
}

.fi-ta-empty-state {
    padding-block: 3.5rem;
}

/* 空状态：淡蓝圆形图标 + 克制的说明文字 */
.fi-ta-empty-state-icon-ctn {
    display: grid;
    place-items: center;
    margin-bottom: .75rem;
    padding: .85rem;
    background: #eef4ff;
    box-shadow: inset 0 0 0 1px #dbe6ff;
}

.fi-ta-empty-state-icon {
    width: 1.5rem;
    height: 1.5rem;
    color: var(--crm-brand);
}

.fi-ta-empty-state-heading {
    font-size: .9375rem;
    font-weight: 600;
    color: #1e293b;
}

.fi-ta-empty-state-description {
    margin-top: .5rem;
    font-size: .8125rem;
    line-height: 1.65;
    color: var(--crm-muted);
}

.fi-ta-empty-state .fi-btn {
    margin-top: .25rem;
}

/* ---------- 按钮 ---------- */

.fi-btn {
    border-radius: var(--crm-radius, 10px);
    font-weight: 600;
    transition: background-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.fi-btn-color-primary {
    background: var(--crm-brand);
    box-shadow: 0 8px 18px -12px var(--crm-brand-shadow);
}

.fi-btn-color-primary:hover {
    background: var(--crm-brand-strong);
}

.fi-btn-color-gray {
    background: #fff;
    box-shadow: inset 0 0 0 1px var(--crm-line);
}

.fi-btn-color-gray:hover {
    background: #f8fafc;
}

/* ---------- 表单 ---------- */

.fi-input-wrp {
    border-radius: var(--crm-radius, 10px);
    --tw-ring-color: #dbe3ef;
}

.fi-input-wrp:focus-within {
    --tw-ring-color: var(--crm-ring-strong);
}

.fi-fo-field-wrp-label span {
    font-weight: 550;
    color: #334155;
}

.fi-fo-field-wrp-helper-text {
    font-size: .75rem;
}

/* ---------- 徽章 ---------- */

.fi-badge {
    border-radius: 999px;
    padding-inline: .55rem;
    font-size: .75rem;
    font-weight: 600;
}

/* ---------- 仪表板 Widget ---------- */

.fi-wi-widget .fi-section-content {
    padding-top: .35rem;
}

.fi-wi-widget .fi-section-content .border-b {
    border-color: var(--crm-line);
}

.fi-wi-widget .fi-section-content .border-b:last-child {
    border-bottom: 0;
}

.fi-wi-widget .fi-section-content > div > p {
    font-size: .8125rem;
    color: #94a3b8;
    padding-block: .85rem;
}

/* 列表项在卡片内的呼吸感 */
.fi-wi-widget .fi-section-content .border-b {
    padding-block: .7rem;
}

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

.fi-simple-layout {
    background:
        radial-gradient(900px 500px at 15% 10%, var(--crm-brand-veil), transparent 60%),
        radial-gradient(700px 460px at 85% 90%, var(--crm-brand-veil-strong), transparent 60%),
        linear-gradient(145deg, var(--crm-ink) 0%, var(--crm-ink-soft) 55%, var(--crm-ink) 100%);
}

.fi-simple-main {
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    box-shadow: 0 30px 80px -40px rgba(2, 6, 23, .85);
    --tw-ring-shadow: 0 0 #0000;
}

/* 卡片顶部品牌色细线 */
.fi-simple-main::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
    background: linear-gradient(90deg, var(--crm-brand-soft) 0%, var(--crm-brand) 60%, var(--crm-sidebar-active-icon) 100%);
}

.fi-simple-header-heading {
    letter-spacing: -.015em;
}

.fi-simple-header-subheading {
    color: var(--crm-muted);
}

.fi-simple-main .fi-logo {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    color: var(--crm-ink);
}

/* 登录页品牌标记：与侧边栏保持一致（白色 logo） */
.fi-simple-main .fi-logo::before {
    content: "";
    display: inline-block;
    width: 30px;
    height: 30px;
    flex: none;
    border-radius: 9px;
    background-color: var(--crm-brand-strong);
    background-image: url('../images/lianway-mark-white.svg'),
        linear-gradient(135deg, var(--crm-brand-soft) 0%, var(--crm-brand-strong) 100%);
    background-repeat: no-repeat;
    background-position: center, center;
    background-size: 17px 17px, 100% 100%;
    box-shadow: 0 10px 22px -12px var(--crm-brand-shadow);
}

.fi-simple-main .fi-fo-field-wrp-label span {
    color: #334155;
}

/* 移动端：登录卡片贴合屏幕 */
@media (max-width: 639px) {
    .fi-simple-main {
        border-radius: 0;
    }
}

/* ---------- 交互细节 ---------- */

.fi-sidebar-item-button:focus-visible,
.fi-topbar-item-button:focus-visible,
.fi-btn:focus-visible {
    outline: 2px solid var(--crm-outline);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition-duration: .001ms !important;
        animation-duration: .001ms !important;
    }
}

/* ---------- 暗色模式兜底 ---------- */

.dark .fi-layout {
    background: #0b1220;
}

.dark .fi-main {
    color: #e2e8f0;
}

/* ---------- 登录页（分屏布局） ---------- */

.crm-auth {
    display: grid;
    grid-template-columns: minmax(0, 1.04fr) minmax(0, 1fr);
    min-height: 100vh;
    background: #fff;
}

.crm-auth-aside {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 56px;
    overflow: hidden;
    padding: 72px 64px;
    color: #fff;
    background:
        radial-gradient(120% 120% at 100% 100%, rgba(255, 255, 255, .2) 0%, rgba(255, 255, 255, 0) 58%),
        linear-gradient(
            140deg,
            var(--crm-brand-soft) 0%,
            var(--crm-brand) 45%,
            var(--crm-brand-strong) 100%
        );
}

.crm-auth-orb {
    position: absolute;
    border-radius: 999px;
    background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, .26), rgba(255, 255, 255, 0) 70%);
    pointer-events: none;
}

.crm-auth-orb--top {
    top: -170px;
    right: -150px;
    width: 440px;
    height: 440px;
}

.crm-auth-orb--bottom {
    bottom: -190px;
    left: -130px;
    width: 400px;
    height: 400px;
    opacity: .85;
}

.crm-auth-preview {
    position: relative;
    width: 100%;
    max-width: 430px;
    margin-top: 18px;
}

.crm-auth-card {
    border: 1px solid rgba(255, 255, 255, .24);
    border-radius: 18px;
    background: rgba(255, 255, 255, .14);
    box-shadow: 0 24px 48px -24px rgba(8, 15, 40, .55);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
}

.crm-auth-card--chart {
    padding: 18px 20px 16px;
}

.crm-auth-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
}

.crm-auth-card-title {
    font-size: 13px;
    font-weight: 600;
    color: rgba(255, 255, 255, .92);
}

.crm-auth-tabs {
    display: flex;
    gap: 4px;
    padding: 3px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .12);
}

.crm-auth-tabs span {
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 11px;
    color: rgba(255, 255, 255, .75);
}

.crm-auth-tabs .is-active {
    background: rgba(255, 255, 255, .92);
    color: var(--crm-brand-strong);
    font-weight: 600;
}

.crm-auth-bars {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    height: 190px;
}

.crm-auth-bar-item {
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: flex-end;
    gap: 10px;
    height: 100%;
}

.crm-auth-bar {
    display: block;
    border-radius: 6px 6px 2px 2px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .7), rgba(255, 255, 255, .3));
}

.crm-auth-bar-label {
    display: block;
    padding: 2px 0;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 6px;
    background: rgba(255, 255, 255, .12);
    text-align: center;
    font-size: 10px;
    line-height: 1.4;
    color: rgba(255, 255, 255, .8);
}

.crm-auth-card--ring {
    position: absolute;
    top: -38px;
    right: -18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 128px;
    height: 128px;
    padding: 10px;
}

.crm-auth-ring {
    position: absolute;
    inset: 8px;
}

.crm-auth-ring svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.crm-auth-ring-label {
    position: relative;
    margin-bottom: 2px;
    font-size: 10px;
    color: rgba(255, 255, 255, .72);
}

.crm-auth-ring-value {
    position: relative;
    font-size: 23px;
    font-weight: 700;
    line-height: 1;
}

.crm-auth-copy h2 {
    margin: 0 0 14px;
    max-width: 430px;
    font-size: 30px;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: .01em;
}

.crm-auth-copy p {
    margin: 0;
    max-width: 400px;
    font-size: 13.5px;
    line-height: 1.75;
    color: rgba(255, 255, 255, .78);
}

.crm-auth-main {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 56px 32px;
    background: #fff;
}

.crm-auth-panel {
    width: 100%;
    max-width: 420px;
}

.crm-auth-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 44px;
}

.crm-auth-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex: none;
    border-radius: 10px;
    background-color: var(--crm-brand-strong);
    background-image: linear-gradient(135deg, var(--crm-brand-soft) 0%, var(--crm-brand-strong) 100%);
    box-shadow: 0 10px 22px -12px var(--crm-brand-shadow), inset 0 1px 0 rgba(255, 255, 255, .25);
}

.crm-auth-logo img {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

.crm-auth-brand-name {
    font-size: 19px;
    font-weight: 700;
    letter-spacing: .01em;
    color: #111827;
}

.crm-auth-title {
    margin: 0 0 8px;
    font-size: 28px;
    font-weight: 700;
    letter-spacing: .01em;
    color: #111827;
}

.crm-auth-sub {
    margin: 0 0 28px;
    font-size: 13px;
    color: #6b7280;
}

.crm-auth-form {
    gap: 18px;
}

.crm-auth-form .fi-fo-field-wrp-label span {
    font-size: 13px;
    font-weight: 500;
    color: #374151;
}

.crm-auth-form .fi-btn {
    height: 42px;
    border-radius: 8px;
    font-size: 14px;
}

.crm-auth-main .fi-input-wrp {
    background: #fff;
}

/* 分屏在窄屏隐藏展示区 */
@media (max-width: 1023px) {
    .crm-auth {
        grid-template-columns: minmax(0, 1fr);
    }

    .crm-auth-aside {
        display: none;
    }

    .crm-auth-main {
        min-height: 100vh;
        padding: 40px 20px;
    }
}

/* 登录页固定浅色表单区域 */
.dark .crm-auth,
.dark .crm-auth-main {
    background: #fff;
}

.dark .crm-auth-title,
.dark .crm-auth-brand-name {
    color: #111827;
}

.dark .crm-auth-sub {
    color: #6b7280;
}

.dark .crm-auth-form .fi-fo-field-wrp-label span {
    color: #374151;
}

.dark .crm-auth-main .fi-input-wrp {
    background: #fff;
}

.dark .crm-auth-main .fi-input {
    color: #111827;
}

.dark .crm-auth-main .fi-input::placeholder {
    color: #9ca3af;
}

/* 全站收紧页面左右留白（Filament 默认 1rem / 1.5rem / 2rem） */
.fi-main {
    padding-left: .75rem;
    padding-right: .75rem;
}

@media (min-width: 768px) {
    .fi-main {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

@media (min-width: 1024px) {
    .fi-main {
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }
}