/* ============================================================
   BeefSoup Web · 共用樣式入口
   1) 橋接 Beef tokens → Bootstrap 5.3 CSS 變數 (--bs-*)
   2) 共用 typography / surface / badge 元件樣式
   引入順序:bootstrap.min.css → tokens.css → themes.css → beef.css
   ============================================================ */

/* ------------------------------------------------------------
   Bootstrap 5.3 變數覆寫:把 --bs-primary 等對齊 Beef tokens
   注意 Bootstrap 採用 :root,且部分元件用 --bs-*-rgb,需同步設定
   ------------------------------------------------------------ */
:root,
[data-bs-theme="light"] {
    --bs-primary:      var(--beef-primary);
    --bs-primary-rgb:  var(--beef-primary-rgb);
    --bs-primary-text-emphasis: var(--beef-primary-800);
    --bs-primary-bg-subtle:     var(--beef-primary-50);
    --bs-primary-border-subtle: var(--beef-primary-200);

    --bs-secondary:     var(--beef-secondary);
    --bs-secondary-rgb: 30, 41, 59;

    --bs-success:  #15803D;
    --bs-success-rgb: 21, 128, 61;
    --bs-info:     #0369A1;
    --bs-info-rgb: 3, 105, 161;
    --bs-warning:  #C2410C;
    --bs-warning-rgb: 194, 65, 12;
    --bs-danger:   var(--beef-danger);
    --bs-danger-rgb: 185, 28, 28;

    --bs-body-bg:           var(--beef-bg-base);
    --bs-body-color:        var(--beef-text-high);
    --bs-secondary-bg:      var(--beef-bg-chip);
    --bs-tertiary-bg:       var(--beef-bg-card);
    --bs-emphasis-color:    var(--beef-text-high);
    --bs-secondary-color:   var(--beef-text-mid);
    --bs-tertiary-color:    var(--beef-text-low);

    --bs-border-color:        var(--beef-border-strong);
    --bs-border-color-translucent: var(--beef-border);
    --bs-border-radius:    var(--beef-radius-md);
    --bs-border-radius-sm: var(--beef-radius-sm);
    --bs-border-radius-lg: var(--beef-radius-lg);
    --bs-border-radius-xl: var(--beef-radius-xl);
    --bs-border-radius-pill: var(--beef-radius-pill);

    --bs-link-color:       var(--beef-primary);
    --bs-link-color-rgb:   var(--beef-primary-rgb);
    --bs-link-hover-color: var(--beef-primary-hover);

    --bs-body-font-family: var(--beef-font-sans);
    --bs-font-monospace:   var(--beef-font-mono);

    --bs-box-shadow:    var(--beef-elev-3);
    --bs-box-shadow-sm: var(--beef-elev-1);
    --bs-box-shadow-lg: var(--beef-elev-5);
}

/* ------------------------------------------------------------
   全域基底
   ------------------------------------------------------------ */
html { font-size: 16px; }

body {
    background-color: var(--beef-bg-base);
    color: var(--beef-text-high);
    font-family: var(--beef-font-sans);
}

a.beef-link {
    color: var(--beef-primary);
    text-decoration: none;
}
a.beef-link:hover { color: var(--beef-primary-hover); text-decoration: underline; }

/* ------------------------------------------------------------
   Typography (對應 BeefSoupV3 AppStyles.xaml)
   ------------------------------------------------------------ */
.beef-display {
    font-size: var(--beef-fs-display);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--beef-text-high);
}
.beef-h1 {
    font-size: var(--beef-fs-h1);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--beef-text-high);
}
.beef-h2 {
    font-size: var(--beef-fs-h2);
    font-weight: 600;
    line-height: 1.15;
    color: var(--beef-text-high);
}
.beef-title {
    font-size: var(--beef-fs-title);
    font-weight: 600;
    line-height: 1.3;
    color: var(--beef-text-high);
}
.beef-body {
    font-size: var(--beef-fs-body);
    line-height: 1.4;
    color: var(--beef-text-high);
}
.beef-label {
    font-size: var(--beef-fs-label);
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: 0.02em;
    color: var(--beef-text-mid);
}
.beef-caption {
    font-size: var(--beef-fs-caption);
    line-height: 1.35;
    color: var(--beef-text-mid);
}
.beef-caption-xs {
    font-size: var(--beef-fs-caption-xs);
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 0.04em;
    color: var(--beef-text-low);
}
.beef-mono {
    font-family: var(--beef-font-mono);
    font-weight: 600;
    letter-spacing: 0.05em;
    font-variant-numeric: tabular-nums;
}

.beef-text-high { color: var(--beef-text-high) !important; }
.beef-text-mid  { color: var(--beef-text-mid)  !important; }
.beef-text-low  { color: var(--beef-text-low)  !important; }
.beef-text-on-dark { color: var(--beef-text-on-dark) !important; }

/* ------------------------------------------------------------
   Surface 表面
   ------------------------------------------------------------ */
.beef-surface-base { background-color: var(--beef-bg-base); }
.beef-surface-card {
    background-color: var(--beef-bg-card);
    border-radius: var(--beef-radius-lg);
    box-shadow: var(--beef-elev-2);
}
.beef-surface-chip  { background-color: var(--beef-bg-chip); }
.beef-surface-track { background-color: var(--beef-bg-track); }

.beef-elev-1 { box-shadow: var(--beef-elev-1); }
.beef-elev-2 { box-shadow: var(--beef-elev-2); }
.beef-elev-3 { box-shadow: var(--beef-elev-3); }
.beef-elev-4 { box-shadow: var(--beef-elev-4); }
.beef-elev-5 { box-shadow: var(--beef-elev-5); }
.beef-shadow-primary { box-shadow: var(--beef-shadow-primary); }

.beef-radius-sm   { border-radius: var(--beef-radius-sm); }
.beef-radius-md   { border-radius: var(--beef-radius-md); }
.beef-radius-lg   { border-radius: var(--beef-radius-lg); }
.beef-radius-xl   { border-radius: var(--beef-radius-xl); }
.beef-radius-pill { border-radius: var(--beef-radius-pill); }

/* ------------------------------------------------------------
   Table 工具:多場橫向比較表的 sticky 左兩欄
   ------------------------------------------------------------ */
.beef-table-sticky-left-2 thead th:nth-child(1),
.beef-table-sticky-left-2 tbody td:nth-child(1) {
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--beef-bg-card);
    box-shadow: 1px 0 0 var(--beef-bg-track);
}
.beef-table-sticky-left-2 thead th:nth-child(2),
.beef-table-sticky-left-2 tbody td:nth-child(2) {
    position: sticky;
    left: 180px;
    z-index: 2;
    background: var(--beef-bg-card);
    box-shadow: 1px 0 0 var(--beef-bg-track);
}
.beef-table-sticky-left-2 thead th { z-index: 3; }

/* ------------------------------------------------------------
   Buttons (主 CTA / 次要)
   ------------------------------------------------------------ */
.btn-beef-primary {
    --bs-btn-color: var(--beef-on-primary);
    --bs-btn-bg: var(--beef-primary);
    --bs-btn-border-color: var(--beef-primary);
    --bs-btn-hover-color: var(--beef-on-primary);
    --bs-btn-hover-bg: var(--beef-primary-hover);
    --bs-btn-hover-border-color: var(--beef-primary-hover);
    --bs-btn-active-color: var(--beef-on-primary);
    --bs-btn-active-bg: var(--beef-primary-pressed);
    --bs-btn-active-border-color: var(--beef-primary-pressed);
    --bs-btn-disabled-color: var(--beef-on-primary);
    --bs-btn-disabled-bg: var(--beef-primary-300);
    --bs-btn-disabled-border-color: var(--beef-primary-300);
    box-shadow: var(--beef-shadow-primary);
    border-radius: var(--beef-radius-md);
}

.btn-beef-outline {
    --bs-btn-color: var(--beef-primary);
    --bs-btn-border-color: var(--beef-primary);
    --bs-btn-hover-color: var(--beef-on-primary);
    --bs-btn-hover-bg: var(--beef-primary);
    --bs-btn-hover-border-color: var(--beef-primary);
    --bs-btn-active-color: var(--beef-on-primary);
    --bs-btn-active-bg: var(--beef-primary-pressed);
    --bs-btn-active-border-color: var(--beef-primary-pressed);
    border-radius: var(--beef-radius-md);
}

/* ------------------------------------------------------------
   Badge 語意 — 統一外觀 (圓角膠囊 + fg/bg pair)
   用法: <span class="beef-badge beef-badge-sow-pregnant">懷孕</span>
   ------------------------------------------------------------ */
.beef-badge {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .125rem .5rem;
    font-size: var(--beef-fs-caption-xs);
    font-weight: 600;
    line-height: 1.4;
    border-radius: var(--beef-radius-pill);
    letter-spacing: 0.02em;
    white-space: nowrap;
}

/* A. 母豬主狀態 */
.beef-badge-sow-mating   { color: var(--beef-sow-mating-fg);   background-color: var(--beef-sow-mating-bg); }
.beef-badge-sow-mated    { color: var(--beef-sow-mated-fg);    background-color: var(--beef-sow-mated-bg); }
.beef-badge-sow-pregnant { color: var(--beef-sow-pregnant-fg); background-color: var(--beef-sow-pregnant-bg); }
.beef-badge-sow-nursing  { color: var(--beef-sow-nursing-fg);  background-color: var(--beef-sow-nursing-bg); }

/* B. 母豬待配種副狀態 */
.beef-badge-sub-gilt-new        { color: var(--beef-sub-gilt-new-fg);        background-color: var(--beef-sub-gilt-new-bg); }
.beef-badge-sub-weaned          { color: var(--beef-sub-weaned-fg);          background-color: var(--beef-sub-weaned-bg); }
.beef-badge-sub-empty-pregnancy { color: var(--beef-sub-empty-pregnancy-fg); background-color: var(--beef-sub-empty-pregnancy-bg); }
.beef-badge-sub-abortion        { color: var(--beef-sub-abortion-fg);        background-color: var(--beef-sub-abortion-bg); }
.beef-badge-sub-cull            { color: var(--beef-sub-cull-fg);            background-color: var(--beef-sub-cull-bg); }

/* C. 公豬角色 */
.beef-badge-boar-stud    { color: var(--beef-boar-stud-fg);    background-color: var(--beef-boar-stud-bg); }
.beef-badge-boar-teaser  { color: var(--beef-boar-teaser-fg);  background-color: var(--beef-boar-teaser-bg); border: 1px solid var(--beef-boar-teaser-fg); }
.beef-badge-boar-other   { color: var(--beef-boar-other-fg);   background-color: var(--beef-boar-other-bg); }
.beef-badge-boar-pending { color: var(--beef-boar-pending-fg); background-color: var(--beef-boar-pending-bg); }

/* D. 三色紅綠燈 */
.beef-badge-traffic-green { color: var(--beef-traffic-green-fg); background-color: var(--beef-traffic-green-bg); }
.beef-badge-traffic-amber { color: var(--beef-traffic-amber-fg); background-color: var(--beef-traffic-amber-bg); }
.beef-badge-traffic-red   { color: var(--beef-traffic-red-fg);   background-color: var(--beef-traffic-red-bg); }

/* E. 同步狀態 */
.beef-badge-sync-pending  { color: var(--beef-sync-pending-fg);  background-color: var(--beef-sync-pending-bg); }
.beef-badge-sync-syncing  { color: var(--beef-sync-syncing-fg);  background-color: var(--beef-sync-syncing-bg); }
.beef-badge-sync-done     { color: var(--beef-sync-done-fg);     background-color: var(--beef-sync-done-bg); }
.beef-badge-sync-conflict { color: var(--beef-sync-conflict-fg); background-color: var(--beef-sync-conflict-bg); }

/* F. 藍牙 */
.beef-badge-bt-connected    { color: var(--beef-bt-connected-fg);    background-color: var(--beef-bt-connected-bg); }
.beef-badge-bt-disconnected { color: var(--beef-bt-disconnected-fg); background-color: var(--beef-bt-disconnected-bg); }
.beef-badge-bt-reconnecting { color: var(--beef-bt-reconnecting-fg); background-color: var(--beef-bt-reconnecting-bg); }

/* 身分 (Pig.Sex) */
.beef-badge-id-sow  { color: var(--beef-id-sow-fg);  background-color: var(--beef-id-sow-bg); }
.beef-badge-id-gilt { color: var(--beef-id-gilt-fg); background-color: var(--beef-id-gilt-bg); }
.beef-badge-id-boar { color: var(--beef-id-boar-fg); background-color: var(--beef-id-boar-bg); }

/* Modifier — 對應 BeefBadge Variant="Outline" / Size="sm" / Shape="Rect" */
.beef-badge-outline { background-color: transparent !important; border: 1px solid currentColor; }
.beef-badge-sm      { padding: .0625rem .375rem; font-size: .6875rem; }
.beef-badge-rect    { border-radius: var(--beef-radius-sm); letter-spacing: 0; }

/* 耳號 chip (BeefIdChip 對應) */
.beef-id-chip {
    display: inline-flex;
    align-items: center;
    padding: .125rem .5rem;
    font-family: var(--beef-font-mono);
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--beef-id-fg);
    background-color: var(--beef-id-bg);
    border-radius: var(--beef-radius-sm);
    font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------
   Banner / Dot / 雜項
   ------------------------------------------------------------ */
.beef-offline-banner {
    background-color: var(--beef-offline-banner-bg);
    color: var(--beef-danger);
    padding: .5rem 1rem;
    font-weight: 600;
}

.beef-online-dot {
    display: inline-block;
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    background-color: var(--beef-online-dot-green);
}

/* ------------------------------------------------------------
   表單焦點環 (主色)
   ------------------------------------------------------------ */
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: var(--beef-primary-300);
    box-shadow: 0 0 0 .25rem rgba(var(--beef-primary-rgb), 0.25);
}

/* ------------------------------------------------------------
   豬舍格局視覺化 (位置管理 — Layout 檢視 / LayoutEdit 編輯器共用)
   對齊 Epic 4.1 網格矩陣 + 五階段視覺分流
   ------------------------------------------------------------ */
.beef-house-legend { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8125rem; }
.beef-house-swatch {
    width: 16px; height: 16px; border-radius: 4px; display: inline-block;
    border: 1px solid var(--beef-divider, #d0d5dd);
}

/* 門口框架 — 依 DoorEdge 決定方向 */
.beef-house-stage { display: flex; align-items: stretch; gap: 8px; }
.beef-house-door-top    { flex-direction: column; }
.beef-house-door-bottom { flex-direction: column-reverse; }
.beef-house-door-left   { flex-direction: row; }
.beef-house-door-right  { flex-direction: row-reverse; }

.beef-house-door { display: flex; gap: 4px; }
.beef-house-door--h { flex-direction: row; }
.beef-house-door--v { flex-direction: column; }
.beef-house-door-seg {
    flex: 1; min-width: 24px; min-height: 24px;
    display: flex; align-items: center; justify-content: center;
    color: var(--beef-text-secondary, #667085);
}
.beef-house-door-seg.is-door {
    background-color: var(--beef-primary);
    color: #fff; border-radius: 6px; font-weight: 600;
    padding: 4px 8px; white-space: nowrap;
}

/* 網格本體 */
.beef-house-grid { display: grid; gap: 6px; flex: 1; overflow-x: auto; }
.beef-house-cell {
    min-height: 78px; border-radius: 8px; padding: 6px;
    border: 1px solid var(--beef-divider, #d0d5dd);
    display: flex; flex-direction: column; gap: 4px;
}
.beef-house-cell-code { font-size: 0.6875rem; color: var(--beef-text-secondary, #667085); }
.beef-house-cell-empty { color: var(--beef-text-secondary, #98a2b3); margin: auto; }
.beef-house-cell-pigs { display: flex; flex-direction: column; gap: 3px; }
.beef-house-pig { display: flex; flex-direction: column; gap: 2px; }
.beef-house-pig-ear { font-size: 0.75rem; font-weight: 600; }
.beef-house-pig-badge { font-size: 0.625rem; align-self: flex-start; }

/* 五色狀態 — 全部走 --beef-* token */
.beef-house-empty     { background-color: var(--beef-bg-card, #f8f9fa); }
.beef-house-stable    { background-color: var(--beef-traffic-green-bg); }
.beef-house-farrowing { background-color: var(--beef-traffic-amber-bg); }
.beef-house-abnormal  { background-color: var(--beef-traffic-red-bg); }
.beef-house-walkway {
    background-color: var(--beef-bg-card, #eef0f2);
    background-image: repeating-linear-gradient(
        45deg, transparent, transparent 6px,
        var(--beef-divider, #d0d5dd) 6px, var(--beef-divider, #d0d5dd) 12px);
    align-items: center; justify-content: center;
    color: var(--beef-text-secondary, #667085);
}
.beef-house-blocked {
    background-color: var(--beef-bg-card, #eef0f2);
    background-image: repeating-linear-gradient(
        135deg, transparent, transparent 5px,
        var(--beef-traffic-red-bg) 5px, var(--beef-traffic-red-bg) 10px);
    align-items: center; justify-content: center;
    color: var(--beef-text-secondary, #667085);
}