/* ============================================================
   Teenage Engineering 风格 + 动效底层
   ------------------------------------------------------------
   动效原则（按使用频率决定该不该动）：
     · 按压反馈  —— 所有能按的都要「听见」手指，140ms，scale(.97)
     · 录单格子  —— 一天点上百次，不加任何动画，只即时变色
     · 只动 transform / opacity，不动 width/height/padding
     · 自定义缓动曲线，绝不用 ease-in（起手慢＝界面迟钝）
   ============================================================ */

:root {
    /* 强 ease-out：起手快，界面立刻有反应 */
    --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
    /* 强 ease-in-out：屏幕内移动/变形 */
    --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
    --press-dur: 140ms;
}

/* 暖灰白背景 + 顶部栏同色，去掉割裂感 */
body {
    background-color: #ECEAE4 !important;
}
#header,
header {
    background-color: #ECEAE4 !important;
}

/* ------------------------------------------------------------
   按压反馈
   用 :not() 把权重顶到 class 级，压过 Tailwind 的 .transition(=all)；
   顺手把 all 换成具体属性——省掉无谓的重排重绘。
   ------------------------------------------------------------ */
button:not(.no-press),
input[type="submit"]:not(.no-press),
input[type="button"]:not(.no-press),
a.button:not(.no-press),
a.addlink:not(.no-press),
.object-tools a:not(.no-press) {
    transition:
        transform var(--press-dur) var(--ease-out),
        background-color var(--press-dur) ease,
        border-color var(--press-dur) ease,
        color var(--press-dur) ease;
}

button:not(.no-press):active,
input[type="submit"]:not(.no-press):active,
input[type="button"]:not(.no-press):active,
a.button:not(.no-press):active,
a.addlink:not(.no-press):active,
.object-tools a:not(.no-press):active {
    transform: scale(0.97);
}

/* 触屏上 :hover 会在点按后「粘住」，只给真鼠标 */
@media (hover: hover) and (pointer: fine) {
    a.addlink:not(.no-press):hover,
    .object-tools a:not(.no-press):hover {
        opacity: 0.92;
    }
}

/* 键盘用户要看得见焦点在哪 */
:focus-visible {
    outline: 2px solid #E04A00;
    outline-offset: 2px;
    border-radius: 4px;
}

/* ------------------------------------------------------------
   操作台的 4 个填单入口
   原本挂 Tailwind 的 .transition（= transition:all），
   这里换成只动该动的属性 + 按压反馈。
   ------------------------------------------------------------ */
.console-entry {
    display: block;
    transition:
        transform var(--press-dur) var(--ease-out),
        border-color var(--press-dur) ease,
        color var(--press-dur) ease;
}
.console-entry:active {
    transform: scale(0.97);
}
@media (hover: hover) and (pointer: fine) {
    .console-entry:hover {
        border-color: #E04A00;
        color: #E04A00;
    }
}

/* ------------------------------------------------------------
   录单矩阵（采购 / 收货 / 出库 三张共用这套 class）
   ------------------------------------------------------------ */

/* 格子：一天要点/填上百次，是全系统频率最高的动作。
   按频率原则——不加任何动画，聚焦即时变色，慢一帧都是碍事。 */
.mx-cell input:focus {
    /* 保持瞬时，勿加 transition */
}

/* 加颜色 / 加尺码 / 删掉这款：偶尔点，可以有 140ms 的颜色过渡 */
.mx-del,
.mx-add,
.mx-addcol {
    transition:
        color var(--press-dur) ease,
        transform var(--press-dur) var(--ease-out);
}
.mx-del:active,
.mx-add:active,
.mx-addcol:active {
    transform: scale(0.92);
}
/* 触屏点完会「粘」着 hover 色，只给真鼠标 */
@media (hover: hover) and (pointer: fine) {
    .mx-del:hover {
        color: #A32D2D;
    }
    .mx-add:hover,
    .mx-addcol:hover {
        color: #E04A00;
    }
}

/* ------------------------------------------------------------
   采购单详情：只读色码表（对齐开单页 mx-card，格子无动画）
   ------------------------------------------------------------ */
.field-matrix_panel label {
    display: none !important;
}
.field-matrix_panel {
    width: 100%;
}
.pf-po-mx {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 100%;
}
.pf-po-mx-card {
    border: 1px solid #D3D1C7;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
}
.pf-po-mx-head {
    background: #ECEAE4;
    padding: 10px 14px;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}
.pf-po-mx-head .name {
    font-size: 14px;
    font-weight: 600;
    color: #2C2C2A;
}
.pf-po-mx-head .qty {
    font-size: 13px;
    color: #5F5E5A;
    white-space: nowrap;
}
.pf-po-mx-head .qty b {
    color: #E04A00;
    font-size: 15px;
}
.pf-po-mx-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}
.pf-po-mx-table th {
    font-size: 12px;
    font-weight: 500;
    color: #888780;
    padding: 8px 10px;
    background: #F7F6F2;
    border: 1px solid #E8E6DF;
    border-top: 0;
    text-align: center;
}
.pf-po-mx-table th:first-child {
    text-align: left;
    border-left: 0;
    color: #5F5E5A;
}
.pf-po-mx-table th:last-child {
    border-right: 0;
}
.pf-po-mx-table td {
    border: 1px solid #E8E6DF;
    padding: 9px 10px;
    text-align: center;
    color: #2C2C2A;
}
.pf-po-mx-table td:first-child {
    text-align: left;
    font-weight: 500;
    background: #FCFBF9;
    border-left: 0;
    white-space: nowrap;
}
.pf-po-mx-table td:last-child {
    border-right: 0;
    text-align: right;
    color: #888780;
    background: #FBF7F2;
    font-weight: 600;
}
.pf-po-mx-table tbody tr:last-child td {
    border-bottom: 0;
}
.pf-po-mx-table a {
    color: #E04A00;
    text-decoration: none;
    font-variant-numeric: tabular-nums;
}
.pf-po-mx-empty {
    color: #D8D6CC;
}

/* ------------------------------------------------------------
   减少动态偏好：留下颜色/透明度（帮助理解），去掉位移
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    button:not(.no-press):active,
    input[type="submit"]:not(.no-press):active,
    a.button:not(.no-press):active,
    a.addlink:not(.no-press):active {
        transform: none;
    }
}