/*
 * 统一提示外观（daisyui 客户端主题）
 * ---------------------------------------------------------------
 * 背景：本主题的提示来自三个组件，外观原本互不相同 ——
 *   1) 主题自带 Toast（login/register 页里的 .toast-container/.toast-item）
 *   2) FastAdmin 的 Layer（layer.msg，走 .layui-layer-msg）
 *   3) FastAdmin 的 Toastr（Fast.api.toast，走 #toast-container）
 * 用户视角下这是"同一个站点在弹三种不同样子的提示"，因此这里把 2)、3) 的
 * 外观对齐到 1) 的语言：右上角堆叠、圆角 12px、左侧 4px 色条、半透明毛玻璃、
 * 软阴影、14px/500 字重、向右滑入。
 *
 * 注意：
 *  - 只改"轻提示"（Layer 的 msg / tips 类型、Toastr 通知）。Layer 的对话框
 *    （alert/confirm，.layui-layer-dialog/.layui-layer-page）保持居中不动 ——
 *    那类是要用户做决定的，挪到角落反而不对。
 *  - Layer 用内联 top/left 定位，必须 !important 才能改位；同屏多层的场景很少，
 *    万一叠加，后出现的会盖住前一个。
 *  - 本文件必须在 layer.css / toastr.min.css 之后引入。
 */

/* ============ 主题提示的动画（与 login/register 内联样式一致） ============ */
@keyframes dshToastSlide {
    from { opacity: 0; transform: translateX(120px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes dshToastFade {
    from { opacity: 1; transform: translateX(0); }
    to   { opacity: 0; transform: translateX(120px); }
}

/* ============ 1) Layer 轻提示（layer.msg） ============ */
.layui-layer.layui-layer-msg,
.layui-layer.layui-layer-tips {
    top: 20px !important;
    right: 20px !important;
    left: auto !important;
    min-width: 240px !important;
    max-width: 360px !important;
    width: auto !important;
    padding: 14px 20px !important;
    border: 0 !important;
    border-left: 4px solid #3b82f6 !important;
    border-radius: 12px !important;
    background: rgba(239, 246, 255, 0.95) !important;
    color: #1e40af !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08) !important;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    animation: dshToastSlide 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.layui-layer.layui-layer-msg .layui-layer-content {
    padding: 0 !important;
    color: inherit !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    overflow: visible !important;
}
/* Layer 的内容区带行高高度限制，这里放开以免长文案被裁切 */
.layui-layer.layui-layer-msg .layui-layer-content:not(.layui-layer-padding) {
    height: auto !important;
}
/* 关闭按钮：对齐主题的"裸 ×"观感，去掉方框与背景图 */
.layui-layer.layui-layer-msg .layui-layer-setwin {
    top: 8px !important;
    right: 10px !important;
}
.layui-layer.layui-layer-msg .layui-layer-setwin .layui-layer-close,
.layui-layer.layui-layer-msg .layui-layer-close {
    background: none !important;
    width: 16px !important;
    height: 16px !important;
    color: currentColor !important;
    opacity: 0.45;
    font-size: 14px;
    line-height: 16px;
    text-align: center;
}
.layui-layer.layui-layer-msg .layui-layer-setwin .layui-layer-close:hover,
.layui-layer.layui-layer-msg .layui-layer-close:hover {
    opacity: 0.9;
}
/* 图标：不显示第三方图标位，颜色语义交给左侧色条 */
.layui-layer.layui-layer-msg .layui-layer-ico,
.layui-layer.layui-layer-tips .layui-layer-ico {
    display: none !important;
}

/* 按 Layer 的图标类做语义配色（浏览器支持 :has 时生效；不支持则保持中性蓝） */
.layui-layer.layui-layer-msg:has(.layui-layer-ico1) {
    border-left-color: #22c55e !important;
    background: rgba(240, 253, 244, 0.95) !important;
    color: #166534 !important;
}
.layui-layer.layui-layer-msg:has(.layui-layer-ico2) {
    border-left-color: #ef4444 !important;
    background: rgba(254, 242, 242, 0.95) !important;
    color: #991b1b !important;
}
.layui-layer.layui-layer-msg:has(.layui-layer-ico3),
.layui-layer.layui-layer-msg:has(.layui-layer-ico4) {
    border-left-color: #f59e0b !important;
    background: rgba(255, 251, 235, 0.95) !important;
    color: #92400e !important;
}

/* ============ 2) Toastr 通知（Fast.api.toast） ============ */
#toast-container {
    position: fixed !important;
    top: 20px !important;
    right: 20px !important;
    left: auto !important;
    bottom: auto !important;
    width: auto !important;
    max-width: none !important;
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 9999999 !important;
    pointer-events: none;
}
#toast-container > div.toast {
    position: relative !important;
    width: auto !important;
    min-width: 240px;
    max-width: 360px;
    padding: 14px 34px 14px 20px !important;
    border: 0 !important;
    border-left: 4px solid #3b82f6 !important;
    border-radius: 12px !important;
    background: rgba(239, 246, 255, 0.95) !important;
    color: #1e40af !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.5 !important;
    opacity: 1 !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08) !important;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    pointer-events: auto;
    animation: dshToastSlide 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
#toast-container > div.toast:hover {
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.16), 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}
/* 语义配色 */
#toast-container > div.toast-error {
    border-left-color: #ef4444 !important;
    background: rgba(254, 242, 242, 0.95) !important;
    color: #991b1b !important;
}
#toast-container > div.toast-success {
    border-left-color: #22c55e !important;
    background: rgba(240, 253, 244, 0.95) !important;
    color: #166534 !important;
}
#toast-container > div.toast-warning {
    border-left-color: #f59e0b !important;
    background: rgba(255, 251, 235, 0.95) !important;
    color: #92400e !important;
}
#toast-container > div.toast-info {
    border-left-color: #3b82f6 !important;
    background: rgba(239, 246, 255, 0.95) !important;
    color: #1e40af !important;
}
/* Toastr 自带的图标位（背景图）关掉，语义交给左侧色条 */
#toast-container > div.toast > .toast-ico {
    display: none !important;
}
#toast-container > .toast > .toast-message {
    color: inherit !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
}
/* 关闭按钮：与主题一致的小号淡色 × */
#toast-container > .toast > .toast-close-button {
    position: absolute !important;
    top: 8px !important;
    right: 10px !important;
    left: auto !important;
    width: 16px !important;
    height: 16px !important;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
    color: currentColor !important;
    opacity: 0.45 !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 16px !important;
    text-shadow: none !important;
}
#toast-container > .toast > .toast-close-button:hover {
    opacity: 0.9 !important;
}
/* Toastr 的倒计时进度条：改成左侧色条的延伸观感 */
#toast-container > .toast > .toast-progress {
    height: 3px !important;
    width: 100% !important;
    left: 0;
    bottom: 0;
    border-radius: 0 0 12px 12px;
    background: currentColor !important;
    opacity: 0.25;
}

/* ============ 3) 兜底：窄屏时收紧宽度，避免溢出被裁切 ============ */
@media (max-width: 480px) {
    .layui-layer.layui-layer-msg,
    .layui-layer.layui-layer-tips,
    #toast-container > div.toast {
        right: 10px !important;
        left: 10px !important;
        min-width: 0 !important;
        max-width: none !important;
    }
}

/* ============ 4) 权威定义：主题自带 Toast 的卡片样式 ============
 * 这段原本只内联在 login.html / register.html 里，其它页面拿不到，
 * 于是用户中心页只能退化成 Tailwind 的 alert 块（又一种外观）。
 * 提到这里后，全主题的 .toast-item 只有这一份定义。
 * login/register 里保留的同名内联规则值完全一致，属无害重复。
 */
.toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999999;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
}
.toast-item {
    padding: 14px 20px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    pointer-events: auto;
    min-width: 240px;
    max-width: 360px;
    border-left: 4px solid;
    animation: dshToastSlide 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.toast-item.hiding {
    animation: dshToastFade 0.3s ease forwards;
}
.toast-item.toast-error {
    background: rgba(254, 242, 242, 0.95);
    border-left-color: #ef4444;
    color: #991b1b;
}
.toast-item.toast-success {
    background: rgba(240, 253, 244, 0.95);
    border-left-color: #22c55e;
    color: #166534;
}
.toast-item.toast-warning {
    background: rgba(255, 251, 235, 0.95);
    border-left-color: #f59e0b;
    color: #92400e;
}
.toast-item.toast-info {
    background: rgba(239, 246, 255, 0.95);
    border-left-color: #3b82f6;
    color: #1e40af;
}
.toast-item .toast-icon {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
@media (max-width: 480px) {
    .toast-container {
        left: 10px;
        right: 10px;
    }
    .toast-item {
        min-width: 0;
        max-width: none;
    }
}