@charset "utf-8";

/* ================= 亮色主题 (默认) ================= */
:root {
    /* ----- 基础背景层 ----- */
    --页面背景色: #f5f5f5;
    --面板背景色: #FFFFFF;
    --卡片背景色: #FFFFFF;
    
    /* ----- 文本颜色体系 ----- */
    --主要文本颜色: #0F172A;
    --次要文本颜色: #475569;
    --禁用文本颜色: #94A3B8;
    --反色文本: #FFFFFF;      /* 用于深色按钮上的文字 */
    
    /* ----- 边框 & 分割线 ----- */
    --边框颜色: #E2E8F0;
    --分割线颜色: #E2E8F0;
    
    /* ----- 品牌主色（明亮蓝）----- */
    --主色: #3B82F6;
    --主色悬停: #2563EB;
    --主色淡背景: #EFF6FF;    /* 用于选中或高亮轻提示 */
    
    /* ----- 主要按钮（基于主色） ----- */
    --主要按钮背景色: #3B82F6;
    --主要按钮悬停背景色: #2563EB;
    --主要按钮文字色: #FFFFFF;

    /* ----- 次要按钮（透明/浅灰风格）----- */
    --次要按钮背景色: #FFFFFF;
    --次要按钮悬停背景色: #F1F5F9;
    
    /* ----- 链接颜色 ----- */
    --链接颜色: #3B82F6;
    --链接悬停颜色: #1E40AF;
    
    /* ----- 功能色系: 成功/警告/错误/信息 (背景+文字+边框)----- */
    --成功色: #10B981;
    --成功背景色: #D1FAE5;
    --成功文字色: #065F46;
    
    --警告色: #F59E0B;
    --警告背景色: #FEF3C7;
    --警告文字色: #92400E;
    
    --错误色: #EF4444;
    --错误背景色: #FEE2E2;
    --错误文字色: #991B1B;
    
    --信息色: #6366F1;
    --信息背景色: #E0E7FF;
    --信息文字色: #3730A3;
    
    /* ----- 阴影 (轻盈层次感) ----- */
    --卡片阴影: 0 0 10px 0 #00000033;
}

/* ================= 暗色主题 (通过 data-theme="dark" 激活) ================= */
:root[data-主题="暗色"] {
    /* ----- 基础背景层 (深邃科技感) ----- */
    --页面背景色: #1a1d21;
    --面板背景色: #25282e;
    --卡片背景色: #25282e;
    
    /* ----- 文本颜色体系 (柔和明亮) ----- */
    --主要文本颜色: #F1F5F9;
    --次要文本颜色: #aaa;
    --禁用文本颜色: #64748B;
    --反色文本: #0F172A;
    
    /* ----- 边框 & 分割线 (微妙边界) ----- */
    --边框颜色: #334155;
    --分割线颜色: #334155;
    
    /* ----- 品牌主色 (暗色主题下更鲜活的蓝色) ----- */
    --主色: #60A5FA;
    --主色悬停: #3B82F6;
    --主色淡背景: #1E3A8A;
    
    /* ----- 主要按钮 (主色亮眼) ----- */
    --主要按钮背景色: #3B82F6;
    --主要按钮悬停背景色: #60A5FA;
    --主要按钮文字色: #FFFFFF;
    
    /* ----- 次要按钮 (暗色半透明系) ----- */
    --次要按钮背景色: #1E293B;
    --次要按钮悬停背景色: #334155;
    
    /* ----- 链接颜色 (保持品牌识别) ----- */
    --链接颜色: #60A5FA;
    --链接悬停颜色: #93C5FD;
    
    /* ----- 功能色系: 暗色模式下依然高可读性 & 悦目 ----- */
    --成功色: #34D399;
    --成功背景色: #064E3B;
    --成功文字色: #A7F3D0;
    
    --警告色: #FBBF24;
    --警告背景色: #78350F;
    --警告文字色: #FDE68A;
    
    --错误色: #F87171;
    --错误背景色: #7F1D1D;
    --错误文字色: #FECACA;
    
    --信息色: #818CF8;
    --信息背景色: #312E81;
    --信息文字色: #C7D2FE;
    
    /* ----- 阴影 (暗色模式下更沉更内敛) ----- */
    --卡片阴影: 0 0 10px 0 #000000bf;
}



html { height: 100%; }

body.收银主体 { height: 100%; width: 100%; margin: 0; overflow: hidden; }

header.主页页眉 { position: relative; background: var(--卡片背景色); height: 3rem; width: calc(100% - 4vw); padding: 0 2vw; display: flex; z-index: 100; box-shadow: var(--卡片阴影); border-bottom: 1px solid #9b9b9b; align-items: center; }

div.标识分区 { display: flex ; align-items: center; position: relative; }

img.标识图片 { display: block; height: 1.5rem; margin-right: .5rem; }

h1.店名标题 { font-size: large; color: var(--次要文本颜色); }

ul.页眉列表 { display: flex; list-style: none; background: var(--卡片背景色); }

li.页眉项目 { margin: 0 10px; position: relative; }

li.页眉项目:hover::before { background-color: var(--次要文本颜色); bottom: 0; content: ""; height: 0.1875rem; left: 0; position: absolute; width: 100%; }

li.页眉最后项目 {margin-left: auto;display: flex;align-items: center;position: relative;}

li.页眉最后项目:hover::before { background-color: var(--卡片背景色); bottom: 0; content: ""; height: 0.1875rem; left: 0; position: absolute; width: 100%; }

img.头像图片 { width: 1.5rem; aspect-ratio: 1; object-fit: cover; border-radius: 1rem; }

a.主导航链接 { display: block; width: 100%; padding: .5rem 0; color: var(--次要文本颜色); text-decoration: none; font-weight: bold; cursor: default; user-select: none; }

main.主页主要 { height: calc(100% - 3.1rem); width: 100%; overflow: hidden; }

article.分页文章 { display: none; height: 100%; width: 100%; overflow: hidden; background: var(--页面背景色); position: relative; }

section.侧边栏部分 { background: var(--面板背景色); }

section.内容展示部分 { overflow: hidden auto; }

section.内容展示部分::-webkit-scrollbar { display: none; }

ul.内容展示列表 { display: flex; flex-wrap: wrap; margin: 0; padding: 1rem; }

footer.主页页脚 { display: none }



.开关输入{appearance:none;width:40px;height:20px;background:#ccc;border-radius:20px;position:relative;cursor:pointer;transition:.3s;}
.开关输入:checked{background:#34C759;}
.开关输入::before{content:'';position:absolute;width:16px;height:16px;background:#fff;border-radius:50%;top:2px;left:2px;transition:.3s;}
.开关输入:checked::before{transform:translateX(20px);}


section.自适应网格部分 { width: calc(100% - 2rem); padding: 1rem; overflow: hidden auto; display: grid; grid-auto-rows: minmax(15rem, auto); grid-gap: 1.25rem; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
section.自适应网格部分::-webkit-scrollbar { display: none; }
.成功绩效分区 { background: var(--卡片背景色); border-radius: .5rem; padding: 1rem; border-top: 2px solid var(--成功色); box-shadow: var(--卡片阴影); }
.警告绩效分区 { background: var(--卡片背景色); border-radius: .5rem; padding: 1rem; border-top: 2px solid var(--警告色); box-shadow: var(--卡片阴影); }
.失败绩效分区 { background: var(--卡片背景色); border-radius: .5rem; padding: 1rem; border-top: 2px solid var(--错误色); box-shadow: var(--卡片阴影); }
.指标标题分区 { display: flex; align-items: center; }
img.指标图片 { width: 1rem; height: 1rem; object-fit: contain; }
h3.指标标题 { margin: .5rem; font-size: 1rem; color: var(--主要文本颜色); }
p.成功指标段落 { text-align: center; font-size: 3rem; color: var(--成功色); }
p.警告指标段落 { text-align: center; font-size: 3rem; color: var(--警告色); }
p.失败指标段落 { text-align: center; font-size: 3rem; color: var(--错误色); }


h3.年月中标题 { margin: .3rem .1rem 0; font-size: small; color: #696969; }

.列表分区 { display: flex; flex-wrap: wrap; }

a.列表链接 { display: flex; align-items: center; position: relative; user-select: none; cursor: default; text-decoration: none; background: var(--卡片背景色); }

a.列表链接:active { background: #ebebeb; }

img.列表图片 { width: 1.4rem; height: 1.4rem; object-fit: contain; padding: 1rem; }

h4.列表标题 { font-weight: normal; color: var(--主要文本颜色); white-space: nowrap; margin: 1rem 1rem 1rem 0; overflow: hidden; text-overflow: ellipsis; }

p.列表段落 { margin-left: auto; color: var(--次要文本颜色); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: small; }

img.状态图片 { width: 1rem; height: 1rem; object-fit: contain; padding: 1rem .5rem 1rem .2rem; }


.筛选分区 { background: var(--面板背景色); padding: 5px; }

ul.文件列表 { margin: 0; padding: 0; display: flex; flex-wrap: wrap; }

.视频分区 { background: var(--卡片背景色); margin: 2px; display: flex; flex-direction: column; border-radius: 3px; }

h3.视频标题 { font-size: .8rem; margin: 0; color: var(--主要文本颜色); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

h3.离线标题 { font-size: .8rem; margin: 0; color: var(--错误色); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

img.视频封面 {margin: 4%;width: 92%;}

input.多选输入 { display: none; }

label.选择标签 { display: inline-block; color: var(--次要文本颜色); margin: 2px; padding: 0 5px; border-radius: 4px; font-size: small; user-select: none; }

label.选择标签:hover { background-color: #a8bfe3; color: var(--主要文本颜色); }

label.选择标签:has(input:checked) { background-color: var(--主要按钮背景色); color: white; }

dialog.普通模态框 { background: var(--面板背景色); padding: .5rem; width: 500px; height: 500px; }

button.模态框关闭按钮 { position: absolute; top: 0; right: 0; background: none; border: none; outline: none; }

video.播放视频 { width: 100%; }


ul.普通内容展示列表 { width: calc(100% - 2rem); margin: 0; padding: 1rem; overflow: hidden auto; display: grid; grid-auto-rows: minmax(1rem, auto); grid-gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }

li.普通项目 { display: flex; align-items: center; position: relative; user-select: none; cursor: default; text-decoration: none; background: var(--卡片背景色); }

img.普通项目图片 { width: 1.2rem; height: 1.2rem; object-fit: contain; padding: .5rem; }

h4.普通项目标题 { font-weight: normal; font-size: small; color: var(--主要文本颜色); margin: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }



li.文件项目 { list-style: none; text-align: center; margin: .5rem; padding: .5rem; user-select: none; }

li.文件项目:hover { background: var(--次要按钮背景色); }

img.文件图片 { width: 3rem; height: 3rem; }

h4.文件标题 { font-size: xx-small; font-weight: normal; color: var(--主要文本颜色); margin: 0; width: 5rem; height: 2rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }


li.切换主题项目 { color: var(--次要文本颜色); display: flex; }


/* 小尺寸 */
@media (max-width:767.9px) {
    button.主菜单按钮 { color: black; margin-left: auto; text-align: left; background: url(主菜单打开图标.svg) no-repeat right / contain; border: none; outline: none; width: 70px; height: 30px; color: var(--次要文本颜色); }
    ul.页眉列表 { display: none; flex-direction: column; position: absolute; top: 100%; left: 0; right: 0; margin: 0; padding: 0.5rem calc(10vw - 30px); border-bottom: solid 1px #bdbdbd; }
    li.页眉项目::before { background-color: #ddd; bottom: 0.125rem; content: ""; height: .01rem; left: 0; position: absolute; width: 100%; }

    article.分页文章 { flex-direction: column; }

    a.列表链接 { width: 100%; margin: .5% 0; }

    .视频分区 { width: calc(50% - 4px) }

}

/* 大尺寸 */
@media (min-width:768px) {
    button.主菜单按钮 { display: none }
    ul.页眉列表 { align-items: center; margin: 0; padding: 0; flex: 1; }
    div.标识分区 { margin-right: 20px; }

    section.侧边栏部分 { width: 10rem; padding: .5rem; }
    label.选择标签 { width: calc(100% - 14px); line-height: 2rem; }
    section.内容展示部分 { flex: 1; }

    a.列表链接 { width: 24%; margin: .5%; border-radius: .2rem; }

    .筛选分区 { width: 10rem }
    .视频分区 { width: calc(10% - 4px) }
}