/**
 * 全站公共框架层 —— 印刷厂管理系统
 * ------------------------------------------------------------
 * 统一定义「框架骨架」：加载遮罩 / 顶栏 / 侧边栏 / 主内容区 / 页头 / 卡片 / 按钮
 *
 * 用法：在 <head> 中**最先**引入（页面自身的 <style> 仍在后面，优先级更高，
 *       因此引入本文件不会改变任何既有页面的外观，只补齐公共基础）
 *   <link rel="stylesheet" href="/css/layout.css">
 *
 * 约定：本文件只管「框架」。表单、表格、弹窗等业务组件样式仍由各页面自定义，
 *       以免破坏既有页面。新建页面建议直接依赖本文件，不再重复粘贴框架样式。
 */

/* ============ 基础 ============ */
* { box-sizing: border-box; }
body {
    margin: 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #f5f5f5;
    color: #333;
}

/* ============ 加载遮罩（配合各页面 document.write 的 #plm 节点） ============ */
#plm{position:fixed;inset:0;z-index:2147483647;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:18px;background:linear-gradient(135deg,#e8ecff,#fce4ec);transition:opacity .4s}
#plm.hide{opacity:0;pointer-events:none}
#plm .ring{width:44px;height:44px;border-radius:50%;border:4px solid #ddd;border-top-color:#667eea;animation:sp .7s linear infinite}
#plm p{margin:0;font-size:13px;color:#a0aec0;animation:fn 1.4s ease-in-out infinite}
@keyframes sp{to{transform:rotate(360deg)}}
@keyframes fn{0%,100%{opacity:.4}50%{opacity:1}}

/* ============ 顶栏 ============ */
.header {
    background: white; box-shadow: 0 2px 4px rgba(0,0,0,0.1); padding: 0 20px;
    display: flex; justify-content: space-between; align-items: center;
    height: 60px; position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
}
.logo { font-size: 20px; font-weight: bold; color: #667eea; cursor: pointer; }
.menu-toggle { display: none; font-size: 24px; cursor: pointer; color: #667eea; }
.user-info { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.user-info button {
    padding: 6px 12px; background: #e74c3c; color: white;
    border: none; border-radius: 4px; cursor: pointer; font-size: 12px;
}
.user-info .btn-back { background: #667eea; }

/* ============ 侧边栏（配合 /js/sidebar.js） ============ */
.sidebar {
    background: #2c3e50; color: white; width: 250px; height: calc(100vh - 60px);
    position: fixed; left: 0; top: 60px; overflow-y: auto; transition: transform 0.3s ease;
}
.sidebar-nav { padding: 20px 0; }
.nav-item { padding: 12px 20px; cursor: pointer; transition: background 0.3s; }
.nav-item:hover, .nav-item.active { background: #34495e; }

/* 多级菜单：父项 / 箭头 / 子菜单 / 收起全部 */
.nav-parent { display: flex; align-items: center; }
.menu-title { flex: 1; }
.menu-arrow { margin-left: auto; transition: transform 0.3s ease; font-size: 12px; }
.nav-parent.expanded .menu-arrow { transform: rotate(90deg); }
.nav-submenu { overflow: hidden; }
.sidebar-toggle-all {
    display: flex; align-items: center; padding: 12px 20px; cursor: pointer;
    color: white; border-bottom: 1px solid rgba(255,255,255,0.1);
    font-size: 14px; transition: background 0.3s;
}
.sidebar-toggle-all:hover { background: #34495e; }
.sidebar-toggle-all i { margin-right: 8px; transition: transform 0.3s; }

/* ============ 主内容区 ============ */
.main-content {
    margin-left: 250px; padding: 20px; margin-top: 60px;
    min-height: calc(100vh - 60px); transition: margin-left 0.3s ease;
}

/* ============ 页头 ============ */
.page-header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 16px; flex-wrap: wrap; gap: 10px;
}
.page-header h2 { font-size: 22px; margin: 0; }
.page-header .breadcrumb { font-size: 13px; color: #999; margin-top: 4px; }

/* ============ 卡片 ============ */
.card {
    background: white; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.06);
    margin-bottom: 14px; overflow: hidden;
}
.card-header {
    padding: 12px 16px; border-bottom: 1px solid #eee;
    display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px;
}
.card-header h3 { font-size: 15px; margin: 0; display: flex; align-items: center; gap: 6px; }
.card-body { padding: 16px; }

/* ============ 按钮 ============ */
.btn {
    padding: 8px 16px; border: none; border-radius: 4px; cursor: pointer;
    font-size: 14px; transition: all 0.2s; display: inline-flex; align-items: center; gap: 5px;
}
.btn-primary { background: #667eea; color: white; }
.btn-primary:hover { background: #5a6fd6; }
.btn-success { background: #27ae60; color: white; }
.btn-success:hover { background: #219a52; }
.btn-warning { background: #f39c12; color: white; }
.btn-warning:hover { background: #e08e0b; }
.btn-danger { background: #e74c3c; color: white; }
.btn-danger:hover { background: #c0392b; }
.btn-info { background: #3498db; color: white; }
.btn-info:hover { background: #2980b9; }
.btn-sm { padding: 5px 10px; font-size: 12px; }
.btn-xs { padding: 3px 8px; font-size: 11px; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ============ 折叠按钮（卡片可折叠时用） ============ */
.fold-btn {
    background: white; border: 1px solid #e0e0e0; border-radius: 4px;
    width: 26px; height: 26px; cursor: pointer; color: #999; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    transition: all 0.2s; font-size: 12px;
}
.fold-btn:hover { background: #f0f2ff; color: #667eea; border-color: #667eea; }

/* ============ 移动端 ============ */
@media (max-width: 768px) {
    .main-content { margin-left: 0; padding: 15px; }
    .menu-toggle { display: block; }
    .sidebar { transform: translateX(-100%); z-index: 1001; }
    .sidebar.active { transform: translateX(0); }
}