/* Tailwind 自定义工具类 */
@layer utilities {
    .content-auto {
        content-visibility: auto;
    }
    .table-shadow {
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    }
    .card-hover {
        transition: all 0.3s ease;
    }
    .card-hover:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    }
    .pulse-animation {
        animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    }
    @keyframes pulse {
        0%, 100% { opacity: 1; }
        50% { opacity: 0.7; }
    }
    /* 开关样式 */
    .toggle-switch { position: relative; display: inline-block; width: 44px; height: 24px; }
    .toggle-switch input { opacity: 0; width: 0; height: 0; }
    .toggle-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: .3s; border-radius: 24px; }
    .toggle-slider:before { position: absolute; content: ""; height: 18px; width: 18px; left: 3px; bottom: 3px; background-color: white; transition: .3s; border-radius: 50%; }
    input:checked + .toggle-slider { background-color: #10B981; }
    input:checked + .toggle-slider:before { transform: translateX(20px); }
    /* 现价闪烁动画 - 优化版 */
    .price-blink { animation: blink 1s ease-out 2; } /* 只闪烁2次 */
    @keyframes blink {
        0%, 100% { opacity: 1; }
        50% { opacity: 0.5; }
    }
    /* 表格单元格不换行 */
    .table-nowrap { white-space: nowrap; }
    /* 排序图标 */
    .sort-icon { font-size: 0.7em; margin-left: 4px; opacity: 0.5; }
    .sort-icon.active { opacity: 1; color: '#1E40AF'; }
    /* 收藏星标样式 */
    .star { color: #d1d5db; cursor: pointer; transition: color 0.2s; }
    .star:hover { color: #fbbf24; }
    .star.active { color: #fbbf24; }
    /* 预警设置弹窗 */
    .modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 100; justify-content: center; align-items: center; }
    .modal.active { display: flex; }
    .modal-content { background: white; padding: 1.5rem; border-radius: 0.5rem; width: 90%; max-width: 400px; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2); }
    /* 预警通知容器样式 */
    .alert-notifications-container {
        position: fixed;
        top: 20px;
        right: 20px;
        width: 350px;
        z-index: 1000;
        display: flex;
        flex-direction: column;
        gap: 10px;
        max-height: calc(100vh - 40px);
        overflow-y: auto;
        padding-right: 8px; /* 为滚动条预留空间 */
    }
    /* 隐藏滚动条 */
    .alert-notifications-container::-webkit-scrollbar {
        width: 6px;
    }
    .alert-notifications-container::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 3px;
    }
    .alert-notifications-container::-webkit-scrollbar-thumb {
        background: #c1c1c1;
        border-radius: 3px;
    }
    .alert-notifications-container::-webkit-scrollbar-thumb:hover {
        background: #a8a8a8;
    }
    /* 当通知数量少时隐藏滚动条 */
    .alert-notifications-container.no-scroll {
        overflow-y: hidden;
    }
    /* 预警通知样式 */
    .alert-notification {
        background: white;
        border-left: 4px solid '#F59E0B';
        border-radius: 8px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        transform: translateX(400px);
        transition: all 0.3s ease-out;
        opacity: 0;
        flex-shrink: 0; /* 防止通知被压缩 */
    }
    .alert-notification.show {
        transform: translateX(0);
        opacity: 1;
    }
    .alert-notification.high { border-left-color: '#EF4444'; }
    .alert-notification.low { border-left-color: '#10B981'; }
    .alert-notification.removing {
        transform: translateX(400px);
        opacity: 0;
    }
    /* 去掉数字输入框的箭头 */
    .no-arrows::-webkit-inner-spin-button,
    .no-arrows::-webkit-outer-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }
    .no-arrows {
        -webkit-appearance: none;
        -moz-appearance: textfield; /* Firefox */
        appearance: none;
    }
    /* 统计行样式 */
    .summary-row {
        background-color: #f8fafc;
        font-weight: 600;
        border-top: 2px solid #e2e8f0;
    }
    /* 颜色图例样式 */
    .color-legend {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-wrap: wrap;
        margin-top: 8px;
    }
    .color-square {
        width: 16px;
        height: 16px;
        border-radius: 2px;
        display: inline-block;
    }
    .color-circle {
        width: 12px;
        height: 12px;
        border-radius: 50%;
        display: inline-block;
    }
    .legend-item {
        display: flex;
        align-items: center;
        gap: 4px;
        font-size: 0.75rem;
        color: #64748B;
    }
}