/* ==========================================================================
   燕大叔管理系统 · 统一主题层 v2.0（LOGO 配色版）
   三端共用：统一登录门户 / 巡店管理 / 月度菜品计划
   规则：本文件必须在各页内联 <style> 之后引入，否则会被页面自身样式覆盖。
   只做视觉层覆盖，不改任何布局结构与业务逻辑。

   配色来源：燕大叔 LOGO（yan · DINER BY UNCLE YAN）
     · 主暗色  --yds-ink   #211312  ← LOGO 背景取样（出现频次最高的精确色，占全图 54.2%）
     · 香槟金  --yds-gold  #d4b490  ← LOGO 字标取样（高频精确色 #d4b490，5001 像素）
     · 主色    --yds-brand #8a6640  ← 由香槟金压深两档得到，保证白底文字对比度 5.2:1（WCAG AA）
     · 浅金    --yds-gold-l #e8d3b4 ← 香槟金提亮，用于深色底上的文字
     · 暖白    --yds-bg    #f8f5f0  ← 由金色相派生的大面积底色，与 LOGO 同色温
   ========================================================================== */

:root{
  /* —— LOGO 取色（原始值，勿随意改） —— */
  --yds-ink:#211312;
  --yds-ink2:#2c1c19;
  --yds-gold:#d4b490;
  --yds-gold-l:#e8d3b4;
  --yds-gold-dim:rgba(212,180,144,.72);

  /* —— 品牌主色（金棕，浅底可读） —— */
  --yds-brand:#8a6640;
  --yds-brand-d:#6b4c2d;
  --yds-brand-s:rgba(138,102,64,.10);
  --yds-brand-s2:rgba(138,102,64,.18);

  /* —— 中性色（暖白体系，与金色同温） —— */
  --yds-bg:#f8f5f0;
  --yds-card:#ffffff;
  --yds-fill:#f2ece3;
  --yds-fill2:#fbf9f5;
  --yds-txt:#241a15;
  --yds-txt2:#6d5f55;
  --yds-txt3:#9a8b7e;
  --yds-sep:rgba(33,19,18,.08);
  --yds-sep2:rgba(33,19,18,.14);

  /* 语义色 */
  --yds-ok:#2f6b45;
  --yds-warn:#9a5a12;
  --yds-danger:#a8342a;
  --yds-blue:#3a5b7d;

  /* 形状与阴影（阴影带棕调，避免发灰） */
  --yds-r-sm:8px;
  --yds-r:12px;
  --yds-r-lg:16px;
  --yds-sh:0 1px 2px rgba(33,19,18,.045), 0 4px 14px rgba(33,19,18,.05);
  --yds-sh-lg:0 2px 8px rgba(33,19,18,.06), 0 18px 44px rgba(33,19,18,.10);

  /* 字体栈 */
  --yds-font:-apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC",
             "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", sans-serif;
}

html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body{
  font-family:var(--yds-font);
  background:var(--yds-bg);
  color:var(--yds-txt);
  letter-spacing:.15px;
}
::selection{background:var(--yds-brand-s2)}

/* 滚动条：细、暖调 */
*::-webkit-scrollbar{width:8px;height:8px}
*::-webkit-scrollbar-thumb{background:rgba(33,19,18,.18);border-radius:8px}
*::-webkit-scrollbar-thumb:hover{background:rgba(33,19,18,.30)}
*::-webkit-scrollbar-track{background:transparent}

/* ==========================================================================
   通用组件（三端共用）
   ========================================================================== */

.card{
  background:var(--yds-card);
  border-radius:var(--yds-r-lg);
  border:1px solid var(--yds-sep);
  box-shadow:var(--yds-sh);
}

input,select,textarea{
  border-radius:10px;
  border:1px solid var(--yds-sep2);
  background:#fff;
  transition:border-color .16s, box-shadow .16s;
}
input:focus,select:focus,textarea:focus{
  border-color:var(--yds-brand);
  box-shadow:0 0 0 3.5px var(--yds-brand-s);
}

/* 按钮只统一形状与字重，不改各自的 display / width 规则 */
.btn{border-radius:var(--yds-r);font-weight:500}

/* ==========================================================================
   一、巡店管理（特征：.sidebar / #appView）
   ========================================================================== */

/* 侧栏：深棕黑（LOGO 背景色）+ 香槟金字，与图标一体化 */
.sidebar{
  width:216px;
  background:linear-gradient(180deg,#2a1a17 0%,#211312 62%,#1a0f0e 100%);
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
  border-right:1px solid rgba(212,180,144,.14);
  color:var(--yds-gold-dim);
}

/* 侧栏品牌区：小图标 + 名称 */
.sidebar .logo{
  display:flex;
  align-items:center;
  gap:10px;
  color:var(--yds-gold-l);
  font-size:15.5px;
  letter-spacing:.4px;
  padding:18px 16px 16px;
  border-bottom:1px solid rgba(212,180,144,.14);
}
.sidebar .logo .yds-logoimg{
  width:32px;height:32px;
  border-radius:9px;
  flex:0 0 32px;
  display:block;
  box-shadow:0 2px 10px rgba(0,0,0,.45);
  outline:1px solid rgba(212,180,144,.42);
  outline-offset:-1px;
}
.sidebar .logo .yds-logotxt{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.sidebar .logo small{
  color:rgba(212,180,144,.58);
  font-size:10.5px;
  letter-spacing:.5px;
  font-weight:400;
  margin-top:2px;
}

.sidebar .nav{padding:10px 10px 16px}
.sidebar .nav button{
  width:100%;
  text-align:left;
  padding:10px 12px;
  margin:1px 0;
  border-left:none;
  border-radius:9px;
  color:var(--yds-gold-dim);
  font-size:14px;
  line-height:1.4;
  transition:background .15s, color .15s;
}
.sidebar .nav button:hover{background:rgba(212,180,144,.09);color:var(--yds-gold-l)}
.sidebar .nav button.on{
  background:rgba(212,180,144,.15);
  color:#f0dfc4;
  font-weight:500;
  box-shadow:inset 0 0 0 1px rgba(212,180,144,.20);
}

/* 侧栏分组标题（月度菜单分组用） */
.sidebar .nav .nav-group{
  padding:16px 12px 6px;
  font-size:10.5px;
  letter-spacing:1.2px;
  color:rgba(212,180,144,.45);
  text-transform:uppercase;
}
.sidebar .nav button.sub{padding-left:22px;font-size:13.5px}
.sidebar .nav button.sub::before{
  content:"";
  display:inline-block;
  width:4px;height:4px;
  border-radius:50%;
  background:currentColor;
  opacity:.55;
  margin-right:9px;
  vertical-align:middle;
}
.sidebar .nav button.sub.on::before{opacity:1}

/* 侧栏底部账号区 */
.sidebar .me{
  padding:14px 14px calc(14px + env(safe-area-inset-bottom));
  border-top:1px solid rgba(212,180,144,.14);
  color:rgba(212,180,144,.55);
  font-size:12px;
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  align-items:flex-start;
}
.sidebar .me b{color:var(--yds-gold-l);font-size:13.5px;font-weight:600;flex:0 0 100%}
.sidebar .me>span{flex:0 0 100%;margin-bottom:2px;font-size:11.5px;color:rgba(212,180,144,.5)}
.sidebar .me>.btn{
  flex:1 1 calc(50% - 3px);
  margin-top:0!important;
  min-height:32px;
  padding:0 6px;
  font-size:12px;
  border-radius:9px;
  background:rgba(212,180,144,.12);
  color:var(--yds-gold-l);
  border:1px solid rgba(212,180,144,.14);
  transition:background .15s,color .15s;
}
.sidebar .me>.btn:hover{background:rgba(212,180,144,.2);color:#f6eada}
/* 第一个是「退出登录」：弱化外观，只留金色文字，避免误点 */
.sidebar .me>button:nth-of-type(1){color:var(--yds-gold);background:transparent;border-color:rgba(212,180,144,.22)}
.sidebar .me>div{flex:0 0 100%;margin-top:2px!important;color:rgba(212,180,144,.4)}

/* 标题层级：桌面上给足字号，苹果风的呼吸感来自留白与层级差 */
h2.page-title{font-size:22px;letter-spacing:-.4px;font-weight:600;color:var(--yds-txt)}
.page-desc{font-size:13.5px;color:var(--yds-txt2)}
.card h3{font-size:15.5px;font-weight:600;color:var(--yds-txt)}

/* 移动端顶栏：深棕黑，与侧栏同一块材质 */
.topbar{
  background:linear-gradient(180deg,#2a1a17,#211312);
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
  color:var(--yds-gold-l);
  border-bottom:1px solid rgba(212,180,144,.14);
}
.topbar .menu-btn{color:var(--yds-gold-l)}
.topbar b{font-weight:600;letter-spacing:.3px}

/* 顶栏里那个写死白字的退出按钮，在深底上改为金色描边 */
.topbar .btn[style]{
  background:rgba(212,180,144,.14)!important;
  color:var(--yds-gold-l)!important;
  border-radius:9px;
  border:1px solid rgba(212,180,144,.18);
}

/* 移动端胶囊导航 */
.mob-nav{background:rgba(248,245,240,.96);border-bottom:1px solid var(--yds-sep)}
.mob-nav button{
  border-radius:999px;
  background:var(--yds-fill);
  color:var(--yds-txt2);
  font-weight:400;
}
.mob-nav button.on{background:var(--yds-brand);color:#fff;font-weight:500}

/* 主内容区 */
.main{background:var(--yds-bg)}
.card{box-shadow:var(--yds-sh)}
.stat-box{
  background:var(--yds-fill2);
  border:1px solid var(--yds-sep);
  border-radius:var(--yds-r);
}
.stat-box .num{letter-spacing:-.4px;color:var(--yds-brand)}

table.tb th{background:transparent;color:var(--yds-txt3);font-weight:500;border-bottom:1px solid var(--yds-sep2)}
table.tb tr:hover td{background:rgba(138,102,64,.045)}

#fab{
  border-radius:999px;
  box-shadow:0 6px 20px rgba(138,102,64,.34);
}

/* 月度菜单嵌入容器 */
.menu-frame{
  width:100%;
  border:0;
  display:block;
  background:var(--yds-bg);
  border-radius:var(--yds-r-lg);
}
.main.embedding{padding:0;overflow:hidden}
.main.embedding .menu-frame{min-height:320px}

/* ==========================================================================
   二、月度菜品计划（特征：#navBar / .top / .wrap#view）
   ========================================================================== */

/* 变量重映射：把菜单系统原有的墨绿体系并入 LOGO 色板 */
:root{
  --pri:#8a6640;
  --pri-d:#6b4c2d;
  --pri-l:rgba(138,102,64,.10);
  --bg:#f8f5f0;
  --card:#ffffff;
  --line:rgba(33,19,18,.08);
  --line2:rgba(33,19,18,.05);
  --txt:#241a15;
  --mut:#6d5f55;
  --mut2:#9a8b7e;
  --red:#a8342a;
  --red-l:rgba(168,52,42,.09);
  --sh:0 1px 2px rgba(33,19,18,.045), 0 4px 14px rgba(33,19,18,.05);
  --orange:#9a5a12;
  --orange-l:rgba(154,90,18,.08);
  --gold:#8a6a3a;
  --gold-l:rgba(138,106,58,.10);
  --green:#2f6b45;
  --ink:#241a15;
  --ink2:#6d5f55;
  --soft:#f2ece3;
}

/* 顶部品牌条：墨绿渐变 → 深棕黑（LOGO 底） */
.top{
  background:linear-gradient(180deg,#2a1a17,#211312);
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
  color:var(--yds-gold-l);
  border-radius:0;
  border-bottom:1px solid rgba(212,180,144,.14);
  box-shadow:none;
}
.top .brand{color:var(--yds-gold-l);font-weight:600;letter-spacing:.3px}
.top #brandSub{color:rgba(212,180,144,.55);letter-spacing:1.4px}
.sup-btn{
  background:rgba(212,180,144,.14);
  color:var(--yds-gold-dim);
  border-radius:999px;
  font-weight:400;
  border:1px solid rgba(212,180,144,.16);
}
.sup-btn b{color:var(--yds-gold-l);font-weight:600}

/* 底部导航 */
#navBar{
  background:rgba(248,245,240,.96);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  backdrop-filter:saturate(180%) blur(20px);
  border-top:1px solid var(--yds-sep);
  box-shadow:none;
}
#navBar button{color:var(--yds-txt3);transition:color .15s}
#navBar button.on{color:var(--yds-brand)}

/* 内容宽度：手机端保持单列，宽屏适度放开 */
@media (min-width:900px){
  .wrap{max-width:820px}
  .wrap.rv-wide{max-width:1160px}
}

/* ==========================================================================
   三、统一登录门户（特征：#loginCard）
   ========================================================================== */

body.yds-portal{
  background:
    radial-gradient(1200px 620px at 50% -12%, rgba(212,180,144,.30), rgba(212,180,144,0) 62%),
    linear-gradient(180deg,#fbf8f3 0%,#f6f1e9 100%);
}

/* 登录页 LOGO：整张图作为品牌图形，圆角 + 金棕投影 */
.yds-brandmark{
  width:118px;height:118px;
  border-radius:24px;
  display:block;
  margin:0 auto 18px;
  object-fit:cover;
  box-shadow:0 10px 30px rgba(33,19,18,.28), 0 2px 6px rgba(33,19,18,.16);
  outline:1px solid rgba(212,180,144,.35);
  outline-offset:-1px;
}
h1.yds-h1{color:var(--yds-txt);letter-spacing:.5px;font-weight:600}
.yds-sub{color:var(--yds-txt3);letter-spacing:2px;font-size:12px;text-transform:uppercase}

#loginCard{
  border-radius:20px;
  box-shadow:var(--yds-sh-lg);
  border:1px solid rgba(33,19,18,.07);
  background:#fff;
}
#loginCard .btn{border-radius:12px}

/* 登录页主按钮：金棕渐变，白字 */
#loginCard .btn:not(.light){
  background:linear-gradient(180deg,#966f47 0%,#7d5b38 55%,#6b4c2d 100%);
  color:#fff;
  box-shadow:0 2px 6px rgba(107,76,45,.28), inset 0 1px 0 rgba(255,255,255,.14);
  letter-spacing:2px;
  font-weight:600;
}
#loginCard .btn:not(.light):active{background:linear-gradient(180deg,#7d5b38,#63462a)}

/* ==========================================================================
   四、嵌入模式（iframe 内使用，由父页传 ?embed=1）
   ========================================================================== */
body.yds-embed{padding-bottom:0;background:var(--yds-bg)}
body.yds-embed .top,
body.yds-embed #navBar{display:none!important}
body.yds-embed .wrap{padding:0 16px}
body.yds-embed #view{padding-top:18px;padding-bottom:28px}
body.yds-embed .card{box-shadow:none;border:1px solid var(--yds-sep)}

/* ==========================================================================
   五、移动端微调
   ========================================================================== */
@media (max-width:860px){
  .card{border-radius:var(--yds-r-lg)}
  body.yds-embed .wrap{padding:0 12px}
  .yds-brandmark{width:96px;height:96px;border-radius:22px;margin-bottom:14px}
}

/* 深色底上的选中/加载态统一（侧栏、顶栏里的原生控件） */
.sidebar input,.topbar input,.top input{
  background:rgba(255,255,255,.94);
  border-color:rgba(212,180,144,.28);
  color:var(--yds-txt);
}