@import url('https://fonts.googleapis.com/css2?family=Sora:wght@500;600;700;800&family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500;600&display=swap');

  :root{
    --ink:#12262a;
    --teal:#0f5c56;
    --teal-dark:#0b433f;
    --amber:#e8a23d;
    --amber-dark:#c67f22;
    --red:#b5473a;
    --paper:#eef2f1;
    --surface:#ffffff;
    --line:#d7dfdd;
    --muted:#66787a;
    --radius:10px;
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  body{
    background:var(--paper);
    color:var(--ink);
    font-family:'IBM Plex Sans','PingFang TC','Microsoft JhengHei',sans-serif;
    -webkit-font-smoothing:antialiased;
    min-height:100vh;
  }
  .app{max-width:920px;margin:0 auto;padding:0 0 64px;}

  /* Header */
  header.topbar{
    background:var(--teal);
    color:#eef8f6;
    padding:22px 20px 0;
    position:relative;
    overflow:hidden;
  }
  header.topbar::after{
    content:"";
    position:absolute; left:0; right:0; bottom:0; height:6px;
    background:repeating-linear-gradient(90deg,#0000 0 10px, rgba(255,255,255,.18) 10px 12px);
  }
  .brandrow{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;}
  .brand{display:flex; align-items:center; gap:10px;}
  .brand .mark{
    width:34px;height:34px;border-radius:8px;
    background:var(--amber); color:var(--teal-dark);
    display:flex;align-items:center;justify-content:center;
    font-family:'Sora',sans-serif; font-weight:800; font-size:16px;
    transform:rotate(-4deg); flex-shrink:0;
  }
  .brand h1{font-family:'Sora',sans-serif; font-size:19px; font-weight:700; margin:0; letter-spacing:.2px;}
  .brand p{margin:1px 0 0; font-size:11.5px; color:#bfe3dd;}

  /* monthctrl + userbar always share one row with the date controls,
     never stacking onto a second line — on narrow phones they're
     squeezed down (see media query below) rather than wrapping. */
  .headerright{display:flex; align-items:center; gap:14px; flex-wrap:nowrap; padding-bottom:16px; flex-grow:1; justify-content:space-between;}

  .monthctrl{display:flex; align-items:center; gap:8px; flex-shrink:0;}
  .monthctrl button{
    width:30px;height:30px;border-radius:7px;border:1px solid rgba(255,255,255,.35);
    background:rgba(255,255,255,.08); color:#eef8f6; font-size:15px; cursor:pointer;
    display:flex;align-items:center;justify-content:center; flex-shrink:0;
  }
  .monthctrl button:hover{background:rgba(255,255,255,.18);}
  .monthctrl input[type=month]{
    background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.35); color:#eef8f6;
    border-radius:7px; padding:5px 8px; font-family:'IBM Plex Mono',monospace; font-size:13.5px;
    colorScheme: dark;
  }

  .userbar{display:flex; align-items:center; gap:10px; min-width:0; flex-wrap:wrap; row-gap:4px;}
  /* 這條規則是從「單一共用帳號」版本沿用下來的：那時候誰登入的不重要，
     所以整批 span（含帳號 email）都關掉省版面。多租戶版不一樣——
     companyName/branchLabel 是使用者判斷「我現在在哪間公司、哪家分店」
     的唯一依據，尤其一般成員只看得到被指派的分店時更重要，不能被藏起來。
     只保留 whoami（帳號 email）維持不顯示，滑鼠移過去有 tooltip 就夠了。 */
  #whoami{display:none;}
  /* 公司名稱／分店固定上下兩行顯示，不管旁邊還有沒有多餘空間——並排時
     使用者常會看漏第二行，分開兩行比較不會忽略掉分店資訊。 */
  .companyinfo{display:flex; flex-direction:column; line-height:1.3;}
  #companyName, #branchLabel{font-size:13px;}
  #branchLabel{opacity:.85;}

  /* 管理成員/管理分店/前往打卡管理/平台管理/修改密碼/登出 收進這個漢堡
     選單，header 右邊不再一排按鈕擠成一團。選單本身是淺色面板（跟深色
     header 不同底色），裡面的項目不能沿用 header 按鈕原本那套半透明白
     色樣式（會變成白底白字看不到），改用 .dropdown-item 這組新樣式。 */
  .menuwrap{position:relative;}
  .menubtn{font-size:22px; line-height:1; padding:8px 15px;}
  /* position:fixed，不是 absolute——header.topbar 本身有 overflow:hidden
     （用來裁掉裝飾用的底部條紋，見上面 header.topbar::after），選單如果
     用 absolute 定位在 header 裡面，超出 header 高度的部分會直接被裁掉，
     下面幾個項目會整個看不到、點不到。改用 fixed 定位，位置由 app.js
     開啟選單時用 hamburgerBtn 的實際螢幕座標算出來（見
     positionHeaderMenu()），就不會被任何祖先元素的 overflow 裁切。 */
  .dropdown{
    display:none; flex-direction:column; gap:2px;
    position:fixed; z-index:45;
    background:#fff; border:1px solid var(--line); border-radius:10px;
    box-shadow:0 8px 24px rgba(0,0,0,.18); min-width:170px; padding:6px;
  }
  .dropdown.show{display:flex;}
  .dropdown-item{
    display:block; width:100%; box-sizing:border-box; text-align:left;
    padding:9px 12px; border-radius:7px; border:none; background:none;
    color:var(--ink); font-family:'IBM Plex Sans'; font-size:13.5px; font-weight:500;
    cursor:pointer; text-decoration:none;
  }
  .dropdown-item:hover{background:var(--paper);}
  .dropdown-item:disabled{opacity:.5; cursor:not-allowed;}
  .dropdown-item:disabled:hover{background:none;}
  /* 提示「打卡人資系統」是加購項目、這間公司還沒開通——開通了之後
     app.js 的 updateAttendanceMenu() 會把這個圖示藏起來，不會誤導已經
     買了的客戶。 */
  .upgrade-badge{font-size:12px; filter:saturate(1.4);}
  /* 選單分成「進貨系統／打卡人資系統／管理系統／帳號」四組（2026-08-18，
     2026-08-25 加「管理系統」），group-label 是不能點的純標題文字，divider
     是組跟組之間的分隔線，submenu 是「打卡人資系統」展開後縮排顯示的
     7 個子項目。 */
  .dropdown-group-label{
    padding:6px 12px 2px; font-size:11px; font-weight:700; letter-spacing:.03em;
    color:var(--muted, #8a938f); text-transform:uppercase;
  }
  .dropdown-divider{height:1px; background:var(--line); margin:4px 6px;}
  .dropdown-submenu{display:flex; flex-direction:column; gap:2px; padding-left:10px;}
  .dropdown-item.sub{font-size:13px; padding:8px 12px;}

  /* Phones: two labeled buttons + date nav still need to be squeezed
     down a bit so they don't wrap onto a second line. userbar 本身的內容
     （公司名/分店/按鈕）現在允許往下多繞一行，避免在窄螢幕被截斷或推出
     版面外看不到。 */
  @media(max-width:640px){
    .headerright{gap:8px;}
    .monthctrl{gap:5px;}
    .monthctrl button{width:26px;height:26px;font-size:14px;}
    .monthctrl input[type=month]{padding:5px 7px; font-size:13px; max-width:130px;}
    .userbar{gap:5px;}
    .userbar .btn.sm{padding:4px 7px; font-size:10.5px;}
    /* 漢堡選單刻意不跟著窄螢幕縮小——手機上使用者才更容易忽略掉右上角
       這顆按鈕，放大反而是手機上更需要，比桌面版更不能被上面那條
       .userbar .btn.sm 規則蓋過去（用四個 class 疊起來的選擇器優先度
       蓋過原本三個 class 的規則）。 */
    .userbar .btn.sm.menubtn{padding:8px 15px; font-size:22px;}
    #companyName, #branchLabel{font-size:11.5px;}
  }

  nav.tabs{display:flex; gap:6px; padding:0 20px; margin-top:14px;}
  nav.tabs button{
    flex:1; padding:10px 6px 12px; background:none; border:none; color:#bfe3dd;
    font-family:'Sora',sans-serif; font-weight:600; font-size:14px; cursor:pointer;
    border-bottom:3px solid transparent; transition:.15s;
  }
  nav.tabs button.active{color:#fff; border-bottom-color:var(--amber);}

  main{padding:18px 16px 0;}
  .card{
    background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
    padding:16px; margin-bottom:14px;
  }
  .card h2{
    font-family:'Sora',sans-serif; font-size:15.5px; margin:0 0 12px; color:var(--teal-dark);
    display:flex; align-items:center; gap:8px;
  }
  .card h2 .n{
    font-family:'IBM Plex Mono',monospace; font-size:11px; background:var(--paper); color:var(--muted);
    padding:2px 6px; border-radius:5px; border:1px solid var(--line);
  }

  /* sub tabs for 支出 */
  .subtabs{display:flex; gap:8px; margin-bottom:14px; flex-wrap:wrap;}
  .subtabs button{
    padding:7px 14px; border-radius:999px; border:1px solid var(--line); background:var(--surface);
    font-family:'IBM Plex Sans'; font-weight:600; font-size:13px; color:var(--ink); cursor:pointer;
  }
  .subtabs button.active{background:var(--teal); border-color:var(--teal); color:#fff;}

  label{display:block; font-size:12.5px; color:var(--muted); margin-bottom:4px; font-weight:500;}
  input[type=text], input[type=number], input[type=date], input[type=email], input[type=password], select{
    width:100%; min-width:0; max-width:100%; padding:8px 9px; border:1px solid var(--line); border-radius:7px;
    font-family:'IBM Plex Sans'; font-size:14px; background:#fff; color:var(--ink);
    box-sizing:border-box;
  }
  .addrow > div{min-width:0; overflow:hidden;}
  /* Safari centers the date value inside input[type=date] by default,
     which reads as lopsided left-padding in a left-aligned form. */
  input[type=date]::-webkit-date-and-time-value{ text-align:left; }
  /* iOS Safari's input[type=date] ignores percentage-based width/max-width
     entirely for its internal day/month/year control and just renders at
     whatever width it wants, bleeding past the card — cap it with a fixed
     pixel value instead, which it does respect. overflow:hidden above is
     a backstop in case it still refuses to shrink to this. */
  input[type=date]{ max-width:240px; }
  input[type=number]{font-family:'IBM Plex Mono',monospace;}
  input:focus, select:focus{outline:2px solid var(--amber); outline-offset:1px; border-color:var(--amber);}

  .pwfield{position:relative;}
  .pwfield input{padding-right:56px;}
  .pwfield .pwtoggle{
    position:absolute; top:50%; right:5px; transform:translateY(-50%);
    background:none; border:none; padding:4px 6px; cursor:pointer;
    font-family:'IBM Plex Sans'; font-size:12px; font-weight:600; color:var(--muted);
  }
  .pwfield .pwtoggle:hover{color:var(--teal-dark);}

  .grid{display:grid; gap:10px;}
  .grid.g2{grid-template-columns:1fr 1fr;}
  .grid.g3{grid-template-columns:1fr 1fr 1fr;}
  @media(max-width:640px){ .grid.g3{grid-template-columns:1fr 1fr;} }

  .btn{
    display:inline-flex; align-items:center; gap:6px; padding:9px 16px; border-radius:8px; border:none;
    font-family:'Sora',sans-serif; font-weight:600; font-size:13.5px; cursor:pointer; background:var(--teal); color:#fff;
  }
  .btn:hover{background:var(--teal-dark);}
  .btn.amber{background:var(--amber); color:#2a1c04;}
  .btn.amber:hover{background:var(--amber-dark); color:#fff;}
  .btn.ghost{background:none; border:1px solid var(--line); color:var(--ink);}
  .btn.ghost:hover{background:var(--paper);}
  .btn.sm{padding:5px 10px; font-size:12px;}
  .btn.danger{background:none;color:var(--red);}

  table{width:100%; border-collapse:collapse; font-size:13px;}
  th{
    text-align:left; font-family:'Sora',sans-serif; font-weight:600; font-size:11.5px; color:var(--muted);
    text-transform:uppercase; letter-spacing:.03em; padding:6px 8px; border-bottom:2px solid var(--ink);
  }
  td{padding:7px 8px; border-bottom:1px solid var(--line); font-family:'IBM Plex Mono',monospace; font-size:13px;}
  td.name{font-family:'IBM Plex Sans'; font-size:13.5px;}
  .tblnote{font-family:'IBM Plex Sans'; font-size:11.5px; color:var(--muted);}
  tr:last-child td{border-bottom:none;}
  tfoot td{font-weight:700; border-top:2px solid var(--ink); border-bottom:none; font-family:'IBM Plex Mono',monospace;}

  .addrow{
    display:grid; grid-template-columns:.95fr 1.25fr .95fr .75fr .8fr .8fr 60px; gap:8px; align-items:end;
    padding:12px; background:var(--paper); border-radius:8px; margin-bottom:12px;
  }
  @media(max-width:760px){
    .addrow{grid-template-columns:1fr 1fr;}
    /* 日期 (native input[type=date]) needs full-width room on iOS Safari —
       squeezed into half a column, its internal day/month/year control
       can render wider than the box regardless of CSS width. 品項 gets the
       same treatment so the two full-width rows stay next to each other;
       廠商/單位 and 單價/此次數量 keep their original side-by-side pairing. */
    .addrow > div:nth-child(1), .addrow > div:nth-child(2){ grid-column:1/-1; }
  }
  .addrow .btn{width:70%; justify-content:center;}
  .queryrow{
    display:grid; grid-template-columns:1fr 1fr auto; gap:8px; align-items:end; margin-bottom:12px;
  }
  @media(max-width:560px){ .queryrow{grid-template-columns:1fr 1fr; } .queryrow .btn{grid-column:1/-1;} }

  .rowline{display:flex; gap:8px; align-items:center; padding:9px 0; border-bottom:1px solid var(--line);}
  .rowline:last-child{border-bottom:none;}
  .rowline label{flex:1; margin:0; font-size:13.5px; color:var(--ink); font-weight:500;}
  .rowline .inputwrap{width:150px; display:flex; align-items:center; gap:4px;}
  .rowline .inputwrap span{color:var(--muted); font-size:12.5px;}
  .rowline input{text-align:right;}

  .catmini{display:flex; gap:8px; margin-top:10px;}
  .catmini input{flex:1;}

  .empty{color:var(--muted); font-size:13px; text-align:center; padding:18px 0;}

  /* Summary */
  .stats{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:14px;}
  @media(max-width:640px){ .stats{grid-template-columns:1fr;} }
  .stat{
    background:var(--teal); color:#fff; border-radius:var(--radius); padding:14px;
    position:relative; overflow:hidden;
  }
  .stat .lbl{font-size:12px; color:#bfe3dd; font-weight:600;}
  .stat .val{font-family:'Sora',sans-serif; font-size:26px; font-weight:800; margin-top:4px;}
  .stat .sub{font-size:11px; color:#bfe3dd; margin-top:3px;}
  .stat.rent{background:var(--amber); color:#2a1c04;}
  .stat.rent .lbl,.stat.rent .sub{color:#5b3d10;}
  .stat.labor{background:#3a5c66;}

  .stamp{
    position:absolute; right:-10px; top:-10px; width:64px; height:64px; border-radius:50%;
    border:3px solid rgba(255,255,255,.35); display:flex; align-items:center; justify-content:center;
    transform:rotate(12deg); font-family:'Sora',sans-serif; font-size:9px; font-weight:700;
    color:rgba(255,255,255,.5); text-align:center; line-height:1.2; letter-spacing:.05em;
  }

  .profitbox{
    display:flex; justify-content:space-between; align-items:center; padding:16px;
    border-radius:var(--radius); margin-bottom:14px; border:2px dashed var(--teal);
  }
  .profitbox.loss{border-color:var(--red);}
  .profitbox .plabel{font-family:'Sora',sans-serif; font-weight:700; font-size:14px; color:var(--teal-dark);}
  .profitbox.loss .plabel{color:var(--red);}
  .profitbox .pval{font-family:'IBM Plex Mono',monospace; font-weight:600; font-size:24px;}

  .chartwrap{display:flex; gap:20px; align-items:center; flex-wrap:wrap;}
  .chartwrap svg{width:220px; height:220px; flex-shrink:0; display:block;}
  .chartwrap svg text{font-family:'IBM Plex Mono',monospace; font-size:10.5px; fill:#fff; font-weight:600;}
  .legend{flex:1; min-width:180px;}
  .legend .li{display:flex; align-items:center; gap:8px; padding:6px 0; font-size:13px; border-bottom:1px solid var(--line);}
  .legend .li:last-child{border-bottom:none;}
  .legend .sw{width:11px;height:11px;border-radius:3px; flex-shrink:0;}
  .legend .li b{margin-left:auto; font-family:'IBM Plex Mono',monospace;}

  .toast{
    position:fixed; bottom:18px; left:50%; transform:translateX(-50%) translateY(20px);
    background:var(--ink); color:#fff; padding:9px 18px; border-radius:999px; font-size:13px;
    opacity:0; transition:.25s; pointer-events:none; z-index:50;
  }
  .toast.show{opacity:1; transform:translateX(-50%) translateY(0);}

  .modal-bg{
    position:fixed; inset:0; background:rgba(15,30,28,.55); display:none; align-items:flex-start; justify-content:center;
    padding:30px 16px; overflow-y:auto; z-index:40;
  }
  .modal-bg.show{display:flex;}
  .modal{background:#fff; border-radius:12px; max-width:640px; width:100%; padding:20px; margin-bottom:30px;}
  /* 成本利潤計算表（管理系統，2026-08-25）內容比其他 modal 寬（要放三欄
     食譜編輯區），用這個變體撐開 max-width，不影響其他既有 modal。 */
  .modal.wide{max-width:960px;}
  .modal h3{font-family:'Sora',sans-serif; margin:0 0 12px; font-size:16px; color:var(--teal-dark);}
  .modal .closebtn{float:right; cursor:pointer; font-size:20px; color:var(--muted); line-height:1;}
  .searchbox{margin-bottom:10px;}
  .itemtable{max-height:340px; overflow-y:auto; border:1px solid var(--line); border-radius:8px;}
  .itemtable table{font-size:12.5px;}
  .itemtable input{padding:5px 6px; font-size:12.5px;}

  .scrolltable{max-height:220px; overflow-y:auto; border:1px solid var(--line); border-radius:8px;}
  .scrolltable table{font-size:12.5px;}
  .scrolltable select{padding:4px 6px; font-size:12.5px;}

  .helptext{font-size:12px; color:var(--muted); margin-top:8px; line-height:1.5;}

  /* ---------- 成本利潤計算表（管理系統，2026-08-25，展示版） ---------- */
  .num{text-align:right;}
  .bommono{font-family:'IBM Plex Mono',monospace;}
  .warn{color:var(--red); font-weight:700;}

  .bomtabs{display:flex; gap:4px; border-bottom:1px solid var(--line); margin-bottom:16px;}
  .bomtab{
    background:none; border:none; cursor:pointer; padding:9px 4px; margin-right:14px;
    font-family:'IBM Plex Sans'; font-size:13.5px; font-weight:600; color:var(--muted);
    border-bottom:2px solid transparent;
  }
  .bomtab.active{color:var(--teal-dark); border-bottom-color:var(--teal-dark);}
  .bompane{display:none;}
  .bompane.active{display:block;}

  .bomrecipe-layout{display:flex; gap:18px;}
  .bomrecipe-sidebar{width:190px; flex-shrink:0;}
  .bomrecipe-detail{flex:1; min-width:0;}
  @media(max-width:640px){ .bomrecipe-layout{flex-direction:column;} .bomrecipe-sidebar{width:100%;} }

  .bomrecipe-navitem{
    display:block; width:100%; text-align:left; padding:9px 11px; margin-bottom:6px;
    border:1px solid var(--line); border-radius:8px; background:#fff; cursor:pointer;
  }
  .bomrecipe-navitem.active{border-color:var(--teal-dark); background:var(--paper);}
  .bomrecipe-navname{font-size:13px; font-weight:600;}
  .bomrecipe-navrate{font-size:11px; color:var(--muted); margin-top:2px;}
  .bomrecipe-navrate.over{color:var(--red);}

  .bomlines{background:#fff; border:1px solid var(--line); border-radius:10px; padding:4px; margin-bottom:14px;}
  .bomline{display:flex; align-items:center; gap:8px; padding:7px 8px; border-bottom:1px solid var(--paper);}
  .bomline:last-child{border-bottom:none;}
  .bomline select{flex:1; min-width:0; padding:5px 6px; font-size:12.5px; border:1px solid var(--line); border-radius:6px;}
  .bomline input{width:64px; padding:5px 6px; font-size:12.5px; border:1px solid var(--line); border-radius:6px; text-align:right;}
  .bomline-unit{font-size:12px; color:var(--muted); width:24px; flex-shrink:0;}
  .bomline-amount{width:72px; flex-shrink:0; text-align:right; font-family:'IBM Plex Mono',monospace; font-size:12.5px;}

  .bomstatcards{display:grid; grid-template-columns:repeat(3,1fr); gap:10px;}
  .bomstatcard{background:#fff; border:1px solid var(--line); border-radius:10px; padding:11px 13px;}
  .bomstatcard-label{font-size:11.5px; color:var(--muted); margin-bottom:4px;}
  .bomstatcard-value{font-size:19px; font-weight:800; font-family:'IBM Plex Mono',monospace;}
  .bomstatcard-value.warn{color:var(--red);}
  .bomstatcard-value.accent{color:var(--teal-dark);}

  .bom-over{background:#fbeeec;}