/* Peigo 果昔機管理中台 */
:root {
  --ph-teal: #2a9d8f;
  --ph-teal-dark: #1f7a6f;
  --ph-teal-soft: #e6f4f2;
  --ph-gold: #c4973b;
  --ph-purple: #8b6fc8;
  --ph-bg: #f2f5f7;
  --ph-side-w: 236px;
  --bs-primary: #2a9d8f;
  --bs-primary-rgb: 42, 157, 143;
  --bs-link-color: #1f7a6f;
  --bs-link-color-rgb: 31, 122, 111;
  --bs-link-hover-color: #165b53;
  --bs-body-font-family: system-ui, -apple-system, "Segoe UI", "PingFang TC", "Microsoft JhengHei", "Noto Sans TC", sans-serif;
}
body { background: var(--ph-bg); font-size: .925rem; }

.btn-primary { --bs-btn-bg: var(--ph-teal); --bs-btn-border-color: var(--ph-teal); --bs-btn-hover-bg: var(--ph-teal-dark); --bs-btn-hover-border-color: var(--ph-teal-dark); --bs-btn-active-bg: var(--ph-teal-dark); --bs-btn-disabled-bg: var(--ph-teal); --bs-btn-disabled-border-color: var(--ph-teal); }
.btn-outline-primary { --bs-btn-color: var(--ph-teal-dark); --bs-btn-border-color: var(--ph-teal); --bs-btn-hover-bg: var(--ph-teal); --bs-btn-hover-border-color: var(--ph-teal); --bs-btn-active-bg: var(--ph-teal-dark); --bs-btn-disabled-color: var(--ph-teal); --bs-btn-disabled-border-color: var(--ph-teal); }
.text-bg-primary { background-color: var(--ph-teal) !important; }
.page-link { color: var(--ph-teal-dark); }
.active > .page-link, .page-link.active { background: var(--ph-teal); border-color: var(--ph-teal); }
.form-control:focus, .form-select:focus, .form-check-input:focus { border-color: #8fd0c7; box-shadow: 0 0 0 .2rem rgba(42,157,143,.18); }
.form-check-input:checked { background-color: var(--ph-teal); border-color: var(--ph-teal); }

/* 版面 */
.ph-shell { display: flex; min-height: 100vh; }
.ph-side { width: var(--ph-side-w); flex-shrink: 0; background: #fff; border-right: 1px solid #e3e8ec; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.ph-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ph-brand { display: block; padding: 18px 20px 14px; text-decoration: none; border-bottom: 1px solid #eef1f3; }
.ph-logo { font-weight: 800; font-size: 1.45rem; color: var(--ph-gold); letter-spacing: .5px; line-height: 1; }
.ph-logo-lg { font-size: 2.4rem; }
.ph-brand-sub { display: block; color: #5b6770; font-size: .78rem; margin-top: 4px; }
.ph-nav { padding: 8px 10px 24px; }
.ph-nav-top { font-size: .72rem; font-weight: 700; color: #8a96a0; text-transform: uppercase; letter-spacing: .08em; padding: 16px 10px 6px; display: flex; align-items: center; gap: 6px; }
.ph-nav-top::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--ph-teal); }
.ph-top-platform::before { background: var(--ph-purple); }
.ph-nav-head { width: 100%; display: flex; align-items: center; gap: 10px; border: 0; background: none; padding: 8px 10px; border-radius: 8px; color: #2b3640; font-weight: 600; text-align: left; }
.ph-nav-head:hover { background: #f3f6f8; }
.ph-nav-head .bi:first-child { color: var(--ph-teal); font-size: 1.05rem; }
.ph-caret { margin-left: auto; font-size: .7rem; transition: transform .15s; color: #98a3ab; }
.ph-nav-group.open .ph-caret { transform: rotate(180deg); }
.ph-nav-items { display: none; padding: 2px 0 6px 30px; }
.ph-nav-group.open .ph-nav-items { display: block; }
.ph-nav-link { display: block; padding: 6px 10px; border-radius: 6px; color: #4a5660; text-decoration: none; font-size: .9rem; border-left: 3px solid transparent; }
.ph-nav-link:hover { background: #f3f6f8; color: #1d262d; }
.ph-nav-link.active { background: var(--ph-teal-soft); color: var(--ph-teal-dark); font-weight: 600; border-left-color: var(--ph-teal); }
.ph-nav-single { display: flex; align-items: center; gap: 10px; font-weight: 600; color: #2b3640; border-left: 0; padding: 8px 10px; }
.ph-nav-single .bi { color: var(--ph-teal); font-size: 1.05rem; }
.ph-top-platform ~ .ph-nav-group .ph-nav-head .bi:first-child { color: var(--ph-purple); }

.ph-topbar { display: flex; align-items: center; gap: 12px; background: #fff; border-bottom: 1px solid #e3e8ec; padding: 10px 24px; position: sticky; top: 0; z-index: 10; }
.ph-title { font-size: 1.15rem; font-weight: 700; margin: 0; color: #1d262d; }
.ph-content { padding: 20px 24px 40px; }

.ph-card { border: 1px solid #e3e8ec; border-radius: 12px; box-shadow: 0 1px 2px rgba(16,24,40,.03); }
.ph-card > .card-header { background: #fff; border-bottom: 1px solid #eef1f3; border-radius: 12px 12px 0 0; padding: 10px 16px; }
.ph-card > .card-footer { background: #fff; border-top: 1px solid #eef1f3; border-radius: 0 0 12px 12px; }
.ph-note { color: #5b6770; font-size: .85rem; margin-bottom: 12px; }

.ph-filters .form-label { font-size: .75rem; color: #6c7a84; margin-bottom: 2px; }
.ph-f { min-width: 150px; }
.ph-f-range { min-width: 270px; }

.ph-table thead th { background: #f7f9fa; color: #5b6770; font-weight: 600; font-size: .8rem; white-space: nowrap; border-bottom-width: 1px; }
.ph-table td { font-size: .875rem; }
.ph-table tbody tr:last-child td { border-bottom: 0; }
.ph-src { display: inline-block; margin-left: 6px; font-size: .65rem; padding: 1px 5px; border-radius: 4px; background: #eef3ff; color: #3d5bb5; vertical-align: middle; }
.ph-src-local { background: #f1f1f1; color: #777; }

.ph-steps td { min-width: 90px; }
.ph-steps td.ph-seq { min-width: 40px; text-align: center; font-weight: 600; }
.ph-perms td, .ph-perms th { font-size: .85rem; }

/* 儀表板 */
.ph-kpi { padding: 16px 18px; }
.ph-kpi .lbl { font-size: .78rem; color: #6c7a84; }
.ph-kpi .val { font-size: 1.6rem; font-weight: 700; color: #1d262d; line-height: 1.2; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ph-kpi .val.fs-4 { font-size: clamp(1rem, 1.6vw, 1.35rem) !important; }
.ph-kpi .sub { font-size: .75rem; color: #8a96a0; }
.ph-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; }
.ph-chart { position: relative; height: 260px; }
.ph-rank li { display: flex; justify-content: space-between; gap: 8px; padding: 6px 0; border-bottom: 1px dashed #eef1f3; font-size: .875rem; }
.ph-rank li:last-child { border-bottom: 0; }
.ph-rank .n { color: #8a96a0; width: 22px; display: inline-block; }

/* 登入 */
.ph-login { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(160deg, #e9f5f3 0%, #f2f5f7 60%); padding: 16px; }
.ph-login-card { width: 100%; max-width: 400px; background: #fff; border-radius: 16px; padding: 32px 28px; box-shadow: 0 10px 30px rgba(16,24,40,.08); }

pre.ph-code { background: #1e2a32; color: #e6edf3; border-radius: 8px; padding: 12px 14px; font-size: .8rem; }

@media (max-width: 991.98px) {
  .ph-side { position: fixed; left: 0; top: 0; z-index: 1040; transform: translateX(-100%); transition: transform .2s; box-shadow: 0 0 30px rgba(0,0,0,.15); }
  .ph-side.show { transform: none; }
  .ph-content { padding: 16px; }
  .ph-topbar { padding: 8px 12px; }
}
.ph-steps th:first-child, .ph-steps td:first-child { padding-left: 16px; }
.ph-steps select { min-width: 140px; }