/* =============================================================================
   社交工程演練平台 — 品牌設計系統 (Design System)
   風格：現代、科技、乾淨簡約 / Admin & Dashboard
   主色 深藍+中藍、輔色 亮黃、次要 灰。後續模組沿用本檔之變數與元件 class。
   ============================================================================= */

:root {
    /* 主色調：深藍 / 中藍 */
    --navy:        #0A2540;
    --navy-700:    #0D2C54;
    --blue:        #1E5FCC; /* primary */
    --blue-600:    #2E7BE6;
    --blue-300:    #5B9BF0;
    /* 輔助色：亮黃（CTA / hover / 強調弧線） */
    --yellow:      #FFC72C;
    --yellow-600:  #F0B400;
    /* 次要色：灰（文字與背景分區） */
    --bg:          #F4F6F9;
    --surface:     #FFFFFF;
    --gray-100:    #EEF1F5;
    --gray-200:    #E2E8F0; /* border */
    --gray-400:    #94A3B8;
    --gray-500:    #64748B; /* muted text */
    --ink:         #1F2A37; /* main text */

    --radius:      12px;
    --radius-sm:   8px;
    --shadow:      0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.10);
    --shadow-lg:   0 12px 32px rgba(10,37,64,.14);
    --header-h:    60px;
    --sidebar-w:   236px;
    --font: "Segoe UI", "Microsoft JhengHei", "PingFang TC", "Noto Sans TC", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body {
    margin: 0; padding: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font);
    font-size: 14px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--blue-600); }
h1,h2,h3,h4 { color: var(--navy); font-weight: 600; margin: 0 0 .4em; }

/* ── 固定 Header ─────────────────────────────────────────────────────────── */
.app-header {
    position: fixed; top: 0; left: 0; right: 0; height: var(--header-h);
    display: flex; align-items: center; gap: 12px; padding: 0 18px; z-index: 1000;
    background: linear-gradient(90deg, var(--navy) 0%, var(--navy-700) 45%, var(--blue) 100%);
    color: #fff; box-shadow: var(--shadow);
}
.app-header .brand { display: flex; align-items: center; gap: 10px; color: #fff; font-weight: 600; font-size: 16px; letter-spacing: .3px; }
.app-header .brand .logo { width: 30px; height: 30px; flex: 0 0 auto; }
.app-header .nav-toggle {
    display: none; background: transparent; border: 0; color: #fff; font-size: 22px; cursor: pointer; padding: 4px 8px; border-radius: 6px;
}
.app-header .nav-toggle:hover { background: rgba(255,255,255,.12); }
.app-header .spacer { flex: 1 1 auto; }
.app-header .header-user { display: flex; align-items: center; gap: 12px; font-size: 13px; }
.app-header .header-user .uname { opacity: .92; }
.app-header .btn-logout {
    color: var(--navy); background: var(--yellow); border: 0; border-radius: 999px;
    padding: 6px 16px; font-weight: 600; cursor: pointer; transition: background .15s, transform .15s;
}
.app-header .btn-logout:hover { background: var(--yellow-600); transform: translateY(-1px); }

/* ── 側邊導覽 ────────────────────────────────────────────────────────────── */
.app-sidebar {
    position: fixed; top: var(--header-h); bottom: 0; left: 0; width: var(--sidebar-w);
    background: var(--surface); border-right: 1px solid var(--gray-200); padding: 14px 10px; overflow-y: auto; z-index: 900;
}
.nav-menu { list-style: none; margin: 0; padding: 0; }
.nav-menu .nav-section { color: var(--gray-400); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 14px 12px 6px; }
.nav-menu a {
    display: flex; align-items: center; gap: 10px; padding: 10px 12px; margin: 2px 0;
    color: var(--ink); border-radius: var(--radius-sm); font-weight: 500; position: relative;
}
.nav-menu a .ico { width: 18px; text-align: center; opacity: .8; }
.nav-menu a:hover { background: var(--gray-100); color: var(--navy); }
.nav-menu a.active { background: rgba(30,95,204,.10); color: var(--blue); }
.nav-menu a.active::before {
    content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px;
    border-radius: 3px; background: var(--yellow);
}

/* ── 主內容區 ────────────────────────────────────────────────────────────── */
.app-main { margin-left: var(--sidebar-w); padding: calc(var(--header-h) + 22px) 24px 32px; min-height: 100vh; }

.page-header { margin-bottom: 18px; }
.page-header .page-title { font-size: 22px; margin: 0; }
.page-header .page-sub { color: var(--gray-500); font-size: 13px; margin-top: 2px; }

.card {
    background: var(--surface); border: 1px solid var(--gray-200); border-radius: var(--radius);
    box-shadow: var(--shadow); padding: 20px;
}
.card + .card { margin-top: 18px; }
.toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 14px; }

/* ── 按鈕 ────────────────────────────────────────────────────────────────── */
.btn {
    display: inline-flex; align-items: center; gap: 8px; cursor: pointer; border: 1px solid transparent;
    border-radius: 999px; padding: 9px 20px; font-size: 14px; font-weight: 600; font-family: var(--font);
    transition: background .15s, color .15s, transform .15s, box-shadow .15s; line-height: 1;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--blue); color: #fff; }
.btn-primary:hover { background: var(--blue-600); color: #fff; box-shadow: 0 4px 14px rgba(30,95,204,.3); }
.btn-cta { background: var(--yellow); color: var(--navy); }
.btn-cta:hover { background: var(--yellow-600); color: var(--navy); box-shadow: 0 4px 14px rgba(255,199,44,.45); }
.btn-ghost { background: transparent; color: var(--blue); border-color: var(--gray-200); }
.btn-ghost:hover { background: var(--gray-100); }
.btn-block { width: 100%; justify-content: center; }

/* ── Hero（首頁主視覺）：藍色漸層 + 黃色弧線動態裝飾 ─────────────────────────── */
.hero {
    position: relative; overflow: hidden; border-radius: var(--radius);
    background: linear-gradient(135deg, var(--navy) 0%, var(--blue) 70%, var(--blue-600) 100%);
    color: #fff; padding: 40px 36px; box-shadow: var(--shadow-lg);
}
.hero h1 { color: #fff; font-size: 28px; margin: 0 0 8px; }
.hero p { color: rgba(255,255,255,.85); max-width: 620px; margin: 0 0 22px; }
.hero .hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-arc { position: absolute; right: -60px; top: -40px; width: 420px; height: 420px; pointer-events: none; opacity: .9; animation: arcFloat 9s ease-in-out infinite; }
.hero-arc path { fill: none; stroke: var(--yellow); stroke-width: 6; stroke-linecap: round; }
@keyframes arcFloat { 0%,100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(14px) rotate(-3deg); } }

/* ── 儀表板卡片網格 ─────────────────────────────────────────────────────────── */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; margin-top: 18px; }
.stat-card {
    background: var(--surface); border: 1px solid var(--gray-200); border-radius: var(--radius);
    box-shadow: var(--shadow); padding: 18px 20px; display: flex; flex-direction: column; gap: 6px;
    transition: transform .15s, box-shadow .15s; border-top: 3px solid var(--blue);
}
.stat-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-top-color: var(--yellow); }
.stat-card .sc-title { color: var(--gray-500); font-size: 13px; }
.stat-card .sc-desc { color: var(--ink); font-size: 13px; }
.stat-card .sc-icon { font-size: 22px; }

/* ── 登入頁 ──────────────────────────────────────────────────────────────── */
.login-page {
    min-height: 100vh;
    background: linear-gradient(135deg, var(--navy) 0%, var(--blue) 60%, var(--blue-600) 100%);
    position: relative; overflow: hidden;
}
.login-arc { position: absolute; pointer-events: none; opacity: .9; }
.login-arc.a1 { top: -120px; left: -100px; width: 480px; height: 480px; animation: arcFloat 10s ease-in-out infinite; }
.login-arc.a2 { bottom: -160px; right: -120px; width: 560px; height: 560px; animation: arcFloat 13s ease-in-out infinite reverse; }
.login-arc path { fill: none; stroke: var(--yellow); stroke-width: 6; stroke-linecap: round; opacity: .55; }
.login-card {
    /* 用 transform 置中而非 flex，避免內部 easyui textbox hover 造成 flex 重排位移 */
    position: absolute; left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    width: calc(100% - 48px); max-width: 380px;
    background: var(--surface);
    border-radius: 16px; box-shadow: var(--shadow-lg); padding: 34px 30px;
}
.login-card .login-brand { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-bottom: 22px; }
.login-card .login-brand .logo { width: 52px; height: 52px; }
.login-card .login-brand .title { color: var(--navy); font-weight: 700; font-size: 18px; text-align: center; }
.login-card .field { margin-bottom: 16px; }
.login-card .field label { display: block; font-size: 13px; color: var(--gray-500); margin-bottom: 6px; }

/* ── 表單/欄位通用 ─────────────────────────────────────────────────────────── */
.form-grid { max-width: 460px; }
.form-grid .field { margin-bottom: 14px; }
.form-grid .field > label { display: block; font-size: 13px; color: var(--gray-500); margin-bottom: 6px; }

/* ── easyui 視覺協調（在不破壞功能下調和品牌色）──────────────────────────────── */
.datagrid-wrap { border-color: var(--gray-200); border-radius: var(--radius-sm); overflow: hidden; }
.datagrid .datagrid-header { background: var(--gray-100); }
.datagrid .datagrid-header td { background: var(--gray-100); color: var(--navy); font-weight: 600; }
.datagrid-row-over, .datagrid-row-selected { background: rgba(30,95,204,.08) !important; color: var(--ink) !important; }
.panel-title { color: var(--navy); }
.window .panel-header, .dialog-button { border-color: var(--gray-200); }
/* easyui linkbutton 主行動鈕：加上 brand-cta class 套用亮黃 */
.l-btn.brand-cta { background: var(--yellow); border-color: var(--yellow); }
.l-btn.brand-cta .l-btn-text { color: var(--navy); font-weight: 600; }

/* ── 響應式（Mobile Friendly）────────────────────────────────────────────── */
.sidebar-backdrop { display: none; position: fixed; inset: var(--header-h) 0 0 0; background: rgba(10,37,64,.4); z-index: 850; }

@media (max-width: 992px) {
    .app-header .nav-toggle { display: inline-block; }
    .app-sidebar { transform: translateX(-100%); transition: transform .22s ease; box-shadow: var(--shadow-lg); }
    body.sidebar-open .app-sidebar { transform: translateX(0); }
    body.sidebar-open .sidebar-backdrop { display: block; }
    .app-main { margin-left: 0; }
    .hero { padding: 30px 22px; }
    .hero h1 { font-size: 23px; }
}

@media (max-width: 520px) {
    .app-header .brand span.txt { display: none; } /* 窄螢幕僅留 logo */
    .app-main { padding-left: 14px; padding-right: 14px; }
    .card { padding: 16px; }
}