/**
 * PPT 演示文稿编辑器 - 样式文件
 * 与 word.css 配合使用
 */

/* ===== 根变量 ===== */
:root {
    --bg: #f0f2f5;
    --sb: #e8eaed;
    --tb: #fff;
    --tp: #333;
    --accent: #2b5797;
    --acc: #4472C4;
    --bor: #d0d0d0;
    --tex: #333;
    --hov: #e8eaf0;
    --sel: #4472C430;
    --diy: #444;
}

/* ===== 深色模式 ===== */
[data-dark="1"] {
    --bg: #1e1e1e;
    --sb: #2d2d2d;
    --tb: #333;
    --tp: #ccc;
    --accent: #1a4a8a;
    --acc: #2b5797;
    --bor: #404040;
    --tex: #ccc;
    --hov: #3a3a3a;
    --sel: #2b579730;
    --diy: #888;
}

/* ===== 护眼模式 ===== */
[data-dk="1"] {
    --bg: #f7f4eb;
    --sb: #eee8db;
    --tb: #faf8f3;
    --tp: #333;
    --accent: #a8966e;
    --acc: #b8860b;
    --bor: #d0c8b0;
    --tex: #333;
    --hov: #eee8db;
    --sel: #b8860b20;
}

/* ===== 选中高亮 ===== */
::selection {
    background: #b4d7ff;
}

/* ===== 滚动条样式 ===== */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #a1a1a1;
}

/* ===== 工具栏按钮悬停效果 ===== */
.tbtn:hover {
    background-color: rgba(68, 114, 196, 0.1);
}

.tbtn:active {
    background-color: rgba(68, 114, 196, 0.15);
}

/* ===== 下拉菜单项悬停 ===== */
.dmenu .ditem:hover {
    background-color: #eff6ff;
}

/* ===== 幻灯片缩略图悬停 ===== */
.sitem:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* ===== 模板项悬停效果 ===== */
.tem-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 16px rgba(68, 114, 196, 0.2);
}

/* ===== 动画列表项悬停 ===== */
.anim-item:hover,
.anim-item.act {
    background: #eff6ff;
    color: #2b5797;
}

/* ===== 加载动画 ===== */
.loading-spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 3px solid rgba(68, 114, 196, 0.3);
    border-radius: 50%;
    border-top-color: #4472C4;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ===== 暗色模式增强 ===== */
body.dark .tbtn {
    color: #ccc;
}

body.dark .tbtn:hover {
    background: #3a3a3a;
}

body.dark .sidebar {
    background: #2d2d2d;
    border-color: #404040;
}

body.dark .status-bar {
    background: #2d2d2d;
    border-color: #404040;
    color: #ccc;
}

/* ===== 护眼模式增强 ===== */
body.eye-care {
    background: #c7edcc;
}

body.eye-care .sidebar {
    background: #eee8db;
}

body.eye-care .status-bar {
    background: #eee8db;
}

/* ===== 打印样式 ===== */
@media print {
    .sidebar,
    .pbox,
    .status-bar,
    .head,
    .toolbar {
        display: none !important;
    }
    
    .canvas-bg {
        box-shadow: none;
        margin: 0;
        padding: 0;
    }
}

/* ===== 响应式布局 ===== */
@media (max-width: 1024px) {
    .sidebar {
        position: fixed;
        left: 0;
        top: 100px;
        bottom: 32px;
        z-index: 100;
        transform: translateX(-100%);
        transition: transform 0.3s ease;
    }
    
    .sidebar.show {
        transform: translateX(0);
    }
    
    .pbox {
        position: fixed;
        right: 0;
        top: 100px;
        bottom: 32px;
        z-index: 100;
        transform: translateX(100%);
        transition: transform 0.3s ease;
    }
    
    .pbox.show {
        transform: translateX(0);
    }
}