/*
 * HairGrowth OS — App Shell 版面
 * < 1024px：頂部標題列＋內容＋固定底部導覽（今日／客戶／商機／訂單／更多）
 * ≥ 1024px：左側欄取代底部導覽；≥ 1440px：主列表＋詳情兩欄（.split）
 */
.app {
  min-height: 100vh;
  min-height: 100dvh;
}

/* ---------- Top bar ---------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: calc(var(--topbar-height) + var(--safe-top));
  padding: var(--safe-top) calc(var(--space-2) + var(--safe-right)) 0 calc(var(--space-2) + var(--safe-left));
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}
.topbar__title {
  flex: 1;
  min-width: 0;
  margin: 0;
  padding-left: var(--space-2);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.topbar__actions {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

/* 租戶／角色提示：一律可見，換租戶時頁面重載並清快取（由 app.js 協助） */
.context-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) calc(var(--space-4) + var(--safe-right)) var(--space-2) calc(var(--space-4) + var(--safe-left));
  background: var(--color-surface-2);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--font-size-sm);
}
.context-bar__tenant { font-weight: var(--font-weight-bold); }
/* 切換租戶：觸控目標 ≥44px；以負邊距抵銷，不讓整條提示列變高 */
.context-bar__switch { display: inline-flex; align-items: center; gap: var(--space-1); min-height: var(--touch-target); margin-block: calc(var(--space-2) * -1); margin-left: auto; font-weight: var(--font-weight-medium); }

/* ---------- Main ---------- */
.main {
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--space-4) calc(var(--space-4) + var(--safe-right)) calc(var(--bottom-nav-height) + var(--safe-bottom) + var(--space-8)) calc(var(--space-4) + var(--safe-left));
}
.page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.page-header h1 { margin: 0; }
.page-header__eyebrow { margin: 0; color: var(--color-text-muted); font-size: var(--font-size-sm); }

.stack { display: grid; gap: var(--space-4); }
.stack--sm { gap: var(--space-2); }

.grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: minmax(0, 1fr);
}

/* ---------- Bottom nav (mobile/tablet) ---------- */
.bottom-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-nav);
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  padding: 0 var(--safe-right) var(--safe-bottom) var(--safe-left);
}
.bottom-nav__list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}
.bottom-nav__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: var(--bottom-nav-height);
  padding: var(--space-1);
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
}
.bottom-nav__link[aria-current="page"] {
  color: var(--color-primary);
  font-weight: var(--font-weight-bold);
  box-shadow: inset 0 3px 0 var(--color-primary); /* 位置指示，不只靠顏色 */
}
.bottom-nav__link:focus-visible { outline-offset: -4px; }

/* ---------- Sidebar (≥1024) ---------- */
.sidebar { display: none; }

@media (min-width: 768px) {
  .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .main { padding-left: calc(var(--space-6) + var(--safe-left)); padding-right: calc(var(--space-6) + var(--safe-right)); }
}

@media (min-width: 1024px) {
  .app {
    display: grid;
    grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
  }
  .app__body { min-width: 0; }
  .bottom-nav { display: none; }
  .sidebar {
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
    overflow-y: auto;
    padding: var(--space-4) var(--space-3);
    background: var(--color-nav-bg);
    color: var(--color-nav-text);
  }
  .sidebar :focus-visible { outline-color: var(--focus-color-on-dark); }
  .sidebar__brand {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3) var(--space-4);
    color: var(--color-nav-active-text);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-lg);
  }
  .sidebar__group {
    margin: var(--space-4) 0 var(--space-1);
    padding: 0 var(--space-3);
    font-size: var(--font-size-xs);
    letter-spacing: 0.04em;
  }
  .sidebar__list { margin: 0; padding: 0; list-style: none; }
  .sidebar__link {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-height: var(--touch-target);
    padding: 0 var(--space-3);
    border-radius: var(--radius-md);
    color: var(--color-nav-text);
    text-decoration: none;
  }
  .sidebar__link:hover { background: var(--color-nav-active-bg); color: var(--color-nav-active-text); }
  .sidebar__link[aria-current="page"] {
    background: var(--color-nav-active-bg);
    color: var(--color-nav-active-text);
    font-weight: var(--font-weight-bold);
    box-shadow: inset 3px 0 0 var(--focus-color-on-dark);
  }
  .main { padding-bottom: var(--space-12); }
  .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1440px) {
  .split {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: var(--space-6);
    align-items: start;
  }
  .split__aside { position: sticky; top: calc(var(--topbar-height) + var(--space-4)); }
}

/* ---------- Auth layout ---------- */
.auth {
  display: grid;
  place-items: start center;
  min-height: 100vh;
  min-height: 100dvh;
  padding: calc(var(--space-8) + var(--safe-top)) calc(var(--space-4) + var(--safe-right)) calc(var(--space-8) + var(--safe-bottom)) calc(var(--space-4) + var(--safe-left));
}
.auth__panel {
  width: 100%;
  max-width: 26rem;
}
.auth__brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
}
@media (min-width: 768px) {
  .auth { place-items: center; }
}

/* 側欄登出（button 套用 .sidebar__link 外觀） */
@media (min-width: 1024px) {
  .sidebar__logout { margin-top: auto; padding-top: var(--space-4); }
  button.sidebar__link {
    width: 100%;
    border: 0;
    background: transparent;
    text-align: left;
    cursor: pointer;
  }
}
.page-notice { margin-bottom: var(--space-4); }

/* ---------- 沙龍客戶入口（layouts/portal.php）：沒有側欄；同一組 4 個分頁，手機在底部、≥1024 在頁首下方 ---------- */
.bottom-nav__list--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.app--portal .context-bar { flex-wrap: wrap; }
.portal-account { position: relative; margin-left: auto; }
.portal-account > summary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: var(--touch-target);
  padding: 0 var(--space-2);
  border-radius: var(--radius-md);
  cursor: pointer;
  list-style: none;
}
.portal-account > summary::-webkit-details-marker { display: none; }
.portal-account__menu {
  position: absolute;
  right: 0;
  top: 100%;
  z-index: var(--z-drawer);
  width: min(16rem, calc(100vw - var(--space-8)));
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: var(--shadow-md);
}
@media (min-width: 1024px) {
  .app.app--portal { display: block; }
  .app--portal .portal-nav {
    display: block;
    position: sticky;
    top: calc(var(--topbar-height) + var(--safe-top));
    bottom: auto;
    z-index: var(--z-sticky);
    border-top: 0;
    border-bottom: 1px solid var(--color-border);
  }
  .app--portal .portal-nav .bottom-nav__list { max-width: var(--content-max); margin: 0 auto; }
  .app--portal .portal-nav .bottom-nav__link { flex-direction: row; gap: var(--space-2); font-size: var(--font-size-sm); min-height: var(--touch-target); }
  .app--portal .portal-nav .bottom-nav__link[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--color-primary); }
}

/* ---------- 支援模式橫幅：固定在最上方、高對比，所有頁面一致（partials/support_banner.php） ---------- */
.support-banner {
  position: sticky;
  top: 0;
  z-index: calc(var(--z-sticky) + 1);
  padding: var(--space-2) calc(var(--space-4) + var(--safe-right)) var(--space-2) calc(var(--space-4) + var(--safe-left));
  padding-top: calc(var(--space-2) + var(--safe-top));
  background: var(--color-danger);
  color: var(--color-text-inverse);
  border-bottom: 4px solid var(--color-danger-text);
}
.support-banner__inner { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3); max-width: var(--content-max); margin: 0 auto; }
.support-banner__inner p { margin: 0; }
.support-banner__title { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--font-size-md); }
.support-banner__meta { flex: 1 1 16rem; font-size: var(--font-size-sm); }
.support-banner__exit { background: var(--color-surface); color: var(--color-danger-text); border-color: var(--color-surface); }
.support-banner :focus-visible { outline-color: var(--focus-color-on-dark); }
/* 支援模式時只有橫幅固定在頂端；標題列改為一般流動，避免兩個 sticky 互相遮住 */
.is-support-mode .topbar { position: static; }