/* ============================================================
   govtw-components.css — GOV.TW Design System 共用元件
   適用頁面：left.aspx, top.aspx, main.aspx,
             SYS/SYS_130.aspx, SYS/SYS_Notice.aspx,
             PUB/PUB_ASK.aspx, PUB/PUB_FAQ.aspx,
             PUB/PUB_010.aspx, PUB/PUB_020.aspx
   載入順序：緊接在 CssStyle_m.css 之後，頁面 <style> 之前
   命名原則：govtw-* 前綴為 design token 與跨頁元件；
             頁面特定（.sys-*, .pub-*, .ask-* 等）不在此檔
   ============================================================ */


/* ── 1. CSS Design Tokens ── */
:root {
    /* Primitive — Blue（各主題的 accent 色階：藍/棕/青/靛 都映射到這五格） */
    --govtw-primitive-color-blue-1: #eff6ff;
    --govtw-primitive-color-blue-2: #dbeafe;
    --govtw-primitive-color-blue-3: #bfdbfe;
    --govtw-primitive-color-blue-5: #1D97FE;
    --govtw-primitive-color-blue-8: #1e40af;

    /* Primitive — Neutral */
    --govtw-primitive-color-neutral-1: #f9fafb;
    --govtw-primitive-color-neutral-2: #f3f4f6;
    --govtw-primitive-color-neutral-3: #e5e7eb;
    --govtw-primitive-color-neutral-5: #9ca3af;
    --govtw-primitive-color-neutral-6: #6b7280;
    --govtw-primitive-color-neutral-9: #111827;

    /* Primitive — Red */
    --govtw-primitive-color-red-1: #fef2f2;
    --govtw-primitive-color-red-5: #ef4444;
    --govtw-primitive-color-red-6: #dc2626;
    --govtw-primitive-color-red-7: #b91c1c;

    /* Semantic */
    --govtw-color-brand-primary:       var(--govtw-primitive-color-blue-5);
    --govtw-color-brand-primary-hover: #1a87e8;
    --govtw-color-brand-glow:          rgba(29, 151, 254, 0.18);
    --govtw-color-text-primary:    var(--govtw-primitive-color-neutral-9);
    --govtw-color-text-secondary:  var(--govtw-primitive-color-neutral-6);
    --govtw-color-text-on-primary: #ffffff;
    --govtw-color-bg-canvas:       var(--govtw-primitive-color-neutral-1);
    --govtw-color-bg-surface:      #ffffff;
    --govtw-color-bg-input:        #ffffff;
    --govtw-color-bg-hover:        #f5f8ff;
    --govtw-color-border-default:  var(--govtw-primitive-color-neutral-3);
    --govtw-color-border-strong:   #d1d5db;
    --govtw-color-link-default:    var(--govtw-primitive-color-blue-5);
    --govtw-color-link-visited:    #6b21a8;
    --govtw-focus-color:           #ffd700;

    /* Spacing */
    --govtw-space-2:  8px;
    --govtw-space-3:  12px;
    --govtw-space-4:  16px;
    --govtw-space-5:  20px;
    --govtw-space-6:  24px;
    --govtw-space-8:  32px;
    --govtw-space-12: 48px;

    /* Ink helpers (main.aspx, PUB_010, PUB_020, SYS_130 使用) */
    --ink-mid:    #374151;
    --ink-muted:  #6b7280;
    --ink-faint:  #9ca3af;
    --border-soft: #f3f4f6;
}


/* ── 1a. 配色樣板（Theme palettes）──
   由 js/govtw-theme.js 在繪製前將使用者偏好寫入 <html data-theme="…">，
   跨 frame（top / left / main）同步；未設定時使用上方預設「晴空」。
   :root[data-theme] 的 specificity (0,2,0) 高於各頁 :root 區塊，
   僅覆寫顏色 token，spacing / focus 不隨主題改變。 */

/* 暖陽 — 米杏紙感底、陶土棕 accent */
:root[data-theme="warm"] {
    --govtw-primitive-color-blue-1: #f8efe1;
    --govtw-primitive-color-blue-2: #f1e0c6;
    --govtw-primitive-color-blue-3: #e4cba3;
    --govtw-primitive-color-blue-5: #a8531f;
    --govtw-primitive-color-blue-8: #6e330f;
    --govtw-primitive-color-neutral-1: #f5f0e6;
    --govtw-primitive-color-neutral-2: #efe8d9;
    --govtw-primitive-color-neutral-3: #ded3bd;
    --govtw-color-brand-primary-hover: #8f4419;
    --govtw-color-brand-glow:  rgba(168, 83, 31, 0.18);
    --govtw-color-text-secondary: #5d6674;
    --govtw-color-bg-canvas:   #f0e9db;
    --govtw-color-bg-surface:  #faf6ec;
    --govtw-color-bg-input:    #fffdf7;
    --govtw-color-bg-hover:    #f6efe2;
    --govtw-color-border-strong: #c9bda3;
    --ink-muted:  #5d6674;
    --border-soft: #ece4d3;
}

/* 青瓷 — 湖水綠底、深青 accent */
:root[data-theme="celadon"] {
    --govtw-primitive-color-blue-1: #e7f2ee;
    --govtw-primitive-color-blue-2: #d0e7e0;
    --govtw-primitive-color-blue-3: #aed4c9;
    --govtw-primitive-color-blue-5: #0e7568;
    --govtw-primitive-color-blue-8: #0b4f47;
    --govtw-primitive-color-neutral-1: #eef4f0;
    --govtw-primitive-color-neutral-2: #e6efe9;
    --govtw-primitive-color-neutral-3: #cfdfd6;
    --govtw-color-brand-primary-hover: #0a5f54;
    --govtw-color-brand-glow:  rgba(14, 117, 104, 0.18);
    --govtw-color-text-secondary: #5d6674;
    --govtw-color-bg-canvas:   #e9f0eb;
    --govtw-color-bg-surface:  #f6faf7;
    --govtw-color-bg-input:    #fdfffd;
    --govtw-color-bg-hover:    #eef6f2;
    --govtw-color-border-strong: #b7ccc1;
    --ink-muted:  #5d6674;
    --border-soft: #e2ece6;
}

/* 靛墨 — 藍灰底、靛藍 accent（整體最不白） */
:root[data-theme="indigo"] {
    --govtw-primitive-color-blue-1: #e8edf7;
    --govtw-primitive-color-blue-2: #d4def0;
    --govtw-primitive-color-blue-3: #b3c4e3;
    --govtw-primitive-color-blue-5: #3b5a9e;
    --govtw-primitive-color-blue-8: #22366b;
    --govtw-primitive-color-neutral-1: #ecf0f6;
    --govtw-primitive-color-neutral-2: #e4e9f2;
    --govtw-primitive-color-neutral-3: #ccd5e4;
    --govtw-color-brand-primary-hover: #30497f;
    --govtw-color-brand-glow:  rgba(59, 90, 158, 0.18);
    --govtw-color-text-secondary: #5d6674;
    --govtw-color-bg-canvas:   #e2e7f0;
    --govtw-color-bg-surface:  #f3f5f9;
    --govtw-color-bg-input:    #fcfdfe;
    --govtw-color-bg-hover:    #edf1f8;
    --govtw-color-border-strong: #b3bfd4;
    --ink-muted:  #5d6674;
    --border-soft: #e0e6ef;
}

/* 主題套用時，讓所有載入本檔的頁面 body 一律鋪 canvas 底色
   （各頁自訂的 body 背景多半也是 canvas token，值相同不衝突） */
body {
    background-color: var(--govtw-color-bg-canvas);
}


/* ── 2. Animation ── */
@keyframes badge-pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.6; }
}


/* ── 3. Notification badge（覆寫 CssStyle_m.css 舊版 .redpoint）── */
.redpoint {
    display: inline-flex;
    align-items: center; justify-content: center;
    width: 15px; height: 15px;
    font-size: 9px; font-weight: 700; line-height: 1;
    border-radius: 50%; color: #fff; background: #ef4444;
    position: relative; top: -7px; right: 2px;
    animation: badge-pulse 2s ease-in-out infinite;
}


/* ── 4. Section card component（base：main.aspx 版本） ── */
.govtw-section {
    background: var(--govtw-color-bg-surface);
    border: 1px solid var(--govtw-color-border-default);
    border-radius: 6px;
    margin-bottom: var(--govtw-space-4);
    overflow: hidden;
}

.govtw-section-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: var(--govtw-space-3) var(--govtw-space-4);
    border-bottom: 1px solid var(--govtw-color-border-default);
}

h2.govtw-section-title {
    margin: 0; font-size: 18px; font-weight: 700;
    color: var(--govtw-color-text-primary);
    display: flex; align-items: center; gap: 9px;
    border-left: 4px solid var(--govtw-color-brand-primary);
    padding-left: 10px; line-height: 1.4;
}


/* ── 5. Login / 表單共用 primitives ── */

.form-label-cell {
    padding: 8px 12px 3px 12px !important;
    font-size: 12px;
    font-weight: 500;
    color: var(--ink-mid);
}

.form-input-cell  { padding: 0 10px !important; }
.form-action-cell { padding: 10px 10px 4px 10px !important; }

.form-utility-cell {
    padding: 4px 10px 12px 10px !important;
    text-align: center;
}

.login-input {
    box-sizing: border-box;
    width: 100% !important;
    height: 36px;
    border: 1.5px solid var(--govtw-color-border-strong);
    border-radius: 5px;
    padding: 0 10px;
    font-size: 13px;
    font-family: 'Noto Sans TC', 'Microsoft JhengHei', sans-serif;
    background: var(--govtw-color-bg-input);
    color: var(--govtw-color-text-primary);
    transition: border-color 0.15s, box-shadow 0.15s;
    display: block;
}
.login-input:hover { border-color: var(--govtw-primitive-color-neutral-5); }
.login-input:focus {
    outline: none;
    border-color: var(--govtw-color-brand-primary);
    box-shadow: 0 0 0 3px var(--govtw-color-brand-glow);
}

.login-button-primary {
    box-sizing: border-box;
    width: 100% !important;
    height: 42px;
    background: var(--govtw-color-brand-primary);
    color: var(--govtw-color-text-on-primary);
    border: none;
    border-radius: 5px;
    font-size: 14px;
    font-weight: 700;
    font-family: 'Noto Sans TC', 'Microsoft JhengHei', sans-serif;
    cursor: pointer;
    letter-spacing: 1px;
    transition: background 0.15s, box-shadow 0.15s;
    display: block;
}
.login-button-primary:hover {
    background: var(--govtw-color-brand-primary-hover);
    box-shadow: 0 3px 10px var(--govtw-color-brand-glow);
}
.login-button-primary:focus {
    outline: 3px solid #ffd700;
    outline-offset: 2px;
}

.login-button {
    box-sizing: border-box;
    width: 100% !important;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    background: var(--govtw-color-bg-input);
    border: 1.5px solid var(--govtw-color-brand-primary);
    border-radius: 5px;
    color: var(--govtw-color-brand-primary);
    display: block;
    padding: 8px 5px;
    white-space: normal;
    line-height: 1.3;
    margin: 3px 0;
    font-family: 'Noto Sans TC', 'Microsoft JhengHei', sans-serif;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.login-button:hover {
    background: var(--govtw-primitive-color-blue-1);
    color: var(--govtw-primitive-color-blue-8);
    border-color: var(--govtw-primitive-color-blue-8);
}

.btn-utility {
    font-size: 12px;
    color: var(--govtw-color-text-secondary);
    background: none;
    border: none;
    padding: 2px 4px;
    margin: 0;
    cursor: pointer;
    font-family: inherit;
    text-decoration: none;
    transition: color 0.12s;
}
.btn-utility:hover { color: var(--govtw-color-brand-primary); }
.btn-utility-sep {
    color: var(--govtw-color-border-strong);
    font-size: 12px;
    vertical-align: middle;
    user-select: none;
}

.login-box-border {
    box-sizing: border-box;
    width: 100%;
    border: 1px solid var(--govtw-color-border-default);
    border-radius: 6px;
    padding: 10px 8px;
    margin-bottom: 8px;
    background-color: var(--govtw-color-bg-surface);
    overflow: hidden;
}

.login-image-btn {
    box-sizing: border-box;
    width: 100% !important;
    cursor: pointer;
    background-color: var(--govtw-color-bg-input);
    border: 1.5px solid var(--govtw-color-border-default);
    border-radius: 5px;
    padding: 8px 5px;
    display: block;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.login-image-btn:hover {
    border-color: var(--govtw-color-brand-primary);
    box-shadow: 0 2px 8px var(--govtw-color-brand-glow);
}

/* ── 全站停用按鈕樣式 ── */
input[type="submit"]:disabled,
input[type="button"]:disabled,
button:disabled,
input.sys-btn[type=submit]:disabled,
input.sys-btn[type=button]:disabled {
    background: var(--govtw-primitive-color-neutral-2) !important;
    color: var(--govtw-primitive-color-neutral-5) !important;
    border-color: var(--govtw-primitive-color-neutral-3) !important;
    cursor: not-allowed !important;
    opacity: 0.65;
    box-shadow: none !important;
}
/* primary 停用：保留藍色調，以低透明度表示不可操作 */
input.sys-btn-primary[type=submit]:disabled,
input.sys-btn-primary[type=button]:disabled {
    background: var(--govtw-color-brand-primary) !important;
    color: #fff !important;
    border-color: var(--govtw-color-brand-primary) !important;
    opacity: 0.45;
}