/* WineDate 桌面版外殼 v1
 * 視覺來源：design/design_handoff_winedate_desktop/（README.md「Design Tokens」與各 .dc.html）
 * 用途：左側固定側欄 + 100vh 頁面框架 + 共用元件（卡片、篩選列、表格、徽章）
 * 僅供桌面版九頁；手機版走 /mobile/styles.css，兩者不互通。
 */

:root{
  /* 側欄與品牌 */
  --wd-sidebar:#2C3A45;
  --wd-sidebar-text:#AFBDC3;
  --wd-sidebar-text-strong:#E6EDEF;
  --wd-sidebar-sub:#9DAEB5;
  --wd-brand:#4E9A93;

  /* 主動作 */
  --wd-accent:#3C7B76;
  --wd-accent-hover:#346B67;
  --wd-accent-soft:#E5EEEC;
  --wd-accent-soft-border:#D2E0DD;

  /* 面 */
  --wd-bg:#F1EFE8;
  --wd-surface:#FBFAF6;
  --wd-surface-2:#F5F3EC;
  --wd-surface-3:#F7F5EE;

  /* 線 */
  --wd-line:#E7E3DB;
  --wd-line-row:#EEEAE1;
  --wd-field-border:#D8D3C8;

  /* 字 */
  --wd-ink:#2E3532;
  --wd-ink-sub:#565B55;
  --wd-ink-weak:#8A9490;

  /* 語意 */
  --wd-ok:#2E5B56;
  --wd-warn:#9A6412;
  --wd-warn-dot:#C67C1C;
  --wd-warn-bg:#FBEEDC;
  --wd-warn-border:#EFD5AC;
  --wd-danger:#BC5749;
  --wd-danger-bg:#F9EDEB;
  --wd-danger-border:#E4C4BE;

  /* 形 */
  --wd-radius-card:10px;
  --wd-radius-field:8px;
  --wd-radius-badge:5px;
  --wd-shadow-card:0 1px 2px rgba(20,30,28,.04);

  --wd-mono:ui-monospace,Menlo,Consolas,"Noto Sans TC",monospace;
}

/* ── 頁面框架 ──────────────────────────────────────────────
 * 每頁 100vh 固定框，內容區自行內部捲動，禁止整頁垂直拉長。
 */
.wd-shell{
  display:flex;
  height:100vh;
  min-width:1280px;
  overflow:hidden;
  background:var(--wd-bg);
  color:var(--wd-ink);
  font-family:'Noto Sans TC','PingFang TC','Microsoft JhengHei',system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
}
.wd-shell a{text-decoration:none}
/* 連結色只套工作區。寫成 .wd-shell a 會因特異性壓過 .wd-nav-item，
   把側欄選單染成主色青綠。 */
.wd-main a,.wd-main-scroll a{color:var(--wd-accent)}
.wd-main a:hover,.wd-main-scroll a:hover{color:var(--wd-accent-hover)}
.wd-shell button:disabled{opacity:.45;cursor:not-allowed}
.wd-shell input,.wd-shell select,.wd-shell textarea,.wd-shell button{font-family:inherit}

/* 工作區：定高型（表格頁）*/
.wd-main{
  flex:1;min-width:0;
  display:flex;flex-direction:column;
  padding:24px 28px 20px;
  box-sizing:border-box;
}
/* 工作區：捲動型（首頁等短內容頁）*/
.wd-main-scroll{
  flex:1;min-width:0;
  overflow-y:auto;
}
.wd-main-scroll-inner{max-width:960px;margin:0 auto;padding:56px 48px 48px}

.wd-page-head{flex:none;display:flex;align-items:center;gap:16px}
.wd-page-title{font-size:20px;font-weight:700;margin:0}

/* ── 側欄 ─────────────────────────────────────────────── */
.wd-sidebar{
  width:232px;flex:none;
  background:var(--wd-sidebar);
  display:flex;flex-direction:column;
}
.wd-sidebar-brand{
  display:flex;align-items:center;gap:8px;
  padding:16px 18px;
  border-bottom:1px solid rgba(255,255,255,.10);
}
/* 標誌為純 CSS「W|D」雙塊字，無外部圖檔 */
.wd-logo{display:flex;gap:2px}
.wd-logo span{
  width:13px;height:26px;
  display:flex;align-items:center;justify-content:center;
  font-family:Sora,system-ui,sans-serif;font-weight:700;font-size:10px;
}
.wd-logo-w{border-radius:6px 2px 2px 6px;background:var(--wd-brand);color:#fff}
.wd-logo-d{border-radius:2px 6px 6px 2px;border:1.5px solid var(--wd-brand);color:var(--wd-brand)}
.wd-wordmark{
  font-family:Sora,system-ui,sans-serif;font-size:13.5px;font-weight:600;
  letter-spacing:2px;color:#fff;
}

.wd-sidebar-nav{flex:1;padding:8px 0;overflow-y:auto}
.wd-nav-item{
  height:42px;display:flex;align-items:center;
  padding:0 18px;font-size:15px;
  color:var(--wd-sidebar-text);
}
.wd-nav-item:hover{background:rgba(255,255,255,.05);color:var(--wd-sidebar-text-strong)}
.wd-nav-item.is-active{
  padding:0 15px;
  color:#fff;font-weight:600;
  background:rgba(255,255,255,.08);
  border-left:3px solid var(--wd-brand);
}
.wd-nav-item.is-active:hover{color:#fff}

.wd-sidebar-user{border-top:1px solid rgba(255,255,255,.12);padding:14px 18px 16px}
.wd-sidebar-name{font-size:15px;font-weight:600;color:#fff}
.wd-sidebar-role{font-size:13px;color:var(--wd-sidebar-sub);margin-top:2px}
.wd-logout{
  margin-top:12px;width:100%;height:34px;
  border:1px solid rgba(255,255,255,.30);border-radius:var(--wd-radius-field);
  background:transparent;color:#D5DEE2;
  font-size:14px;font-weight:500;cursor:pointer;
}
.wd-logout:hover{border-color:rgba(255,255,255,.55);color:#fff}

/* ── 卡片 ─────────────────────────────────────────────── */
.wd-card{
  background:var(--wd-surface);
  border:1px solid var(--wd-line);
  border-radius:var(--wd-radius-card);
  box-shadow:var(--wd-shadow-card);
}

/* ── 篩選列 ────────────────────────────────────────────
 * 條件變動即自動查詢，全站無「查詢」按鈕。
 */
.wd-filterbar{
  flex:none;
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  background:var(--wd-surface);
  border:1px solid var(--wd-line);
  border-radius:var(--wd-radius-card);
  padding:12px 14px;
  box-shadow:var(--wd-shadow-card);
}
.wd-filter-label{font-size:15px;font-weight:600}
.wd-filter-sep{font-size:14px;color:var(--wd-ink-sub)}
.wd-filter-note{font-size:13px;color:var(--wd-ink-weak)}
.wd-input,.wd-select{
  height:38px;
  border:1px solid var(--wd-field-border);
  border-radius:var(--wd-radius-field);
  padding:0 10px;
  font-size:15px;color:var(--wd-ink);
  background:var(--wd-surface);
  box-sizing:border-box;
}
.wd-input{padding:0 12px}
.wd-input:focus,.wd-select:focus{
  outline:0;
  border-color:var(--wd-accent);
  box-shadow:0 0 0 3px var(--wd-accent-soft);
}

/* ── 表格 ─────────────────────────────────────────────
 * 外框固定、表身內部捲動、表頭 sticky；底部為結果列。
 */
.wd-table-card{
  flex:1;min-height:0;
  display:flex;flex-direction:column;
  border:1px solid var(--wd-line);
  border-radius:var(--wd-radius-field);
  background:var(--wd-surface);
  overflow:hidden;
}
.wd-table-scroll{flex:1;min-height:0;overflow-y:auto}
/* table-layout:fixed 是必要的：th 上的 px 寬度才會生效，td 的 ellipsis 才會作用。
   少了它，長酒名會把表格推寬並被 .wd-table-scroll 橫向裁掉。 */
.wd-table{width:100%;border-collapse:collapse;font-size:14px;table-layout:fixed}
.wd-table th{
  position:sticky;top:0;z-index:1;
  background:var(--wd-surface-2);
  border-bottom:1px solid var(--wd-line);
  padding:0 12px;height:42px;
  text-align:left;font-size:13px;font-weight:600;
  color:var(--wd-ink-sub);
  white-space:nowrap;
}
.wd-table td{
  border-bottom:1px solid var(--wd-line-row);
  padding:0 12px;height:44px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.wd-table tbody tr:hover{background:var(--wd-surface-2)}
.wd-table .wd-num{text-align:right;font-weight:600}
/* 表格內可點的料號：視覺上是連結，語意上是按鈕（開 Modal，不是導頁） */
.wd-partno-btn{
  padding:0;border:0;background:none;
  font:inherit;color:var(--wd-accent);
  cursor:pointer;
}
.wd-partno-btn:hover{color:var(--wd-accent-hover);text-decoration:underline}
.wd-partno-btn:focus-visible{outline:2px solid var(--wd-accent);outline-offset:2px;border-radius:3px}
.wd-table .wd-mono{font-family:var(--wd-mono)}
.wd-table .wd-empty td{
  text-align:center;color:var(--wd-ink-weak);
  height:auto;padding:40px 12px;white-space:normal;
}
.wd-table-foot{
  flex:none;
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 14px;
  border-top:1px solid var(--wd-line);
  background:var(--wd-surface);
}
.wd-table-count{font-size:14px;color:var(--wd-ink-sub)}
.wd-table-count b{color:var(--wd-ink)}
.wd-table-range{font-size:13px;color:var(--wd-ink-weak)}

/* ── 按鈕 ─────────────────────────────────────────────── */
.wd-btn{
  height:40px;padding:0 16px;
  border:1px solid var(--wd-field-border);
  border-radius:var(--wd-radius-field);
  background:var(--wd-surface);
  color:#4A4A4C;
  font-size:15px;font-weight:500;
  cursor:pointer;
}
.wd-btn:hover:not(:disabled){border-color:#B9B2A4}
.wd-btn-primary{
  padding:0 20px;
  border:0;
  background:var(--wd-accent);
  color:#fff;font-weight:700;
}
.wd-btn-primary:hover:not(:disabled){background:var(--wd-accent-hover)}

/* ── Modal ────────────────────────────────────────────
 * 尺寸與色值取自 design 的「異動記錄」Modal（WineDate 庫存管理.dc.html）。
 */
.wd-modal-mask{
  position:fixed;inset:0;z-index:20;
  background:rgba(28,32,38,.42);
  display:flex;align-items:center;justify-content:center;
  padding:24px;
}
.wd-modal{
  width:100%;max-width:640px;
  background:var(--wd-surface);
  border-radius:12px;
  padding:24px 24px 20px;
  box-shadow:0 18px 48px rgba(0,0,0,.28);
  max-height:100%;
  display:flex;flex-direction:column;
}
/* 設計稿的 640px 是照五欄表格訂的。欄位數變多時放寬到 760px，
   其餘（底色、圓角、內距、陰影、列高）一律不動。 */
.wd-modal-wide{max-width:760px}
.wd-modal-title{font-size:17px;font-weight:700}
.wd-modal-sub{font-size:15px;color:var(--wd-ink-sub);margin-top:6px}
.wd-modal-code{font-family:var(--wd-mono);font-weight:600;color:var(--wd-ink)}
/* 設計稿只示意 4 列，實際筆數多時在框內捲動，不讓 Modal 長出視窗 */
.wd-modal-table-wrap{
  margin-top:14px;
  border:1px solid var(--wd-line);
  border-radius:var(--wd-radius-field);
  overflow:auto;
  min-height:0;
}
.wd-modal-note{font-size:13px;color:var(--wd-ink-weak);margin-top:8px}
.wd-modal-foot{margin-top:18px;display:flex;gap:10px;justify-content:flex-end}

/* Modal 內的表格比報表主表矮一階（表頭 38、列高 42）。
   表頭維持 sticky——捲動容器是 .wd-modal-table-wrap，筆數多時表頭才不會捲掉。 */
.wd-table-compact th{height:38px}
.wd-table-compact td{height:42px}

/* ── 徽章 ─────────────────────────────────────────────── */
.wd-badge{
  display:inline-block;
  font-size:13px;font-weight:600;
  border-radius:var(--wd-radius-badge);
  padding:2px 8px;
  border:1px solid transparent;
}
.wd-badge-inventory{color:var(--wd-ok);background:var(--wd-accent-soft);border-color:var(--wd-accent-soft-border)}
.wd-badge-storage{color:var(--wd-warn);background:var(--wd-warn-bg);border-color:var(--wd-warn-border)}

/* 異動數量：正綠、負紅、無值灰 */
.wd-qty-pos{color:var(--wd-ok)}
.wd-qty-neg{color:var(--wd-danger)}
.wd-qty-none{color:var(--wd-ink-weak)}

/* ── 常駐待辦提示橫幅 ──────────────────────────────────
 * 第三類訊息：狀態鏡射，無關閉鈕，狀態消失才消失。
 */
.wd-notice{
  display:block;
  background:var(--wd-warn-bg);
  border:1px solid var(--wd-warn-border);
  border-radius:var(--wd-radius-card);
  padding:14px 18px;
  text-decoration:none;
}
.wd-notice:hover{border-color:#E3C48F}
.wd-notice-row{display:flex;align-items:center;gap:10px}
.wd-notice-dot{width:8px;height:8px;border-radius:50%;background:var(--wd-warn-dot);flex:none}
.wd-notice-text{flex:1;font-size:15px;font-weight:600;color:var(--wd-warn)}
.wd-notice-cta{font-size:14px;font-weight:600;color:var(--wd-warn)}
.wd-notice-detail{font-size:14px;color:var(--wd-warn);margin:6px 0 0 18px}

/* ── 數字摘要卡 ───────────────────────────────────────── */
.wd-stat-row{display:flex;gap:16px}
.wd-stat{
  flex:1;
  background:var(--wd-surface);
  border:1px solid var(--wd-line);
  border-radius:var(--wd-radius-card);
  padding:20px 22px;
  box-shadow:var(--wd-shadow-card);
}
.wd-stat-label{font-size:14px;color:var(--wd-ink-sub)}
.wd-stat-value{font-size:32px;font-weight:700;margin-top:4px}
.wd-stat-unit{font-size:15px;font-weight:500;color:var(--wd-ink-sub);margin-left:4px}
/* 逾期且不為 0 才轉警示樣式 */
.wd-stat.is-alert{border-color:#F0CFC7}
.wd-stat.is-alert .wd-stat-label{color:var(--wd-danger);font-weight:600}
.wd-stat.is-alert .wd-stat-value{color:var(--wd-danger)}
.wd-stat.is-alert .wd-stat-unit{color:var(--wd-danger)}