/* 电子元件物料管理 - layui 版样式（美化） */

:root {
    --primary: #0D6EFD;
    --green: #16B777;
    --orange: #FFB800;
    --red: #FF5722;
    --bg: #F5F7FA;
    --card-shadow: 0 2px 12px rgba(33, 37, 41, .06);
}

body {
    font-family: "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
    background: var(--bg);
    color: #333;
}

/* 顶部渐变导航 */
.page-topbar {
    background: linear-gradient(135deg, #0D6EFD 0%, #4E8CFF 45%, #16B777 100%);
    color: #fff;
    box-shadow: 0 4px 18px rgba(13, 110, 253, .20);
    position: sticky; top: 0; z-index: 100;
}
.topbar-inner {
    display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
    padding: 12px 16px;
}
.brand {
    font-weight: 800; font-size: 19px; letter-spacing: .5px; white-space: nowrap;
    display: flex; align-items: center; gap: 8px;
}
.brand-logo {
    width: 32px; height: 32px; border-radius: 9px;
    background: rgba(255, 255, 255, .22);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 18px; backdrop-filter: blur(4px);
}
.topbar-search {
    width: 260px; background: rgba(255, 255, 255, .95);
    border: none; border-radius: 8px; color: #333;
}
.topbar-search:focus { box-shadow: 0 0 0 3px rgba(255, 255, 255, .35) !important; }
.topbar-flex { flex: 1; }

/* 顶栏次要操作组（移动端折叠为「更多」菜单） */
.topbar-actions { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.topbar-more { display: none; }
/* 顶栏排序框（桌面/手机共用视觉语言）：白底胶囊同搜索框，隐藏系统箭头换自定义箭头。
   ⚠️ layui.js 对 lay-ignore 的 select 会执行 i.show() 写内联 display:block，CSS 隐藏不住它，
   所以桌面端不做 display:none，而是直接给它完整样式 */
.topbar-sort {
    height: 38px; padding: 0 28px 0 12px;
    border: none; border-radius: 8px;
    color: #333; font-size: 14px; cursor: pointer;
    background: rgba(255, 255, 255, .96) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7686' d='M3 4.5l3 3 3-3'/%3E%3C/svg%3E") no-repeat right 10px center;
    -webkit-appearance: none !important; -moz-appearance: none !important; appearance: none !important;
}
.topbar-sort:focus { outline: none; box-shadow: 0 0 0 3px rgba(255, 255, 255, .35); }
#lowBadge { animation: pulse 1.8s infinite; font-weight: 700; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }

/* 顶栏按钮 */
.page-topbar .layui-btn-primary { background: rgba(255, 255, 255, .92); border: none; color: #333; }
.page-topbar .layui-btn-primary:hover { background: #fff; }

/* 卡片 */
.layui-card {
    border: none; border-radius: 14px; box-shadow: var(--card-shadow);
    transition: box-shadow .2s ease, transform .2s ease;
}
.layui-card:hover { box-shadow: 0 8px 24px rgba(33, 37, 41, .10); }

/* 工具条 */
.toolbar { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 12px 18px; }
.toolbar .layui-form-select { width: 130px; }
.stat-tip { color: #999; margin-left: auto; font-size: 13px; }
.text-muted { color: #999; }

/* 表格（普通 HTML 表格 + table-layout:fixed，列宽百分比正好占满容器） */
.inv-table { table-layout: fixed; width: 100%; border: none; }
.inv-table thead th {
    background: #FAFBFC; color: #555; font-weight: 600;
    position: relative; cursor: default; user-select: none;
}
.inv-table th, .inv-table td { padding: 9px 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inv-table thead th[data-field] { cursor: pointer; }
.inv-table thead th[data-field]:hover { color: var(--primary); }
.th-sorted { color: var(--primary); }
.sort-arrow { font-size: 11px; margin-left: 3px; }

/* 行状态 */
.inv-table tr.row-low td { background: #FFF5F2 !important; }
.inv-table tr.row-low td:first-child { box-shadow: inset 4px 0 0 var(--red); }
.inv-table tr.row-fav td:first-child { box-shadow: inset 4px 0 0 var(--orange); }
.inv-table tbody tr:hover td { background: #F0F6FF !important; }

/* 数量胶囊 */
.qty-pill {
    display: inline-block; min-width: 46px; padding: 2px 12px; border-radius: 14px;
    font-weight: 700; font-size: 14px; text-align: center; cursor: pointer;
    transition: transform .12s ease;
}
.qty-pill:hover { transform: scale(1.08); }
.qty-ok { background: #E8F7EF; color: var(--green); }
.qty-low { background: #FFEDE8; color: var(--red); }

/* 名称 */
.cell-name { font-weight: 600; color: #222; }

/* 主体居中容器 */
.main-wrap { max-width: 1500px; margin: 0 auto; padding: 15px; }

/* 列宽拖拽手柄 */
.col-resizer {
    position: absolute; top: 0; right: -3px; width: 7px; height: 100%;
    cursor: col-resize; z-index: 20;
}
.col-resizer:hover { background: rgba(13, 110, 253, .25); }
body.col-dragging { cursor: col-resize; user-select: none; }

/* 弹窗 */
.layer-box { padding: 18px 18px 8px; }
.layer-footer {
    display: flex; justify-content: flex-end; gap: 8px;
    padding: 10px 0 12px; border-top: 1px solid #f0f0f0; margin-top: 8px;
}
.form-hint { color: #999; font-size: 12px; margin-top: 4px; }
.scroll-area { max-height: 420px; overflow: auto; }
.scroll-area::-webkit-scrollbar { width: 6px; height: 6px; }
.scroll-area::-webkit-scrollbar-thumb { background: #d0d5dd; border-radius: 3px; }
.empty-tip { text-align: center; color: #999; padding: 32px 0; font-size: 14px; }
.foot-tip { text-align: center; color: #aaa; margin-top: 15px; font-size: 12px; }

/* 前端分页条（全部数据已在内存，仅切片渲染当前页） */
.pager { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; padding: 14px 10px; font-size: 13px; color: #6b7686; }
.pager-info { margin-right: 2px; }
.pager-nav { display: inline-flex; align-items: center; gap: 4px; }
.pager a, .pager-ellipsis { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 30px; padding: 0 8px; border-radius: 6px; }
.pager a { color: #4a5568; background: #fff; border: 1px solid #e3e8ef; cursor: pointer; user-select: none; transition: all .15s; }
.pager a:hover { border-color: var(--primary, #0d6efd); color: var(--primary, #0d6efd); }
.pager a.pager-cur { background: var(--primary, #0d6efd); border-color: var(--primary, #0d6efd); color: #fff; font-weight: 600; }
.pager a.pager-disabled { color: #c4ccd8; background: #f6f8fa; border-color: #eef1f5; cursor: not-allowed; }
.pager a.pager-disabled:hover { border-color: #eef1f5; color: #c4ccd8; }
.pager-ellipsis { color: #c4ccd8; }
/* 分页「每页条数」下拉：桌面端沿用与顶栏分类下拉(Layui)同一套语言（白底 / #e6e6e6 边框 / 2px 圆角 / 自定义箭头）；
   手机端在下方媒体查询里改回紧凑尺寸，与分页按钮、顶栏排序框保持同一家族 */
.pager-ps {
    height: 34px; padding: 0 28px 0 10px;
    border: 1px solid #e6e6e6; border-radius: 2px;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7686' d='M3 4.5l3 3 3-3'/%3E%3C/svg%3E") no-repeat right 9px center;
    color: #333; font-size: 13px; cursor: pointer;
    -webkit-appearance: none; -moz-appearance: none; appearance: none;
    transition: border-color .15s;
}
.pager-ps:hover { border-color: #d2d2d2; }
.pager-ps:focus { outline: none; border-color: var(--primary, #0d6efd); box-shadow: 0 0 0 3px rgba(13, 110, 253, .12); }
.layui-quote-nm { margin-bottom: 10px; border-left: 4px solid var(--green); border-radius: 4px; }

/* datasheet 列表：两列表格，文件名超长截断 */
.ds-table { table-layout: fixed; margin: 0 !important; }
.ds-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ===== 元件图片（截图）===== */

/* 资料弹窗内的分区标题（图片区 / 数据手册区） */
.ds-sec-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; margin: 0 0 8px;
}
.ds-sec-title { font-weight: 700; color: #2c3e50; font-size: 14px; }
.ds-sec-title .layui-icon { color: var(--primary); margin-right: 4px; }
/* 分区右侧按钮组（粘贴 / 上传图片） */
.ds-sec-btns { display: inline-flex; gap: 8px; flex: 0 0 auto; }
.ds-sec-btns .layui-btn { margin: 0; }
.ds-sec-line { height: 1px; background: #f0f2f5; margin: 14px 0 12px; }

/* 缩略图网格：自动列宽，窄屏约 3 列、宽屏更多 */
.img-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.img-card { position: relative; }
.img-card img {
    width: 100%; height: 96px; object-fit: cover; display: block;
    border: 1px solid #eef0f3; border-radius: 8px; background: #f7f9fc;
    cursor: zoom-in; /* 提示可点开看大图 */
}
/* 删除按钮浮在缩略图右上角 */
.img-card .js-imgdel { position: absolute; top: 4px; right: 4px; margin: 0; opacity: .92; }

/* 手机端详情弹层里的图片缩略图（横向可滑动） */
.dt-imgs { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 8px; }
.dt-imgs img {
    width: 84px; height: 84px; object-fit: cover; flex: 0 0 auto; cursor: zoom-in;
    border: 1px solid #eef0f3; border-radius: 8px; background: #f7f9fc;
}

/* ===== 应用内大图预览（点缩略图打开）===== */

/* 容器：flex 垂直居中；高度由 JS 写入的内联 min-height 撑起（像素值，不依赖图片加载） */
.iv-wrap {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 10px; padding: 8px; box-sizing: border-box;
}
/* object-fit: contain —— 等比缩放完整显示，不裁切也不拉伸 */
.iv-img {
    max-width: 100%; max-height: 66vh;
    object-fit: contain; border-radius: 6px;
}
.iv-nav { display: flex; align-items: center; justify-content: center; gap: 12px; }
.iv-count { color: #8a94a6; font-size: 13px; }
.up-item {
    padding: 8px 12px; border: 1px solid #f0f0f0; border-radius: 4px;
    margin-bottom: 6px; background: #FAFBFC;
}

/* datasheet 上传进度条 */
.up-bar {
    height: 8px; background: #ECEFF1; border-radius: 4px; overflow: hidden;
}
.up-bar-inner {
    height: 100%; width: 0; background: linear-gradient(90deg, #16B777, #4E8CFF);
    border-radius: 4px; transition: width .2s ease;
}
.up-pct { color: #999; font-weight: 600; }

/* ===================== 移动端适配 ===================== */
@media (max-width: 768px) {
    /* 顶栏：搜索/分类各占整行，按钮收进「更多」 */
    .main-wrap { padding: 10px; }
    .topbar-inner { gap: 8px; padding: 10px 12px; }
    .brand { font-size: 16px; order: 0; flex: 1 1 auto; min-width: 0; }
    #lowBadge { order: 1; }
    .topbar-more { display: inline-flex; order: 2; }
    /* 「登录」与「新增元件」同排（order 相同则按 DOM 顺序），未登录时才存在 */
    .topbar-login, .topbar-add { order: 3; }
    .topbar-search { order: 4; width: 100%; flex: 1 1 100%; }
    .topbar-inner .layui-form-select { order: 5; width: 100% !important; flex: 1 1 100%; }
    .topbar-flex { display: none; }
    .topbar-actions {
        order: 7; display: none; width: 100%;
        flex-direction: column; align-items: stretch; gap: 8px;
        background: rgba(0, 0, 0, .10); border-radius: 10px; padding: 10px; margin-top: 2px;
    }
    .topbar-inner.actions-open .topbar-actions { display: flex; }
    .topbar-actions .layui-btn,
    .topbar-actions form { width: 100%; margin: 0 !important; }
    .topbar-actions .layui-btn { justify-content: center; text-align: center; }

    /* 触控优化：放大顶栏控件，方便手指点 */
    .topbar-search { height: 44px; line-height: 44px; font-size: 15px; }
    .topbar-inner .layui-form-select .layui-input { height: 44px; line-height: 44px; font-size: 15px; }
    .topbar-add, .topbar-more { height: 42px; line-height: 42px; padding: 0 14px; font-size: 15px; }
    .topbar-actions .layui-btn { height: 42px; line-height: 42px; font-size: 15px; }

    /* 弹窗：占满屏宽，内容可滚动 */
    .layui-layer { width: 94vw !important; left: 3vw !important; top: 5vh !important; }
    .layui-layer-content { max-height: 82vh; overflow-y: auto; -webkit-overflow-scrolling: touch; }
    .layer-box { padding: 14px 12px 4px; }
    .layer-footer { flex-wrap: wrap; }
    .layer-footer .layui-btn { flex: 1 1 40%; }
}

/* 手机：极简列表 —— 只显示名称 + 数量，点开看详情 */
@media (max-width: 640px) {
    /* 分类与排序同行，省纵向空间 */
    .topbar-inner .layui-form-select { flex: 1 1 0; min-width: 0; width: auto !important; order: 5; }
    /* 手机端：排序与分类同行、放大到 44px 便于触控（白底胶囊/自定义箭头已在基础样式统一） */
    .topbar-sort { display: block; order: 6; flex: 1 1 0; min-width: 0; width: auto; height: 44px; font-size: 15px; }
    /* 手机端分页选择框用紧凑尺寸(30px/圆角6)，与分页按钮及顶栏排序框同一家族 */
    .pager-ps { height: 30px; border-radius: 6px; border-color: #e3e8ef; }
    .topbar-actions { order: 7; }
    /* 外层卡片容器透明，只留列表项自身的投影 */
    .main-wrap > .layui-card { box-shadow: none; background: transparent; margin-top: 8px !important; }

    /* 列表项：名称 + 数量，点开看详情 */
    .m-item {
        display: flex; align-items: center; gap: 10px;
        background: #fff; border: 1px solid #eef0f3; border-left: 4px solid transparent;
        border-radius: 12px; padding: 16px 14px; margin-bottom: 10px;
        box-shadow: var(--card-shadow); min-height: 60px;
    }
    .m-item:active { background: #f5f8ff; }
    .m-item.row-low { border-left-color: var(--red); }
    .m-item.row-fav { border-left-color: var(--orange); }
    .m-item-name {
        font-size: 18px; font-weight: 700; color: #222; flex: 1 1 auto; min-width: 0;
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .m-fav { color: var(--orange); font-size: 16px; flex: 0 0 auto; }
    .m-item-qty {
        flex: 0 0 auto; min-width: 56px; text-align: center;
        padding: 6px 14px; border-radius: 16px; font-size: 17px; font-weight: 700;
    }
    .m-item-qty.qty-ok { background: #E8F7EF; color: var(--green); }
    .m-item-qty.qty-low { background: #FFEDE8; color: var(--red); }
    .m-item-arrow { color: #c4ccd8; font-size: 16px; flex: 0 0 auto; }
    .m-empty { text-align: center; color: #999; padding: 40px 0; font-size: 15px; }

    /* 详情弹层 */
    .dt-box { padding: 2px 16px 16px; }
    .dt-head { display: flex; align-items: center; gap: 12px; padding: 6px 0 12px; }
    .dt-name { flex: 1 1 auto; font-size: 20px; font-weight: 700; color: #1f2d3d; line-height: 1.3; }
    .dt-qty { flex: 0 0 auto; padding: 6px 16px; border-radius: 18px; font-size: 20px; font-weight: 800; }
    .dt-qty.qty-ok { background: #E8F7EF; color: var(--green); }
    .dt-qty.qty-low { background: #FFEDE8; color: var(--red); }
    .dt-warn {
        background: #FFEDE8; color: var(--red); font-size: 14px; font-weight: 600;
        border-radius: 8px; padding: 8px 12px; margin-bottom: 10px;
    }
    .dt-list { border-top: 1px solid #f0f2f5; }
    .dt-row { display: flex; gap: 12px; padding: 12px 2px; border-bottom: 1px solid #f5f6f8; font-size: 15px; }
    .dt-k { flex: 0 0 84px; color: #8a94a6; }
    .dt-v { flex: 1 1 auto; color: #333; word-break: break-all; text-align: right; }
    .dt-acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
    .dt-acts .layui-btn { flex: 1 1 45%; height: 46px; line-height: 46px; font-size: 16px; margin: 0; border-radius: 10px; }
    .dt-acts .layui-btn .layui-icon { font-size: 17px; }
}