@charset "UTF-8";
/* ============================================================================
   WEBGENE 財務會計系統 — 登入頁主題
   ----------------------------------------------------------------------------
   會計站的登入頁樣式寫在 index.html 裡的 <style> 區塊（約 9.5 KB）。
   把本檔的 <link> 加在那個 <style> 之後即可覆蓋，不必改動任何 HTML。

   安裝   <style> …原本的登入頁樣式… </style>
          <link rel="stylesheet" href="/assets/css/webgene-tokens.css">
          <link rel="stylesheet" href="/assets/css/webgene-accountant-login.css">

   主要改動
     1. 從「只有深色」改成跟隨系統主題。原本登入頁是深色、登入後是淺色，
        每天登入都被閃一下 —— 這是這個站最明顯的斷層。
     2. 毛玻璃與靛藍→天藍漸層換成品牌橘，與出勤系統的登入頁成為同一個版型。
     3. 卡片頂端一條橘線，是全頁唯一飽和的一筆；它跟系統裡「需要你處理」
        那一列的左緣是同一條橘。
   ========================================================================== */

/* ------------------------------------------------------------------ 版面 */
body{
  background:var(--wg-ground);
  background-image:none;                 /* 原本的深色漸層 */
  color:var(--wg-ink);
  font-family:var(--wg-font);
}

/* ⚠️ 原案這段是 display:flex + min-height:100vh，照另一個站的 HTML 結構寫的，
   套到 index.html 會跑版：這裡的行內樣式已經讓 **body** 當 flex 容器負責置中，
   .login-wrapper 只是個 max-width:440px 的普通區塊。再把它設成 flex 而且沒給
   flex-direction → 預設 row → .logo-area / .card / .footer-text 由上下堆疊
   變成左右並排，全部擠在 440px 裡。這裡明確還原成區塊流。 */
.login-wrapper{
  background:transparent;
  display:block;
  min-height:0;
  padding:24px;
}

/* body 的行內樣式有 overflow:hidden + align-items:center，內容比視窗高就會被裁掉
   （手機橫向、或瀏覽器縮放時會遇到）。改成可捲動，並讓上下留白由 padding 給。 */
body{
  overflow:auto;
  padding:24px 0;
}

/* 原本深色時代的靛藍／天藍徑向漸層畫在 body::before，
   本檔的 background-image:none 只蓋得到 body 自己，蓋不到 ::before
   → 淺色底上會透出一層藍紫色。這裡整個關掉。 */
body::before{background:none}

/* -------------------------------------------------------------- 品牌區塊 */
.logo-area{margin:0 0 0}

/* 56px 的靛藍→天藍漸層方塊，改成 44px 的品牌橘 */
.logo-icon{
  width:44px;
  height:44px;
  border-radius:11px;
  background:var(--wg-brand);
  background-image:none;
  box-shadow:none;
  margin:0 auto 16px;
}
.logo-icon svg{width:22px;height:22px;fill:#fff;color:#fff}

.logo-area h1,
.login-wrapper h1{
  font-size:1.18rem;
  font-weight:700;
  color:var(--wg-ink);
  letter-spacing:-.01em;
  line-height:1.35;
  margin:0;
}
.subtitle{
  font-size:.76rem;
  color:var(--wg-faint);
  margin:3px 0 0;
}

/* ---------------------------------------------------------------- 卡片 */
.card{
  background:var(--wg-card);
  backdrop-filter:none;                  /* 原本是 blur(20px) */
  -webkit-backdrop-filter:none;
  border:1px solid var(--wg-line);
  border-top:3px solid var(--wg-brand);  /* 全頁唯一飽和的一筆 */
  border-radius:var(--wg-radius);        /* 原本 20px */
  box-shadow:var(--wg-shadow);
  padding:28px 28px 24px;
  width:100%;
  max-width:352px;
  margin:20px auto 0;
  text-align:center;
}
.card h2{
  font-size:1rem;
  font-weight:700;
  color:var(--wg-ink);
  margin:0 0 4px;
}
.card p{
  font-size:.8rem;
  color:var(--wg-ink-soft);
  line-height:1.7;
  margin:0 0 18px;
}

/* ------------------------------------------------------------ 登入按鈕 */
.btn-google{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  width:100%;
  background:#ffffff;
  color:#1f2328;
  border:1px solid var(--wg-line);
  border-radius:6px;                     /* 原本 12px */
  padding:11px 16px;
  font-family:var(--wg-font);
  font-size:.88rem;
  font-weight:500;
  box-shadow:none;
  transition:border-color .12s ease, box-shadow .12s ease;
}
.btn-google:hover{
  background:#ffffff;
  border-color:var(--wg-faint);
  box-shadow:var(--wg-shadow);
  transform:none;
}
.btn-google:focus-visible{
  outline:2px solid var(--wg-brand);
  outline-offset:2px;
}

/* -------------------------------------------------------------- 分隔線 */
.divider{
  color:var(--wg-faint);
  font-size:.63rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  margin:20px 0 8px;
}
.divider::before,
.divider::after{background:var(--wg-line)}

/* ------------------------------------------------------------ 功能清單 */
.info-list{text-align:left}
.info-item{
  font-size:.79rem;
  color:var(--wg-ink-soft);
  line-height:1.6;
}
/* 項目符號原本是靛藍色圓點，改成鋼藍 —— 藍在系統裡代表「可以點的東西」，
   這裡是靜態清單，所以用低飽和的圖形色而不是互動色。 */
.dot{
  background:var(--wg-accent);
  width:4px;
  height:4px;
}

.footer-text{
  color:var(--wg-faint);
  font-size:.7rem;
  font-family:ui-monospace,"SF Mono",Menlo,monospace;
  margin-top:18px;
}

/* -------------------------------------------------------------- 提示訊息 */
/* 這兩個 class 已經存在但沒有設計過。
   登入失敗只有一種原因值得說：這個帳號不在名單裡。 */
.alert{
  /* ⚠️ 原案寫 display:block —— 會蓋掉 index.html 行內的 .alert{display:none}
     （同 specificity、載入在後）→ 兩個提示變成永遠顯示。
     這兩塊只有登入失敗時才該出現：JS 是對特定那一個設 style.display='block'，
     行內樣式本來就贏過樣式表，所以本檔不該碰 display。明確設回 none 保險。 */
  display:none;
  text-align:left;
  border-radius:6px;
  padding:10px 12px;
  margin:0 0 16px;
  font-size:.79rem;
  line-height:1.6;
  border:1px solid transparent;
}
.alert-error{
  background:var(--wg-brand-bg);
  border-color:var(--wg-danger);
  color:var(--wg-danger);
}
.alert-warning{
  background:var(--wg-card-2);
  border-color:var(--wg-line);
  color:var(--wg-ink-soft);
}
.alert strong,.alert b{display:block;font-weight:700}

/* ------------------------------------------------------------------ 手機 */
@media (max-width:480px){
  .login-wrapper{padding:22px 14px}
  .card{padding:22px 20px 20px}
}

/* ============================================================================
   文案建議（需要改 HTML 裡的文字，不影響樣式）
   ----------------------------------------------------------------------------
   現在      「歡迎回來」／「請使用公司 Google 帳號登入，系統將自動驗證您的身份與權限」
   建議      標題直接放系統名稱，說明縮短成一句。
             「歡迎回來」對每天登入八次的內部系統來說是多餘的問候。

   登入被拒時：
     現在    （沒有設計過）
     建議    標題：這個 Google 帳號沒有使用權限
             說明：請用公司信箱（@webgene.com.tw）登入，或聯絡管理部開通。
             按鈕：換一個帳號登入        ← 此刻要做的事變了，按鈕的字也要跟著變
   ========================================================================== */