/**
 * Layout — RWD 骨架（v0.3 — Apple 風「浮起面板」）
 * ============================================
 * 【2026-08-04 改版】從「白底切線」改成「淺灰畫布 + 浮起的白色圓角面板」：
 *   ・畫布 = --color-canvas 淺灰，帶極淡的品牌色暈染
 *   ・側欄 = 毛玻璃白面板（浮起、圓角），不再是深色滿版
 *   ・topbar = 透明，直接坐在畫布上（像 macOS 的 toolbar）
 *   ・main   = 白色圓角面板，內容捲動發生在面板內
 *
 * 手機（< 768px）：側欄改抽屜（毛玻璃 + 遮罩）
 * 平板（768~1023px）：側欄 228px
 * 電腦（≥ 1024px）：側欄 256px
 */

/* ============= 整體 App 容器 ============= */
.app-shell {
  display: grid;
  min-height: 100dvh;
  /* 預設（手機）：單欄，無 sidebar */
  grid-template-columns: 1fr;
  grid-template-rows: var(--topbar-h) 1fr;
  grid-template-areas:
    "topbar"
    "main";
  background:
    radial-gradient(ellipse 900px 600px at 12% -10%, rgba(51, 78, 90, 0.06), transparent 60%),
    radial-gradient(ellipse 800px 500px at 100% 100%, rgba(51, 78, 90, 0.05), transparent 62%),
    var(--color-canvas);
}

.app-sidenav {
  grid-area: nav;
  /* 手機預設藏起來（抽屜） */
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 280px;
  z-index: 80;
  transform: translateX(-100%);
  transition: transform var(--transition-slow);
  box-shadow: var(--shadow-xl);
  will-change: transform;
}

.app-topbar {
  grid-area: topbar;
  background: transparent;
  border-bottom: none;
  z-index: 70;
  position: sticky;
  top: 0;
}

.app-main {
  grid-area: main;
  padding: var(--sp-4);
  overflow-y: auto;
  min-width: 0;
  background: var(--color-surface);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  box-shadow: var(--shadow);
}

/* 手機側欄展開 */
body.sidenav-open .app-sidenav {
  transform: translateX(0);
}
body.sidenav-open::after {
  content: '';
  position: fixed;
  inset: 0;
  background: rgba(23, 38, 46, 0.32);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  z-index: 75;
  animation: fadeIn 220ms var(--ease-emphasized);
}


/* ============= 平板 (768~1023px)：側欄 228px、面板化 ============= */
@media (min-width: 768px) {
  html, body { height: 100dvh; overflow: hidden; }

  .app-shell {
    grid-template-columns: var(--sidebar-w-tablet) 1fr;
    grid-template-rows: var(--topbar-h) 1fr;
    grid-template-areas:
      "nav topbar"
      "nav main";
    height: 100dvh;
    padding: var(--shell-gap);
    column-gap: var(--shell-gap);
    row-gap: 0;
  }

  /* 側欄：浮起的毛玻璃面板 */
  .app-sidenav {
    position: relative;
    transform: none;
    width: auto;
    height: calc(100dvh - var(--shell-gap) * 2);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
  }
  body.sidenav-open::after { display: none; }

  /* topbar 透明坐在畫布上 */
  .app-topbar {
    background: transparent;
    height: var(--topbar-h);
  }

  /* main：白色圓角面板，捲動在面板內 */
  .app-main {
    padding: var(--sp-6);
    height: calc(100dvh - var(--topbar-h) - var(--shell-gap) * 2);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    /* 面板內容捲到底時不要撞到圓角 */
    scroll-padding-bottom: var(--sp-6);
  }

  /* 手機才顯示的 hamburger 隱藏 */
  .topbar__menu-btn { display: none; }
}


/* ============= 電腦 (≥1024px)：側欄 256px ============= */
@media (min-width: 1024px) {
  .app-shell {
    grid-template-columns: var(--sidebar-w-desktop) 1fr;
  }
  .app-main {
    padding: var(--sp-7);
  }
  /* 取消 max-width 限制 — 滿版 */
  .app-main > * { max-width: none; }
}

/* 超寬螢幕：內容置中，兩側不要拉得太開 */
@media (min-width: 1800px) {
  .app-main > #view-outlet {
    max-width: 1560px;
    margin: 0 auto;
  }
}


/* ============= Login 頁（Apple 風：淺灰畫布 + 浮起玻璃卡） ============= */
.login-page {
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-5);
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse 760px 520px at 18% 8%,  rgba(51, 78, 90, 0.10), transparent 62%),
    radial-gradient(ellipse 700px 520px at 84% 92%, rgba(91, 84, 135, 0.07), transparent 62%),
    radial-gradient(ellipse 620px 420px at 92% 6%,  rgba(58, 110, 146, 0.06), transparent 60%),
    var(--color-canvas);
}

/* 極淡的網格紋理（參考圖 2 的底紋），只在桌機出現 */
.login-page::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(51, 78, 90, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(51, 78, 90, 0.045) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 90% 70% at 50% 50%, #000 20%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 50%, #000 20%, transparent 78%);
  pointer-events: none;
}
@media (max-width: 640px) {
  .login-page::before { display: none; }
}

.login-card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 440px;
  text-align: center;
  padding: var(--sp-9) var(--sp-7) var(--sp-7);
  display: flex;
  flex-direction: column;
  align-items: center;

  /* 浮起的毛玻璃卡片 */
  background: var(--glass-bg-sm);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg), var(--shadow-inset);

  animation: fadeInUp 460ms var(--ease-emphasized) both;
}

.login-card__logo {
  display: flex;
  justify-content: center;
  margin-bottom: var(--sp-3);
  width: 100%;
}
.login-card__logo img {
  width: 100%;
  max-width: 200px;
  height: auto;
  filter: drop-shadow(0 2px 6px rgba(51, 78, 90, 0.10));
}
.login-card__system {
  font-size: 11px;
  color: var(--color-text-mute);
  letter-spacing: var(--ls-label);
  margin-bottom: var(--sp-9);
  font-weight: var(--fw-medium);
}
.login-card__title {
  font-family: var(--font-display);
  font-size: var(--fs-xxl);
  font-weight: var(--fw-bold);
  color: var(--color-primary);
  letter-spacing: var(--ls-display);
  line-height: 1.18;
  margin-bottom: var(--sp-2);
  text-align: center;
}
.login-card__sub {
  font-size: var(--fs-sm);
  color: var(--color-text-mute);
  letter-spacing: var(--ls-caption);
  margin-bottom: var(--sp-7);
  text-align: center;
}
.login-card__btn-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: var(--sp-6);
  position: relative;
  width: 100%;
}

/* 自訂 Google 登入按鈕 — 膠囊化 */
.btn-google-wrap {
  position: relative;
  display: inline-block;
  width: 100%;
  max-width: 320px;
}
.btn-google-signin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  width: 100%;
  padding: 15px var(--sp-5);
  background: var(--color-primary);
  color: #FFFFFF;
  border: none;
  border-radius: var(--radius-pill);
  font-family: inherit;
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-caption);
  cursor: pointer;
  transition:
    background-color var(--transition),
    box-shadow var(--transition),
    transform var(--transition-fast);
  box-shadow: 0 6px 18px rgba(51, 78, 90, 0.24);
  pointer-events: none;   /* 點擊由 overlay 處理，自身不接收 */
}
.btn-google-wrap:hover .btn-google-signin {
  background: var(--color-primary-dk);
  transform: translateY(-2px);
  box-shadow: var(--shadow-primary);
}
.btn-google-wrap:active .btn-google-signin {
  transform: translateY(0) scale(0.985);
}
.btn-google-signin__icon {
  width: 22px;
  height: 22px;
  background: #FFFFFF;
  border-radius: 50%;
  padding: 4px;
  flex-shrink: 0;
}

/* GIS 原生按鈕透明覆蓋層 — 接收實際點擊 */
.btn-google-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 320px;
  opacity: 0.001;       /* 視覺消失但保留可點擊 */
  z-index: 2;
  cursor: pointer;
}
.btn-google-overlay > div,
.btn-google-overlay iframe {
  cursor: pointer !important;
}
.login-card__error {
  font-size: var(--fs-xs);
  color: var(--color-danger);
  min-height: 18px;
  margin-bottom: var(--sp-5);
}
.login-card__footer {
  font-size: 11px;
  color: var(--color-text-dim);
  letter-spacing: var(--ls-caption);
  margin-top: 0;
  padding-top: var(--sp-4);
  border-top: 1px solid var(--color-divider);
  width: 100%;
}

@media (max-width: 480px) {
  .login-card {
    padding: var(--sp-7) var(--sp-5) var(--sp-5);
    border-radius: var(--radius-lg);
  }
  .login-card__title { font-size: var(--fs-xl); }
  .login-card__system { margin-bottom: var(--sp-7); }
}