/**
 * responsive.css — RWD 響應式行為
 *
 * 載入順序：tokens → base → components → jubo-theme → {page} → responsive
 *
 * 三斷點：
 *   - Desktop  ≥ 1024px：固定側邊欄
 *   - Tablet   768-1023px：側邊欄收窄
 *   - Mobile   < 768px：側邊欄變抽屜（漢堡按鈕觸發）+ chrome 壓縮 + 表格滾動
 */


/* ═════════════════════════════════════════════════════════════
 * 漢堡按鈕（只在 mobile 顯示）
 * ═════════════════════════════════════════════════════════════ */

.jc-appbar .nav-toggle {
  display: none;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  border-radius: var(--radius-full);
  color: var(--color-text);
  cursor: pointer;
  margin-right: var(--spacing-xs);
  flex-shrink: 0;
}
.jc-appbar .nav-toggle:hover {
  background: var(--color-surface-hover);
}
.jc-appbar .nav-toggle .material-symbols-outlined {
  font-size: 24px;
}


/* 點外面關抽屜的遮罩 */
.jc-rail-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 90;
  opacity: 0;
  transition: opacity var(--transition-fast);
}

/* ═════════════════════════════════════════════════════════════
 * 固定 Shell —— AppBar 永遠在頂、NavRail 永遠在左
 * 桌面 & 手機都套用，內容區用 padding 留出 AppBar / Rail 的空間
 * ═════════════════════════════════════════════════════════════ */

/* AppBar：固定在 viewport 頂端 */
.jc-appbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 110;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}

/* NavRail：桌面固定在左側、從 AppBar 下方開始 */
.jc-rail {
  position: fixed;
  top: var(--layout-header-height, 64px);
  left: 0;
  bottom: 0;
  z-index: 100;
  background: var(--color-surface);
  border-right: 1px solid var(--color-border);
  overflow-y: auto;
}

/* 內容區用 padding 把 AppBar / Rail 的位置讓出來 */
.jc-app-body {
  padding-top: var(--layout-header-height, 64px);
  padding-left: var(--layout-sidebar-width, 72px);
  min-height: 100vh;
  display: block;       /* 不再需要 flex，因為 rail 與 content 都不在 flow 裡了 */
}
.jc-app-content {
  padding: var(--spacing-lg);
  min-width: 0;
  max-width: 100%;
}


/* ═════════════════════════════════════════════════════════════
 * 溢出保險（所有螢幕寬度都套用）
 * 防止 flex children / table 撐破父容器、讓整頁出現水平滾動
 * ═════════════════════════════════════════════════════════════ */

html, body {
  max-width: 100vw;
  overflow-x: hidden;
}

.jc-app,
.jc-app-body,
.jc-app-content {
  min-width: 0;       /* 關鍵：flex 子項預設 min-width: auto 會撐開 */
  max-width: 100%;
}

.jc-card {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;    /* 卡片內表格超寬時，由卡片內部的 wrap 容器 scroll */
}

/* 卡片內所有「非 head/foot」的直接子 div：強制水平 scroll
   涵蓋表格 padding wrapper、自訂內容區，不需依賴 :has()，相容所有瀏覽器 */
.jc-card > div:not(.jc-card-head):not(.jc-card-foot) {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

/* 表格本身：最小寬 fit-content，讓內容決定寬度、由父 div 滾動 */
.jc-table {
  min-width: max-content;
}


/* ═════════════════════════════════════════════════════════════
 * Tablet：1023px 以下
 * ═════════════════════════════════════════════════════════════ */

@media (max-width: 1023px) {
  :root {
    --layout-sidebar-width: 64px;   /* 讓 rail 跟 jc-app-body padding-left 同步收窄 */
  }

  .jc-appbar {
    padding: 0 var(--spacing-md);
  }
  .jc-appbar .brand-sub {
    display: none;
  }

  .jc-rail .rail-item {
    font-size: 10px;
    padding: 8px 0;
  }
  .jc-rail .rail-item .material-symbols-outlined {
    font-size: 22px;
  }

  .jc-app-content {
    padding: var(--spacing-md);
  }

  .jc-pageheader.compact {
    padding: 0 var(--spacing-md);
    margin: 0 calc(-1 * var(--spacing-md)) var(--spacing-md);
  }
}


/* ═════════════════════════════════════════════════════════════
 * Mobile：767px 以下
 * ═════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {

  :root {
    --layout-header-height: 56px;     /* mobile AppBar 56px，padding-top 自動跟上 */
    --layout-sidebar-width: 0px;      /* mobile rail 變抽屜浮層，內容區不留 padding-left */
  }

  /* 顯示漢堡 */
  .jc-appbar .nav-toggle {
    display: inline-flex;
  }

  /* AppBar 壓縮 */
  .jc-appbar {
    height: 56px;
    padding: 0 var(--spacing-sm);
  }
  .jc-appbar .brand-mark {
    width: 28px;
    height: 28px;
    font-size: 14px;
  }
  .jc-appbar .brand-name {
    font-size: var(--font-size-body);
    max-width: 40vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .jc-appbar .me-name,
  .jc-appbar .user-menu-trigger .chevron {
    display: none;
  }
  .jc-appbar .user-menu-dropdown {
    min-width: calc(100vw - 16px);
    right: -8px;
  }


  /* ═════════════════════════════════════════════════════
   * NavRail → 抽屜（保留桌面 icon-上 / 文字-下 直立布局）
   * ═════════════════════════════════════════════════════ */

  .jc-rail {
    top: 56px;                            /* 從 AppBar 下方開始（AppBar 在 mobile = 56px）*/
    width: 96px;
    box-shadow: var(--shadow-lg);
    transform: translateX(-100%);
    transition: transform 200ms ease;
    padding: var(--spacing-md) 8px;
    border-right: 0;
  }

  /* 遮罩也從 AppBar 下方開始，讓 AppBar 永遠可見可點 */
  .jc-rail-backdrop {
    top: 56px;
  }

  /* 抽屜開啟（body 加 .nav-open class）*/
  body.nav-open .jc-rail {
    transform: translateX(0);
  }
  body.nav-open .jc-rail-backdrop {
    display: block;
    opacity: 1;
  }
  body.nav-open {
    overflow: hidden;   /* 鎖背景滾動 */
  }

  /* 抽屜內選項：跟桌面 NavRail 一樣的雙行卡片 */
  .jc-rail .rail-item {
    /* 不改 flex-direction，由 jubo-theme.css 給 column 布局 */
    padding: 12px 0;
    margin-bottom: 4px;
    font-size: 11px;
    border-radius: var(--radius-md);
  }
  .jc-rail .rail-item .material-symbols-outlined {
    font-size: 22px;
    margin-bottom: 2px;
  }


  /* ═════════════════════════════════════════════════════
   * 內容區
   * ═════════════════════════════════════════════════════ */

  .jc-app-content {
    padding: var(--spacing-md);
    max-width: 100%;
    overflow-x: hidden;
  }


  /* PageHeader：標題與動作直立堆疊 */
  .jc-pageheader.compact {
    flex-direction: column;
    align-items: flex-start;
    height: auto;
    gap: var(--spacing-sm);
    padding: var(--spacing-md);
    margin: 0 calc(-1 * var(--spacing-md)) var(--spacing-md);
  }
  .jc-pageheader.compact .ph-name {
    font-size: var(--font-size-h2);
  }
  .jc-pageheader.compact .ph-actions {
    width: 100%;
    flex-wrap: wrap;
  }
  .jc-pageheader.compact .ph-actions .jc-btn {
    flex: 1;
    min-width: 0;
    justify-content: center;
  }


  /* 卡片內邊距收斂 */
  .jc-card-head {
    padding: var(--spacing-md);
    flex-wrap: wrap;
    gap: var(--spacing-sm);
  }
  .jc-card-head h3 {
    font-size: var(--font-size-lg);
  }


  /* ═════════════════════════════════════════════════════
   * 表格：強制橫向 scroll、字級縮小、不換行
   * ═════════════════════════════════════════════════════ */

  .jc-card .jc-table,
  .jc-card table {
    font-size: var(--font-size-caption);
    min-width: max-content;   /* 內容多寬就多寬，由父 div 滾動 */
  }
  .jc-table th,
  .jc-table td {
    white-space: nowrap;
    padding: var(--spacing-sm);
  }

  /* 數字、金額右對齊欄保持單行 */
  .jc-table .num {
    font-variant-numeric: tabular-nums;
  }


  /* ═════════════════════════════════════════════════════
   * Modal：從底部彈出、近全螢幕、按鈕直立全寬
   * ═════════════════════════════════════════════════════ */

  .jc-modal-backdrop {
    padding: 0;
    align-items: flex-end;
  }
  .jc-modal,
  .jc-modal.size-sm,
  .jc-modal.size-md,
  .jc-modal.size-lg {
    width: 100%;
    max-width: 100%;
    max-height: 92vh;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    margin: 0;
  }
  .jc-modal-body {
    padding: var(--spacing-md);
  }
  .jc-modal-foot {
    padding: var(--spacing-md);
    flex-direction: column-reverse;
    gap: var(--spacing-sm);
  }
  .jc-modal-foot .jc-btn {
    width: 100%;
    justify-content: center;
  }


  /* Filterbar 換行 */
  .jc-filterbar {
    flex-wrap: wrap;
    gap: var(--spacing-sm);
  }


  /* 任何 grid 都自動單欄 */
  [class*="-grid"],
  .jc-stat-grid {
    grid-template-columns: 1fr !important;
  }
  .account-layout {
    grid-template-columns: 1fr !important;
  }


  /* StatCard / 數值卡片 — 字級縮小避免溢出 */
  .jc-stat .stat-value,
  .jc-amount-card .amount {
    font-size: 24px;
    word-break: break-all;
  }


  /* iOS Safari 表單字級 < 16px 會自動 zoom，全部鎖 16px */
  .jc-field input,
  .jc-field select,
  .jc-field textarea,
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="date"],
  select,
  textarea {
    font-size: 16px;
  }
}


/* ═════════════════════════════════════════════════════════════
 * 超窄（< 380px）
 * ═════════════════════════════════════════════════════════════ */

@media (max-width: 379px) {
  .jc-appbar .brand-name {
    max-width: 30vw;
  }
  .jc-app-content {
    padding: var(--spacing-sm);
  }
  .jc-pageheader.compact {
    padding: var(--spacing-sm);
    margin: 0 calc(-1 * var(--spacing-sm)) var(--spacing-sm);
  }
}


/* ═════════════════════════════════════════════════════════════
 * 列印
 * ═════════════════════════════════════════════════════════════ */

@media print {
  .jc-appbar,
  .jc-rail,
  .jc-rail-backdrop,
  .jc-pageheader .ph-actions,
  .jc-modal-backdrop {
    display: none !important;
  }
  .jc-app-content {
    padding: 0;
  }
}