/**
 * 桌面布局样式
 */

/* 设置桌面背景 */
body {
    /* 使用变量作为背景以支持主题切换 */
    background: var(--color-bg-deep);
    background-attachment: fixed;
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    color: var(--color-text-primary);
    transition: background 0.5s ease;
    /* 切换主题时平滑过渡 */
}

.desktop-layout {
    display: flex;
    flex-direction: column;
    height: 100vh;
    width: 100%;
    position: relative;
}

/* 主内容区域（桌面空间） */
#desktop-content {
    flex: 1;
    position: relative;
    padding: 0;
    overflow: hidden;
    /* 防止窗口拖出产生的滚动条 */
}

/* 窗口容器（包裹实际页面内容） */
.window-container {
    background: var(--color-bg-primary);
    color: var(--color-text-primary);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.12),
        0 2px 8px rgba(0, 0, 0, 0.08);

    min-width: 320px;
    min-height: 200px;

    position: absolute;
    display: flex;
    flex-direction: column;

    /* 优化的弹出动画 - 更流畅的贝塞尔曲线 */
    animation: windowPopup 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);

    z-index: 50;

    /* 增强磨砂玻璃效果 */
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);

    /* 精细的过渡效果 - 仅针对视觉属性，不影响拖拽性能 */
    transition:
        opacity 0.25s ease,
        box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        border-color 0.3s ease;

    /* 窗口边缘微光效果 */
    outline: 1px solid rgba(255, 255, 255, 0.05);
    outline-offset: -1px;
}

/* 失焦状态 - 柔和的视觉降级 */
.window-container:not(.active) {
    box-shadow:
        0 4px 16px rgba(0, 0, 0, 0.08),
        0 1px 4px rgba(0, 0, 0, 0.05);
    border-color: var(--color-border-light);
    opacity: 0.95;
}

/* 激活状态 - 突出显示 */
.window-container.active {
    box-shadow:
        0 24px 80px rgba(0, 0, 0, 0.25),
        0 8px 24px rgba(0, 0, 0, 0.15),
        0 0 1px rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
    opacity: 1;
}

/* 最小化状态 - 平滑缩小到 Dock 方向 */
.window-container.minimized {
    opacity: 0 !important;
    transform: scale(0.5) translateY(100px) !important;
    pointer-events: none !important;
    transition:
        opacity 0.25s cubic-bezier(0.4, 0, 1, 1),
        transform 0.3s cubic-bezier(0.4, 0, 1, 1) !important;
}

/* 最小化完成后隐藏（使用动画延迟） */
.window-container.minimized {
    animation: windowMinimize 0.3s ease forwards;
}

@keyframes windowMinimize {
    0% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }

    100% {
        opacity: 0;
        transform: scale(0.5) translateY(100px);
        visibility: hidden;
    }
}

/* 最大化状态 - 覆盖全屏（包括顶部状态栏） */
.window-container.maximized {
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    /* 使用 100% 避免 vw/vh 滚动条问题 */
    height: 100% !important;
    border-radius: 0 !important;
    transform: none !important;
    border: none !important;
    box-shadow: none !important;

    /* 移除固定 Z-Index，由 JS 控制层级 */
    /* z-index: 2000 !important; */
}

/* 最大化时禁用调整手柄 */
.window-container.maximized .resize-handle {
    display: none !important;
}

/* 关闭动画 - 优雅的缩小淡出 */
.window-container.closing {
    animation: windowClose 0.25s cubic-bezier(0.4, 0, 1, 1) forwards;
}

@keyframes windowClose {
    0% {
        opacity: 1;
        transform: scale(1);
        filter: blur(0);
    }

    100% {
        opacity: 0;
        transform: scale(0.92);
        filter: blur(4px);
    }
}

/* 调整大小手柄 */
.resize-handle {
    position: absolute;
    z-index: 100;
}

.resize-handle.n {
    top: -5px;
    left: 0;
    right: 0;
    height: 10px;
    cursor: ns-resize;
}

.resize-handle.s {
    bottom: -5px;
    left: 0;
    right: 0;
    height: 10px;
    cursor: ns-resize;
}

.resize-handle.e {
    right: -5px;
    top: 0;
    bottom: 0;
    width: 10px;
    cursor: ew-resize;
}

.resize-handle.w {
    left: -5px;
    top: 0;
    bottom: 0;
    width: 10px;
    cursor: ew-resize;
}

.resize-handle.ne {
    top: -5px;
    right: -5px;
    width: 15px;
    height: 15px;
    cursor: ne-resize;
}

.resize-handle.se {
    bottom: -5px;
    right: -5px;
    width: 15px;
    height: 15px;
    cursor: se-resize;
}

.resize-handle.sw {
    bottom: -5px;
    left: -5px;
    width: 15px;
    height: 15px;
    cursor: sw-resize;
}

.resize-handle.nw {
    top: -5px;
    left: -5px;
    width: 15px;
    height: 15px;
    cursor: nw-resize;
}



.window-container.maximized {
    width: 100vw !important;
    height: 100vh !important;
    max-width: none !important;
    border-radius: 0 !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    margin: 0 !important;
    /* 移除硬编码 z-index，由 JS WindowManager 统一管理 */
    box-shadow: none !important;
    border: none !important;
}

.window-container.maximized .window-header {
    border-radius: 0;
}

.window-container.maximized .window-body {
    border-radius: 0;
}

/* 优化的窗口弹出动画 - 带有微妙弹跳效果 */
@keyframes windowPopup {
    0% {
        transform: scale(0.88) translateY(20px);
        opacity: 0;
        filter: blur(8px);
    }

    60% {
        transform: scale(1.02) translateY(-2px);
        opacity: 1;
        filter: blur(0);
    }

    100% {
        transform: scale(1) translateY(0);
        opacity: 1;
        filter: blur(0);
    }
}

.window-header {
    height: 48px;
    min-height: 48px;
    /* 稍高的标题栏 */
    background: var(--color-bg-secondary);
    /* 主题头部背景 */
    display: flex;
    align-items: center;
    padding: 0 16px;
    border-bottom: 1px solid var(--color-border-light);
    border-radius: 12px 12px 0 0;
    /* 匹配容器圆角 */
}

/* 交通红绿灯按钮 - 纯色风格加黑色图标 */
.window-controls {
    display: flex;
    gap: 8px;
    /* 恢复紧凑间距 */
}

.window-btn {
    width: 14px;
    /* 恢复标准尺寸 */
    height: 14px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s ease;
    box-shadow: none;
    /* 移除阴影 */
}

/* 悬停时稍微加深 */
.window-btn:hover {
    opacity: 0.8;
}

/* 适配字体图标 */
/* 适配字体图标 */
.window-btn i,
.window-btn [class^="ri-"] {
    font-size: 10px !important;
    color: #000000 !important;
    opacity: 0 !important;
    /* 默认隐藏 */
    font-weight: 900 !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    line-height: normal !important;
    transform: none !important;
    visibility: visible !important;
    width: 100% !important;
    height: 100% !important;
    transition: opacity 0.2s ease !important;
    /* 添加过渡 */
}

/* 悬停在控制区域时显示图标 */
.window-controls:hover .window-btn i {
    opacity: 1 !important;
}

.window-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
}

/* 单独微调每个图标的视觉中心 */
.window-btn.minimize i {
    font-size: 10px !important;
    transform: translateY(-0.5px) !important;
    /* 字体横线通常偏低，稍微上提 */
}

.window-btn.maximize i {
    font-size: 9px !important;
    /* 最大化框稍微小一点点更精致 */
    font-weight: 600 !important;
    /* 稍微细一点，避免糊成一团 */
}

.window-btn.close i {
    transform: scale(1.1) !important;
    /* 关闭叉号稍微放大 */
}

.window-btn.close {
    background-color: #ff5f56;
    /* 纯红 */
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.window-btn.minimize {
    background-color: #ffbd2e;
    /* 纯黄 */
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.window-btn.maximize {
    background-color: #27c93f;
    /* 纯绿 */
    border: 1px solid rgba(0, 0, 0, 0.1);
}

/* 最大化按钮重置 (清理多余代码块) */
.window-btn.maximize {
    background-color: #27c93f;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.window-btn.maximize:hover {
    background-color: #27c93f;
    box-shadow: none;
}

/* 点击时的缩放反馈 */
.window-btn:active {
    transform: scale(0.9);
    filter: brightness(0.9);
}

.window-title {
    flex: 1;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-primary);
    pointer-events: none;
    margin-right: 52px;
    /* 平衡控制按钮的宽度 */
}

.window-body {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
    position: relative;
    background: var(--color-bg-primary);
    border-radius: 0 0 12px 12px;
    /* 确保主体匹配容器主题 */
}

/* 隐藏有冲突的默认页面样式 */
.page {
    background: transparent !important;
    padding: 0 !important;
    box-shadow: none !important;
    color: inherit;
}

.card {
    background: var(--color-bg-secondary) !important;
    /* 窗口内的卡片 */
    background: rgba(255, 255, 255, 0.05) !important;
    /* 温和的色调 */
    border: 1px solid var(--color-border-light) !important;
    box-shadow: var(--shadow-sm) !important;
    color: var(--color-text-primary) !important;
    border-radius: 8px !important;
}

/* 通用表格/表单修复 */
.table th {
    background: var(--color-bg-tertiary);
    color: var(--color-text-secondary);
    border-bottom-color: var(--color-border-light);
}

.table td {
    border-bottom-color: var(--color-border-light);
    color: var(--color-text-primary);
}

.form-input,
.form-select,
.form-textarea {
    background: var(--color-bg-tertiary);
    /* 输入框背景 */
    border: 1px solid var(--color-border);
    color: var(--color-text-primary);
}

.form-input:focus {
    border-color: var(--color-primary);
    background: var(--color-bg-primary);
    /* 聚焦时变亮 */
}

/* 下拉菜单选项主题修复 */
:root.theme-neon option,
:root.theme-sunrise option {
    background-color: var(--color-bg-secondary);
    color: var(--color-text-primary);
}

/* ===== 桌面小部件样式 ===== */
.desktop-widgets {
    position: absolute;
    top: 38%;
    /* 视觉中心 */
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    pointer-events: none;
    z-index: 0;
    /* 在最底层 */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    transition: opacity 0.4s ease, transform 0.6s cubic-bezier(0.19, 1, 0.22, 1);
    user-select: none;
}

/* 当有窗口激活（打开）时，淡出并缩小 */
.desktop-widgets.blur-out {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.9);
    filter: blur(10px);
}

.widget-clock {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.widget-clock-time {
    font-size: 110px;
    font-weight: 200;
    margin: 0;
    line-height: 1;
    color: var(--color-text-primary);
    /* 渐变文字效果 - 增强质感 */
    background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.7) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.15));
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    letter-spacing: -4px;
}

/* 浅色模式文字 */
:root.theme-sunrise .widget-clock-time {
    background: linear-gradient(180deg, #111827 0%, #4B5563 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.widget-clock-date {
    font-size: 20px;
    font-weight: 400;
    color: var(--color-text-secondary);
    /* 次要文字颜色 */
    /* 如果是深色背景，确保次要文字也清晰 */
    color: rgba(255, 255, 255, 0.7);
    margin-top: 16px;
    letter-spacing: 2px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    text-transform: uppercase;
}

:root.theme-sunrise .widget-clock-date {
    color: rgba(0, 0, 0, 0.6);
    text-shadow: none;
}

.widget-greeting {
    margin-top: 10px;
    font-size: 22px;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.9);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    opacity: 0;
    animation: fadeIn 1s 0.5s forwards ease-out;
}

:root.theme-sunrise .widget-greeting {
    color: rgba(0, 0, 0, 0.8);
    text-shadow: none;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}