/*
╔══════════════════════════════════════════════════════════╗
║  layout.css - 整体布局框架                               ║
║                                                          ║
║  📌 这个文件做什么？                                      ║
║     控制APP的"骨架"排列方式：                              ║
║     侧边栏在左边、内容在右边、底栏在最下面等                 ║
║                                                          ║
║  📌 包含哪些部分？                                        ║
║     1. 整体外壳 (.app-shell)                              ║
║     2. 侧边栏 (.sidebar) - 仅电脑端显示                   ║
║     3. 顶部栏 (.top-bar)                                  ║
║     4. 主内容区 (.main-content)                           ║
║     5. 底部导航 (.bottom-nav) - 仅手机端显示               ║
║     6. 悬浮按钮 (.fab)                                    ║
║     7. 通用组件（页面头部、空状态、标签等）                  ║
║     8. 响应式适配（电脑端 vs 手机端）                       ║
╚══════════════════════════════════════════════════════════╝
*/

/* ===== 1. 整体外壳 ===== */
.app-shell {
    display: flex;        /* 左右排列（侧边栏 + 主内容） */
    min-height: 100vh;    /* 至少占满整个屏幕高度 */
}

/* ===== 2. 侧边栏（仅电脑端显示） ===== */
.sidebar {
    width: var(--sidebar-width);  /* 宽度从 base.css 变量读取 */
    background: var(--bg-card);
    border-right: 1px solid var(--border);
    display: none;                /* 默认隐藏（手机端） */
    flex-direction: column;
    position: fixed;              /* 固定在左边，不随页面滚动 */
    top: 0; bottom: 0; left: 0;
    z-index: 200;                 /* 层级：在普通内容之上 */
    padding: 20px 14px;
}

/* 侧边栏Logo */
.sidebar-logo { display: flex; align-items: center; gap: 10px; padding: 8px 10px; margin-bottom: 28px; }
.sidebar-logo .logo-icon {
    width: 38px; height: 38px;
    background: linear-gradient(135deg, var(--primary), #FF9A5C); /* 渐变背景 */
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 18px;
    box-shadow: 0 4px 14px rgba(255,107,53,0.25); /* 发光阴影 */
}
.sidebar-logo .logo-text {
    font-size: 17px; font-weight: 700;
    background: linear-gradient(135deg, var(--primary), #FFB380);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; /* 渐变文字 */
}

/* 侧边栏导航列表 */
.sidebar-nav { list-style: none; flex: 1; }
.sidebar-nav li {
    padding: 11px 14px; border-radius: var(--radius-md);
    cursor: pointer; color: var(--text-secondary);
    font-size: 13.5px; font-weight: 500;
    display: flex; align-items: center; gap: 11px;
    margin-bottom: 2px; transition: all 0.15s;
}
.sidebar-nav li:hover { background: var(--bg-elevated); color: var(--text-primary); }
.sidebar-nav li.active { background: var(--primary-glow); color: var(--primary); font-weight: 600; }
.sidebar-nav li i { width: 18px; text-align: center; font-size: 14px; }

/* ===== 3. 主内容区域 ===== */
.main-area { flex: 1; display: flex; flex-direction: column; min-height: 100vh; }

/* ===== 4. 顶部栏 ===== */
.top-bar {
    position: sticky; top: 0; z-index: 100;  /* 固定在顶部，滚动时不消失 */
    background: rgba(11,13,19,0.88);          /* 半透明背景 */
    backdrop-filter: blur(18px);              /* 毛玻璃效果 */
    -webkit-backdrop-filter: blur(18px);
    border-bottom: 1px solid var(--border);
    padding: 0 16px; height: var(--top-bar-height);
    display: flex; justify-content: space-between; align-items: center;
}
.top-bar-left { display: flex; align-items: center; gap: 10px; }

/* 手机端Logo（电脑端隐藏） */
.mobile-logo {
    display: flex; align-items: center; gap: 8px;
    font-size: 17px; font-weight: 700;
    background: linear-gradient(135deg, var(--primary), #FFB380);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.mobile-logo i { font-size: 18px; }

/* 电脑端页面标题（手机端隐藏） */
.page-title-bar { font-size: 16px; font-weight: 700; display: none; }

/* 顶栏右侧按钮 */
.top-bar-actions { display: flex; gap: 6px; align-items: center; }

/* 图标按钮（麦克风、铃铛等） */
.icon-btn {
    width: 38px; height: 38px; border: none;
    background: var(--bg-card); border-radius: 10px;
    color: var(--text-secondary); font-size: 15px;
    cursor: pointer; position: relative; transition: all 0.15s;
    display: flex; align-items: center; justify-content: center;
}
.icon-btn:hover { background: var(--bg-elevated); color: var(--text-primary); }

/* 角标（红色小圆点数字） */
.icon-btn .badge {
    position: absolute; top: -2px; right: -2px;
    background: var(--danger); color: white;
    font-size: 10px; font-weight: 700;
    min-width: 16px; height: 16px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    border: 2px solid var(--bg); padding: 0 3px;
}

/* ===== 5. 主内容区 ===== */
.main-content {
    flex: 1;
    padding-bottom: calc(var(--bottom-nav-height) + 16px); /* 给底部导航留空间 */
    overflow-y: auto;    /* 内容超出时可以滚动 */
}

/* 页面模块（每次只显示一个） */
.module-page { display: none; animation: pageIn 0.3s ease; }
.module-page.active { display: block; } /* 有 active 类的才显示 */

/* ===== 6. 底部导航栏（仅手机端） ===== */
.bottom-nav {
    position: fixed; bottom: 0; left: 0; right: 0;
    height: var(--bottom-nav-height);
    background: rgba(11,13,19,0.92);
    backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
    border-top: 1px solid var(--border);
    display: flex; justify-content: space-around; align-items: center;
    z-index: 100;
    padding-bottom: env(safe-area-inset-bottom, 0px); /* iPhone底部安全区 */
}
.nav-item {
    flex: 1; display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    color: var(--text-muted); padding: 5px 0;
    cursor: pointer; transition: color 0.15s;
    -webkit-tap-highlight-color: transparent; /* 去掉手机点击高亮 */
    text-decoration: none;
}
.nav-item.active { color: var(--primary); } /* 当前页高亮 */
.nav-icon { font-size: 20px; margin-bottom: 2px; }
.nav-label { font-size: 10px; font-weight: 600; }

/* ===== 7. 悬浮按钮（FAB） ===== */
.fab {
    position: fixed;
    bottom: calc(var(--bottom-nav-height) + 12px); /* 在底部导航之上 */
    right: 16px; width: 52px; height: 52px;
    border-radius: 50%;     /* 圆形 */
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    border: none; color: white; font-size: 20px;
    cursor: pointer;
    box-shadow: 0 4px 20px rgba(255,107,53,0.35); /* 发光阴影 */
    transition: all 0.2s; z-index: 90;
    display: flex; align-items: center; justify-content: center;
}
.fab:active { transform: scale(0.9); }

/* ===== 8. 通用组件 ===== */

/* 区域标题（如"库存预警"、"今日营业"） */
.section-label {
    font-size: 11.5px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 1.5px; color: var(--text-muted);
    margin-bottom: 12px; display: flex; align-items: center; gap: 7px;
}
.section-label.danger { color: var(--danger); }
.section-label .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: pulse 2s infinite; }

/* 页面头部（返回按钮 + 标题 + 操作按钮） */
.page-header { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--border); }
.back-btn {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-sm); color: var(--text-secondary);
    padding: 7px 12px; font-size: 13px; cursor: pointer;
    transition: all 0.15s; font-family: inherit;
}
.back-btn:hover { background: var(--bg-elevated); color: var(--text-primary); }
.page-header h2 { flex: 1; font-size: 17px; font-weight: 700; }

/* 头部操作按钮 */
.header-btn {
    background: var(--primary); color: white; border: none;
    border-radius: var(--radius-sm); padding: 7px 14px;
    font-size: 12.5px; font-weight: 600; cursor: pointer;
    font-family: inherit; transition: all 0.12s;
    display: flex; align-items: center; gap: 5px;
}
.header-btn:hover { background: var(--primary-dark); }
.header-btn.secondary {
    background: var(--bg-elevated); color: var(--text-secondary);
    border: 1px solid var(--border);
}
.header-btn.secondary:hover { color: var(--text-primary); background: var(--bg-card-hover); }

/* 空状态（当没有数据时显示的占位提示） */
.empty-state {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 48px 20px; min-height: 200px; color: var(--text-muted); text-align: center;
}
.empty-state i { font-size: 40px; margin-bottom: 14px; opacity: 0.3; }
.empty-state h3 { font-size: 16px; margin-bottom: 4px; color: var(--text-secondary); }
.empty-state p { font-size: 13px; }

/* ===== 9. 响应式：电脑端适配 ===== */
@media (min-width: 768px) {
    .sidebar { display: flex; }                          /* 电脑端：显示侧边栏 */
    .main-area { margin-left: var(--sidebar-width); }    /* 内容右移，给侧边栏让位 */
    .mobile-logo { display: none; }                      /* 隐藏手机Logo */
    .page-title-bar { display: block; }                  /* 显示页面标题 */
    .bottom-nav { display: none; }                       /* 隐藏底部导航 */
    .fab { bottom: 20px; right: 20px; }                  /* 调整悬浮按钮位置 */
    .main-content { padding-bottom: 20px; }              /* 减少底部留白 */

    /* 各区域加大内边距 */
    .page-header, .filter-area { padding-left: 28px; padding-right: 28px; }
}

/* ===== 10. 响应式：小手机适配 ===== */
@media (max-width: 480px) {
    /* 小屏幕缩减列数 */
}