/* style.css — XDC Design PM */

:root {
  --primary: #3D7A72;
  --primary-light: #4A9189;
  --primary-lighter: #EDF5F3;
  --primary-dark: #2D5C56;
  --white: #FFFFFF;
  --gray-50: #FAFAF9;
  --gray-100: #F0EFEB;
  --gray-200: #E8E7E4;
  --gray-300: #D4D3D0;
  --gray-400: #A3A29E;
  --gray-500: #787774;
  --gray-600: #5C5B58;
  --gray-700: #3D3C3A;
  --gray-800: #1A1A1A;
  --status-unassigned: #956400;
  --status-pending: #6B3FA0;
  --status-active: #2D7A6F;
  --status-done: #346538;
  --type-uxui: #1F6C9F;
  --type-banner: #9F2F5C;
  --type-video: #9A5412;
  --type-research: #6B3FA0;
  --status-tracking: #1F6C9F;
  --p0: #9F2F2D; --p1: #956400; --p2: #1F6C9F; --p3: #A3A29E;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.02);
  --shadow-md: 0 4px 20px rgba(0,0,0,0.04);
  --shadow-lg: 0 12px 40px -10px rgba(0,0,0,0.06);
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --font-sans: 'Outfit', 'Noto Sans TC', -apple-system, system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', monospace;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 15px; scroll-behavior: smooth; }
body { font-family: var(--font-sans); background: #F7F6F3; color: var(--gray-800); line-height: 1.6; min-height: 100dvh; -webkit-font-smoothing: antialiased; }

/* ── Login ── */
#login-screen { display:flex; align-items:center; justify-content:center; min-height:100dvh; background:#F7F6F3; position:relative; }
#login-screen::before { content:''; position:fixed; inset:0; background:radial-gradient(ellipse at 30% 20%, rgba(61,122,114,0.04) 0%, transparent 60%), radial-gradient(ellipse at 70% 80%, rgba(61,122,114,0.03) 0%, transparent 50%); pointer-events:none; }
.login-card { background:var(--white); border-radius:var(--radius-lg); padding:56px 44px; width:420px; box-shadow:var(--shadow-lg); text-align:center; border:1px solid var(--gray-200); position:relative; }
.login-card h1 { font-size:1.6rem; font-weight:400; color:var(--gray-800); margin-bottom:4px; letter-spacing:-0.02em; }
.login-card .subtitle { font-size:0.82rem; color:var(--gray-500); margin-bottom:32px; letter-spacing:0.01em; }
.login-card input { width:100%; padding:12px 16px; border:1px solid var(--gray-200); border-radius:var(--radius-sm); font-size:0.95rem; font-family:var(--font-sans); outline:none; transition:border-color .3s var(--ease); background:var(--gray-50); }
.login-card input:focus { border-color:var(--gray-400); background:var(--white); }
.login-card button { width:100%; padding:13px; margin-top:16px; background:var(--gray-800); color:white; border:none; border-radius:var(--radius-sm); font-size:0.95rem; font-weight:400; font-family:var(--font-sans); cursor:pointer; transition:all .3s var(--ease); }
.login-card button:hover { background:var(--gray-700); }
.login-card button:active { transform:scale(0.98); }
.login-error { color:#9F2F2D; font-size:0.82rem; margin-top:8px; display:none; }

/* ── Layout ── */
#app { display:none; }
#app.active { display:flex; min-height:100dvh; }
.sidebar { width:240px; background:var(--white); color:var(--gray-800); display:flex; flex-direction:column; position:fixed; top:0; left:0; bottom:0; z-index:100; border-right:1px solid var(--gray-200); transition:width .3s var(--ease); overflow:hidden; }
.sidebar-brand { padding:20px 16px 18px; border-bottom:1px solid var(--gray-200); overflow:hidden; display:flex; align-items:center; gap:12px; }
.sidebar-logo { flex-shrink:0; width:44px; height:44px; display:block; border-radius:8px; }
.sidebar-brand-text { font-size:0.72rem; color:var(--gray-500); letter-spacing:0.02em; white-space:normal; line-height:1.4; }
.sidebar-toggle { position:absolute; top:24px; right:8px; width:28px; height:28px; border:1px solid var(--gray-200); background:var(--white); border-radius:var(--radius-sm); cursor:pointer; display:flex; align-items:center; justify-content:center; color:var(--gray-400); z-index:101; transition:all .3s var(--ease); }
.sidebar-toggle:hover { background:var(--gray-100); color:var(--gray-700); }
.sidebar-nav { flex:1; padding:16px 12px; display:flex; flex-direction:column; gap:2px; }
.nav-item { display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:var(--radius-sm); color:var(--gray-500); text-decoration:none; font-size:0.88rem; font-weight:500; cursor:pointer; transition:all .25s var(--ease); border-left:2px solid transparent; white-space:nowrap; overflow:hidden; }
.nav-item:hover { background:var(--gray-100); color:var(--gray-800); }
.nav-item.active { background:var(--gray-100); color:var(--gray-800); border-left-color:var(--primary); font-weight:400; }
.nav-item svg { width:18px; height:18px; flex-shrink:0; opacity:0.6; min-width:18px; }
.nav-item.active svg { opacity:1; }
.nav-label { transition:opacity .2s var(--ease); }
.sidebar-footer { padding:8px 12px 16px; border-top:1px solid var(--gray-200); white-space:nowrap; overflow:hidden; }
.sidebar-footer .nav-logout { color:#9F2F2D; font-size:0.85rem; margin-bottom:8px; }
.sidebar-footer .nav-logout:hover { background:#FDEBEC; color:#9F2F2D; }
.sidebar-footer .nav-logout svg { opacity:0.8; }
.sidebar-version { font-size:0.72rem; color:var(--gray-400); display:block; padding:0 12px; }

/* Sidebar collapsed */
.sidebar.collapsed { width:44px; }
.sidebar.collapsed .sidebar-brand { padding:8px 6px; justify-content:center; gap:0; }
.sidebar.collapsed .sidebar-logo { width:30px; height:30px; }
.sidebar.collapsed .sidebar-brand-text { display:none; }
.sidebar.collapsed .sidebar-toggle { position:static; margin:0 auto; transform:rotate(180deg); }
.sidebar.collapsed .sidebar-nav { padding:8px 4px; }
.sidebar.collapsed .nav-item { padding:8px 0; justify-content:center; gap:0; border-left:none; }
.sidebar.collapsed .nav-item svg { width:20px; height:20px; min-width:20px; }
.sidebar.collapsed .nav-label { display:none; }
.sidebar.collapsed .sidebar-footer { padding:8px 4px; text-align:center; }

.main { margin-left:240px; flex:1; min-height:100dvh; background:#F7F6F3; transition:margin-left .3s var(--ease); }
.main.sidebar-collapsed { margin-left:44px; }
.topbar { background:rgba(247,246,243,0.85); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); padding:16px 32px; border-bottom:1px solid var(--gray-200); display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; z-index:50; }
.topbar h1 { font-size:1.15rem; font-weight:400; color:var(--gray-800); letter-spacing:-0.02em; }
.topbar-actions { display:flex; gap:8px; align-items:center; }
.content { padding:28px 36px; }
.page { display:none; }
.page.active { display:block; animation:fadeIn .4s var(--ease); }
@keyframes fadeIn { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:translateY(0)} }

/* ── Buttons ── */
.btn { display:inline-flex; align-items:center; gap:6px; padding:8px 16px; border-radius:var(--radius-sm); font-size:0.88rem; font-weight:400; font-family:var(--font-sans); cursor:pointer; border:none; transition:all .3s var(--ease); }
.btn:active { transform:scale(0.97); }
.btn-primary { background:var(--gray-800); color:white; }
.btn-primary:hover { background:var(--gray-700); }
.btn-ghost { background:transparent; color:var(--gray-600); border:1px solid var(--gray-200); }
.btn-ghost:hover { background:var(--gray-100); color:var(--gray-800); }
.btn-sm { padding:5px 10px; font-size:0.78rem; }
.btn-danger { background:#FDEBEC; color:#9F2F2D; border:1px solid #F5D0D0; }
.btn-danger:hover { background:#FADCDD; }

/* ── Dashboard ── */
.stat-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:12px; margin-bottom:20px; }
.stat-card { background:var(--white); border-radius:var(--radius-sm); padding:10px 14px; border:1px solid var(--gray-200); transition:all .2s var(--ease); display:flex; align-items:center; justify-content:space-between; gap:10px; }
.stat-card:hover { box-shadow:0 2px 8px rgba(0,0,0,0.04); border-color:var(--gray-300); }
.stat-label { font-size:0.82rem; color:#555; font-weight:400; letter-spacing:0.02em; white-space:nowrap; }
.stat-badge { background:#111; color:#fff; width:22px; height:22px; border-radius:100px; display:inline-flex; align-items:center; justify-content:center; font-size:0.7rem; font-weight:400; font-family:var(--font-mono); flex-shrink:0; }

.dash-section { background:var(--white); border-radius:var(--radius-md); border:1px solid var(--gray-200); margin-bottom:20px; }
.dash-section-header { padding:16px 20px; border-bottom:1px solid var(--gray-200); font-size:0.95rem; font-weight:400; display:flex; align-items:center; gap:8px; color:#333; letter-spacing:-0.01em; }
.dash-section-body { padding:12px 20px; }
.dash-row-2col { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:20px; }
.dash-row-2col .dash-section { margin-bottom:0; }
.dash-dept-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(200px,1fr)); gap:12px; padding:14px 20px; }
.dash-dept-card { padding:14px 16px; border-radius:var(--radius-sm); border:1px solid var(--gray-200); transition:border-color .25s var(--ease); }
.dash-dept-card:hover { border-color:var(--gray-300); }
.dash-dept-card-name { font-weight:400; font-size:0.88rem; margin-bottom:8px; color:#333; }
.dash-dept-card-stats { display:flex; gap:12px; }
.dash-dept-card-stats span { font-size:0.82rem; font-family:var(--font-mono); color:#555; }
.dash-dept-card-stats .active-count { color:var(--status-active); font-weight:400; }
.dash-dept-card-stats .done-count { color:var(--status-done); font-weight:400; }
.deadline-item { display:flex; align-items:center; padding:10px 0; border-bottom:1px solid var(--gray-100); gap:10px; flex-wrap:wrap; }
.deadline-item:last-child { border-bottom:none; }
.deadline-date { font-family:var(--font-mono); font-size:0.78rem; color:var(--primary); font-weight:500; min-width:80px; font-variant-numeric:tabular-nums; }
.deadline-date.overdue { color:#9F2F2D; }
.deadline-date.today { color:var(--status-unassigned); font-weight:400; }
.deadline-name { flex:1; font-size:0.86rem; font-weight:500; min-width:120px; color:var(--gray-800); }
.deadline-phase { font-size:0.82rem; color:#555; }

.dash-wl-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(180px,1fr)); gap:10px; padding:14px 20px; }
.dash-wl-card { padding:12px 14px; border-radius:var(--radius-sm); border:1px solid var(--gray-200); transition:border-color .25s var(--ease); }
.dash-wl-card:hover { border-color:var(--gray-300); }
.dash-wl-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:2px; }
.dash-wl-name { font-weight:700; font-size:0.84rem; color:var(--gray-800); }
.dash-wl-badge { background:#8E354A; color:#fff; min-width:27px; height:27px; border-radius:100px; display:inline-flex; align-items:center; justify-content:center; font-size:0.82rem; font-weight:500; font-family:var(--font-mono); padding:0 7px; flex-shrink:0; }
.dash-wl-team { font-size:0.78rem; color:#555; margin-bottom:8px; letter-spacing:0.02em; }
.dash-wl-bar-bg { height:4px; background:var(--gray-100); border-radius:2px; overflow:hidden; margin-bottom:6px; }
.dash-wl-bar-fill { height:100%; border-radius:2px; transition:width .5s var(--ease); }
.dash-wl-bar-fill.ok { background:var(--status-done); }
.dash-wl-bar-fill.warn { background:var(--status-unassigned); }
.dash-wl-bar-fill.over { background:#9F2F2D; }
.dash-wl-stat { font-size:0.78rem; color:#555; display:flex; justify-content:space-between; font-variant-numeric:tabular-nums; }

/* ── Badges & Tags ── */
.priority-badge { display:inline-block; padding:2px 7px; border-radius:4px; font-size:0.68rem; font-weight:400; font-family:var(--font-mono); letter-spacing:.3px; }
.priority-badge.p0 { background:#FDEBEC; color:#9F2F2D; }
.priority-badge.p1 { background:#FBF3DB; color:#956400; }
.priority-badge.p2 { background:#E1F3FE; color:#1F6C9F; }
.priority-badge.p3 { background:var(--gray-100); color:var(--gray-500); }

.priority-dot { width:8px; height:8px; border-radius:50%; display:inline-block; flex-shrink:0; }
.priority-dot.p0 { background:#9F2F2D; }
.priority-dot.p1 { background:#956400; }
.priority-dot.p2 { background:#1F6C9F; }
.priority-dot.p3 { background:var(--gray-400); }

.tag { display:inline-block; padding:2px 8px; border-radius:100px; font-size:0.78rem; font-weight:500; background:var(--gray-100); color:var(--gray-600); margin:1px 2px; }
.tag.urgent { background:#FDEBEC; color:#9F2F2D; }
.tag.boss { background:#FBF3DB; color:#956400; }
.tag.external { background:#E1F3FE; color:#1F6C9F; }

.status-badge { display:inline-block; padding:2px 8px; border-radius:100px; font-size:0.68rem; font-weight:400; letter-spacing:0.02em; }
.status-badge.unassigned { background:#FBF3DB; color:#956400; }
.status-badge.pending { background:#F0E8F5; color:#6B3FA0; }
.status-badge.active { background:var(--primary-lighter); color:var(--primary-dark); }
.status-badge.done { background:#EDF3EC; color:#346538; }
.status-badge.tracking { background:#E1F3FE; color:#1F6C9F; }
.status-badge.cancelled { background:var(--gray-100); color:var(--gray-500); }

.type-tag { display:inline-block; padding:2px 8px; border-radius:100px; font-size:0.68rem; font-weight:500; }
.type-tag.uxui { background:#E1F3FE; color:#1F6C9F; }
.type-tag.banner { background:#F5E1EE; color:#9F2F5C; }
.type-tag.video { background:#F5E8D8; color:#9A5412; }
.type-tag.research { background:#F0E8F5; color:#6B3FA0; }

.assignee-chip { display:inline-block; padding:2px 8px; background:var(--primary-lighter); color:var(--primary-dark); border-radius:100px; font-size:0.72rem; font-weight:500; margin:1px 2px; }
.dept-color-badge { display:inline-block; padding:2px 8px; border-radius:100px; font-size:0.72rem; font-weight:400; margin:1px 2px; white-space:nowrap; }

/* ── Filters ── */
.filter-bar { display:flex; gap:10px; margin-bottom:20px; flex-wrap:wrap; align-items:center; }
.filter-bar select, .filter-bar input[type="text"] { padding:7px 12px; border:1px solid var(--gray-200); border-radius:var(--radius-sm); font-size:0.88rem; font-family:var(--font-sans); background:var(--white); color:#555; outline:none; min-width:130px; transition:border-color .25s var(--ease); }
.filter-bar select:focus, .filter-bar input:focus { border-color:var(--gray-400); }
.project-filters-row { display:flex; align-items:center; justify-content:space-between; width:100%; }
.project-filters-left { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.project-filters-left select, .project-filters-left input[type="text"] { padding:7px 12px; border:1px solid var(--gray-200); border-radius:var(--radius-sm); font-size:0.88rem; font-family:var(--font-sans); background:var(--white); color:#555; outline:none; min-width:130px; transition:border-color .25s var(--ease); }
.project-filters-left select:focus, .project-filters-left input:focus { border-color:var(--gray-400); }

.proj-tabs { display:flex; gap:0; margin-bottom:16px; border-bottom:2px solid var(--gray-200); }
.proj-tab { padding:8px 20px; font-size:0.88rem; font-weight:400; color:var(--gray-400); background:none; border:none; cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-2px; transition:all .2s var(--ease); }
.proj-tab:hover { color:var(--gray-600); }
.proj-tab.active { color:var(--primary-dark); border-bottom-color:var(--primary); }

/* ── Project Table ── */
.project-table { width:100%; background:var(--white); border-radius:var(--radius-md); border:1px solid var(--gray-200); border-collapse:collapse; overflow:hidden; }
.project-table th { background:var(--gray-50); padding:10px 14px; text-align:left; font-size:0.88rem; font-weight:400; color:#333; text-transform:uppercase; letter-spacing:0.06em; border-bottom:1px solid var(--gray-200); white-space:nowrap; }
.project-table td { padding:10px 14px; font-size:0.95rem; border-bottom:1px solid var(--gray-100); vertical-align:middle; }
.project-table tr:hover td { background:var(--gray-50); }
.project-table tr { transition:background .2s var(--ease); }
.proj-name { font-weight:400; color:var(--primary); cursor:pointer; transition:color .2s var(--ease); }
.proj-name:hover { color:var(--primary-dark); }

/* ── Gantt ── */
.gantt-container { background:var(--white); border-radius:var(--radius-md); border:1px solid var(--gray-200); overflow:hidden; }

/* Four-quadrant frozen-pane grid */
.gantt-wrapper {
  display:grid;
  grid-template-columns:280px 1fr;
  grid-template-rows:auto 1fr;
  grid-template-areas:"corner header" "labels body";
  max-height:calc(100vh - 200px);
  overflow:hidden;
}
.gc-corner {
  grid-area:corner;
  background:var(--gray-50);
  border-right:2px solid var(--gray-200);
  border-bottom:1px solid var(--gray-200);
  padding:10px 14px;
  font-size:0.88rem;
  font-weight:400;
  color:#333;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  line-height:1.4;
  letter-spacing:0.06em;
  z-index:40;
  position:sticky;
  top:0;
  left:0;
}
.gc-header {
  grid-area:header;
  overflow:hidden;
  z-index:30;
  border-bottom:1px solid var(--gray-200);
}
.gc-labels {
  grid-area:labels;
  overflow:hidden;
  border-right:2px solid var(--gray-200);
  z-index:20;
  background:var(--white);
}
.gc-body {
  grid-area:body;
  overflow:auto;
  z-index:10;
}

/* Shared table styles for all quadrants */
.gantt-table { border-collapse:separate; border-spacing:0; }
.gantt-month-row th { background:var(--gray-50); color:#333; font-size:0.88rem; font-weight:400; padding:8px 4px; text-align:center; letter-spacing:0.03em; white-space:nowrap; border-bottom:1px solid var(--gray-200); }
.gantt-header-row th { background:var(--white); color:#555; font-size:0.88rem; font-weight:400; padding:10px 4px; text-align:center; border-bottom:1px solid var(--gray-200); }
.gantt-header-row th.week-col { min-width:64px; font-family:var(--font-mono); font-size:0.85rem; }
.gantt-header-row th .wk-date { font-size:0.75rem; color:var(--gray-400); }
.gantt-row td { padding:0; height:38px; border-bottom:1px solid var(--gray-100); position:relative; }
.gantt-row td.label-cell { min-width:280px; max-width:280px; padding:6px 10px 6px 14px; font-size:0.95rem; font-weight:400; background:var(--white); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--gray-800); }
.gantt-row.project-row td.label-cell { cursor:pointer; }
.gantt-row.project-row td.label-cell:hover { color:var(--primary); }
.gantt-row.phase-row td.label-cell { padding-left:32px; color:var(--gray-600); font-size:0.88rem; }
.gantt-row.phase-row.phase-due-soon td { background:#FBF3DB !important; }
.gantt-row.phase-row.phase-due-soon td.label-cell { color:#956400; }
.gantt-row.phase-row.phase-overdue td { background:#FDEBEC !important; }
.gantt-row.phase-row.phase-overdue td.label-cell { color:#9F2F2D; }
.gantt-row td.day-cell { min-width:64px; }
.gantt-row td.day-cell.week-even, .gantt-header-row th.week-col.week-even { background:var(--gray-50); }
.gantt-row td.day-cell.today-col, .gantt-header-row th.week-col.today-col { background:#FBF3DB; }
.gantt-row td.month-border, .gantt-header-row th.month-border { border-left:2px solid var(--gray-300); }
.gantt-bar { position:absolute; top:6px; height:26px; border-radius:var(--radius-sm); z-index:3; display:flex; align-items:center; padding:0 8px; font-size:0.78rem; font-weight:400; color:white; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; transition:all .25s var(--ease); }
.gantt-bar:hover { opacity:0.85; transform:scaleY(1.08); }
.gantt-bar.project-bar { background:var(--gray-300); opacity:0.3; height:26px; top:6px; }
.gantt-bar.phase-bar { height:20px; top:9px; }
.gantt-bar.type-uxui { background:var(--type-uxui); opacity:0.8; }
.gantt-bar.type-banner { background:var(--type-banner); opacity:0.8; }
.gantt-bar.type-video { background:var(--type-video); opacity:0.8; }
.gantt-bar.type-research { background:var(--type-research); opacity:0.8; }
.gantt-bar.status-gray { background:var(--gray-300) !important; color:var(--gray-600); opacity:0.6; }
.toggle-arrow { display:inline-block; width:14px; font-size:0.68rem; color:var(--gray-400); flex-shrink:0; transition:transform .25s var(--ease); margin-right:4px; }
.toggle-arrow.expanded { transform:rotate(90deg); }
.phase-progress { position:absolute; left:0; top:0; bottom:0; background:rgba(255,255,255,0.25); border-radius:var(--radius-sm) 0 0 var(--radius-sm); }
.gantt-toggle { display:flex; gap:0; border-bottom:2px solid var(--gray-200); margin-bottom:0; }
.gantt-toggle-btn { padding:8px 20px; border:none; background:none; font-size:0.88rem; font-family:var(--font-sans); cursor:pointer; color:var(--gray-400); font-weight:400; border-bottom:2px solid transparent; margin-bottom:-2px; transition:all .2s var(--ease); }
.gantt-toggle-btn:hover { color:var(--gray-600); }
.gantt-toggle-btn.active { color:var(--primary-dark); border-bottom-color:var(--primary); background:none; }
.gantt-filter-row { display:flex; flex-wrap:wrap; gap:10px; align-items:center; padding:12px 0; min-height:44px; }
.gantt-filter-row select { padding:7px 12px; border:1px solid var(--gray-200); border-radius:var(--radius-sm); font-size:0.88rem; font-family:var(--font-sans); background:var(--white); color:#555; outline:none; min-width:130px; transition:border-color .25s var(--ease); }
.gantt-filter-row select:focus { border-color:var(--gray-400); }
.member-gantt-badges { display:flex; flex-wrap:wrap; gap:8px; }
.member-gantt-badge { display:inline-block; padding:5px 14px; border-radius:100px; font-size:0.82rem; font-family:var(--font-sans); color:#555; background:var(--gray-100); border:1px solid var(--gray-200); cursor:pointer; transition:all .2s var(--ease); font-weight:500; }
.member-gantt-badge:hover { opacity:0.85; }
.member-gantt-badge.active { color:#fff; }
.member-gantt-badge-all { background:rgba(55,65,81,0.12); color:#4A5568; border-color:rgba(55,65,81,0.25); }
.member-gantt-badge-all.active { background:#4A5568; color:#fff; border-color:#4A5568; }

/* ── Workload ── */
.workload-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(280px,1fr)); gap:14px; }
.workload-card { background:var(--white); border-radius:var(--radius-md); border:1px solid var(--gray-200); padding:20px; transition:border-color .25s var(--ease); }
.workload-card:hover { border-color:var(--gray-300); }
.workload-card-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:2px; }
.workload-card-name { font-weight:700; font-size:0.95rem; }
.workload-card-badge { background:var(--gray-800); color:#fff; min-width:22px; height:22px; border-radius:100px; display:inline-flex; align-items:center; justify-content:center; font-size:0.7rem; font-weight:500; font-family:var(--font-mono); padding:0 6px; flex-shrink:0; }
.workload-card-team { font-size:0.82rem; color:#555; margin-bottom:12px; }
.workload-bar-bg { height:8px; background:var(--gray-100); border-radius:4px; overflow:hidden; margin-bottom:6px; }
.workload-bar-fill { height:100%; border-radius:4px; transition:width .3s; }
.workload-bar-fill.ok { background:var(--status-done); }
.workload-bar-fill.warn { background:var(--status-unassigned); }
.workload-bar-fill.over { background:#9F2F2D; }
.workload-stat { font-size:0.82rem; color:#555; display:flex; justify-content:space-between; }
.workload-projects { margin-top:10px; }
.workload-proj-item { font-size:0.82rem; color:#555; padding:4px 0; border-bottom:1px solid var(--gray-50); display:flex; align-items:center; gap:6px; }
.workload-proj-item:last-child { border-bottom:none; }

/* ── Project Edit Page ── */
.project-edit-page { max-width:900px; margin:0 auto; }
.project-edit-header { display:flex; align-items:center; gap:12px; margin-bottom:24px; padding-bottom:20px; border-bottom:1px solid var(--gray-200); }
.project-edit-body { display:grid; gap:0; }
.project-edit-section { background:var(--white); border:1px solid var(--gray-200); border-radius:var(--radius-md); padding:24px 28px; margin-bottom:16px; }
.project-edit-section-title { font-size:0.95rem; font-weight:700; color:#333; margin-bottom:16px; letter-spacing:-0.01em; }
.project-edit-footer { display:flex; gap:8px; justify-content:flex-end; padding-top:20px; border-top:1px solid var(--gray-200); margin-top:8px; }

/* ── Delete Modal ── */
.modal-overlay { position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,0.25); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); z-index:200; display:none; align-items:center; justify-content:center; }
.modal-overlay.active { display:flex; }
.modal { background:var(--white); border-radius:var(--radius-lg); width:660px; max-height:88vh; overflow-y:auto; box-shadow:var(--shadow-lg); border:1px solid var(--gray-200); animation:modalIn .3s var(--ease); }
@keyframes modalIn { from{opacity:0;transform:translateY(16px) scale(0.98)} to{opacity:1;transform:translateY(0) scale(1)} }
.modal-header { padding:24px 28px; border-bottom:1px solid var(--gray-200); display:flex; align-items:center; justify-content:space-between; }
.modal-header h2 { font-size:1.05rem; font-weight:400; letter-spacing:-0.01em; }
.modal-close { width:32px; height:32px; border:none; background:var(--gray-100); border-radius:var(--radius-sm); cursor:pointer; font-size:1.1rem; color:var(--gray-500); display:flex; align-items:center; justify-content:center; transition:all .2s var(--ease); }
.modal-close:hover { background:var(--gray-200); color:var(--gray-700); }
.modal-body { padding:28px; }

/* ── Forms ── */
.form-group { margin-bottom:16px; }
.form-group label { display:block; font-size:0.88rem; font-weight:400; color:#555; margin-bottom:6px; letter-spacing:0.02em; }
.form-group input, .form-group select, .form-group textarea { width:100%; padding:9px 12px; border:1px solid var(--gray-200); border-radius:var(--radius-sm); font-size:0.95rem; color:#555; font-family:var(--font-sans); outline:none; transition:all .25s var(--ease); background:var(--gray-50); }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color:var(--gray-400); background:var(--white); box-shadow:0 0 0 3px rgba(61,122,114,0.06); }
.form-group textarea { resize:vertical; min-height:50px; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.form-row-3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px; }
.form-group select[multiple] { min-height:72px; }
.phases-editor { margin-top:6px; }
.phase-entry { display:grid; grid-template-columns:20px 28px 1fr 70px 100px 100px 28px; gap:6px; align-items:center; margin-bottom:6px; transition:opacity .2s, background .2s; }
.phase-entry input { padding:6px 8px; border:1px solid var(--gray-200); border-radius:var(--radius-sm); font-size:0.95rem; color:#555; font-family:var(--font-sans); outline:none; background:var(--gray-50); transition:all .25s var(--ease); }
.phase-entry input:focus { border-color:var(--gray-400); background:var(--white); }
.phase-entry-header { display:grid; grid-template-columns:20px 28px 1fr 70px 100px 100px 28px; gap:6px; font-size:0.88rem; color:#555; font-weight:400; margin-bottom:4px; padding:0 2px; }
.phase-done-cb { width:18px; height:18px; accent-color:var(--primary); cursor:pointer; margin:0; }
.phase-entry.phase-done { background:var(--gray-50); border-radius:var(--radius-sm); }
.phase-drag-handle { cursor:grab; color:var(--gray-400); font-size:1rem; text-align:center; user-select:none; line-height:1; }
.phase-drag-handle:active { cursor:grabbing; }
.phase-entry.phase-dragging { opacity:0.4; }
.phase-entry.phase-drop-before { box-shadow:0 -2px 0 0 var(--primary); }
.phase-entry.phase-drop-after { box-shadow:0 2px 0 0 var(--primary); }
.phase-remove { width:26px; height:26px; border:1px solid #F5D0D0; background:#FDEBEC; color:#9F2F2D; border-radius:var(--radius-sm); cursor:pointer; font-size:0.95rem; display:flex; align-items:center; justify-content:center; transition:all .2s var(--ease); }
.phase-remove:hover { background:#FADCDD; }
.add-phase-btn { background:none; border:1px dashed var(--gray-300); padding:8px; width:100%; border-radius:var(--radius-sm); color:#555; font-size:0.88rem; cursor:pointer; font-family:var(--font-sans); margin-top:4px; transition:all .25s var(--ease); }
.add-phase-btn:hover { border-color:var(--gray-400); color:var(--gray-700); background:var(--gray-50); }
.modal-footer { padding:18px 28px; border-top:1px solid var(--gray-200); display:flex; gap:8px; justify-content:flex-end; }

/* ── Tags ── */
.tags-container { display:flex; flex-wrap:wrap; gap:4px; padding:6px 8px; border:1px solid var(--gray-200); border-radius:var(--radius-sm); min-height:36px; cursor:text; transition:all .25s var(--ease); background:var(--gray-50); }
.tags-container:focus-within { border-color:var(--gray-400); background:var(--white); box-shadow:0 0 0 3px rgba(61,122,114,0.06); }
.tags-container .tag { cursor:pointer; }
.tags-container .tag:hover { background:#FDEBEC; color:#9F2F2D; }
.tags-container input { border:none; outline:none; font-size:0.95rem; color:#555; font-family:var(--font-sans); flex:1; min-width:80px; padding:2px 4px; }
.tag-suggestions { display:flex; gap:4px; margin-top:4px; flex-wrap:wrap; }
.tag-suggest-btn { padding:2px 8px; border:1px dashed var(--gray-300); border-radius:100px; font-size:0.82rem; color:var(--gray-500); background:none; cursor:pointer; font-family:var(--font-sans); transition:all .2s var(--ease); }
.tag-suggest-btn:hover { border-color:var(--gray-400); color:var(--gray-700); background:var(--gray-50); }

/* ── Assignee Chips ── */
.assignees-container { display:flex; flex-wrap:wrap; gap:6px; padding:8px 10px; border:1px solid var(--gray-200); border-radius:var(--radius-sm); min-height:40px; background:var(--gray-50); transition:all .25s var(--ease); }
.assignees-container:empty::before { content:'尚未指派成員'; color:var(--gray-400); font-size:0.82rem; }
.assignees-container .assignee-chip { cursor:pointer; display:inline-flex; align-items:center; gap:4px; padding:3px 10px; background:var(--primary-lighter); color:var(--primary-dark); border-radius:100px; font-size:0.78rem; font-weight:500; transition:all .2s var(--ease); }
.assignees-container .assignee-chip:hover { background:#FDEBEC; color:#9F2F2D; }
.assignees-container .assignee-chip .chip-x { font-size:0.85rem; line-height:1; opacity:0.6; margin-left:2px; }
.assignees-container .assignee-chip:hover .chip-x { opacity:1; }
.assignee-suggestions { display:flex; gap:4px; margin-top:6px; flex-wrap:wrap; }
.assignee-suggest-btn { padding:3px 10px; border:1px dashed var(--gray-300); border-radius:100px; font-size:0.75rem; color:var(--gray-500); background:none; cursor:pointer; font-family:var(--font-sans); transition:all .2s var(--ease); }
.assignee-suggest-btn:hover { border-color:var(--primary); color:var(--primary-dark); background:var(--primary-lighter); }

/* ── Settings ── */
.settings-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(220px,1fr)); gap:12px; align-items:start; }
.settings-card { background:var(--white); border-radius:var(--radius-md); border:1px solid var(--gray-200); }
.settings-card-header { padding:16px 20px; border-bottom:1px solid var(--gray-200); font-weight:400; font-size:0.95rem; color:#333; letter-spacing:-0.01em; display:flex; align-items:center; gap:8px; }
.settings-list { padding:2px 0; }
.settings-item { display:flex; align-items:center; justify-content:space-between; padding:2px 14px; font-size:0.88rem; color:#555; line-height:1.4; border-bottom:1px solid var(--gray-50); }
.settings-item:last-child { border-bottom:none; }
.settings-item:hover { background:var(--gray-50); }
.settings-item .del-btn { opacity:0; background:none; border:none; color:#9F2F2D; cursor:pointer; font-size:0.78rem; transition:opacity .2s var(--ease); padding:2px 4px; }
.settings-item:hover .del-btn { opacity:1; }
.settings-edit-input { border:1px solid transparent; background:transparent; padding:2px 4px; border-radius:var(--radius-sm); font-size:0.88rem; font-family:var(--font-sans); outline:none; flex:1; min-width:0; transition:all .2s var(--ease); color:#555; }
.settings-edit-input:hover { border-color:var(--gray-200); background:var(--gray-50); }
.settings-edit-input:focus { border-color:var(--gray-400); background:var(--white); box-shadow:0 0 0 3px rgba(61,122,114,0.06); }
.settings-add { display:flex; gap:6px; padding:8px 14px; border-top:1px solid var(--gray-100); }
.settings-add input { flex:1; padding:4px 8px; border:1px solid var(--gray-200); border-radius:var(--radius-sm); font-size:0.88rem; color:#555; font-family:var(--font-sans); outline:none; background:var(--gray-50); transition:all .25s var(--ease); }
.settings-add input:focus { border-color:var(--gray-400); background:var(--white); }

/* ── Members Page ── */
.members-toolbar { display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; gap:12px; flex-wrap:wrap; }
.members-toolbar select { padding:7px 12px; border:1px solid var(--gray-200); border-radius:var(--radius-sm); font-size:0.88rem; font-family:var(--font-sans); background:var(--white); color:#555; outline:none; }
.member-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(290px,1fr)); gap:14px; }
.member-card { background:var(--white); border-radius:var(--radius-md); border:1px solid var(--gray-200); padding:20px; transition:border-color .25s var(--ease); position:relative; }
.member-card:hover { border-color:var(--gray-300); }
.member-card-top { display:flex; gap:14px; align-items:flex-start; margin-bottom:10px; }
.member-avatar { width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:400; font-size:1rem; color:white; flex-shrink:0; letter-spacing:-0.02em; }
.member-name-row { display:flex; align-items:center; gap:8px; }
.member-name-en { font-weight:400; font-size:0.95rem; color:var(--gray-800); }
.member-name-zh { font-size:0.82rem; color:#555; margin-top:2px; }
.member-team-badge { display:inline-block; padding:2px 8px; border-radius:100px; font-size:0.68rem; font-weight:500; background:var(--primary-lighter); color:var(--primary-dark); }
.member-email { font-size:0.85rem; color:#555; margin-top:8px; word-break:break-all; }
.member-stat { display:flex; gap:12px; margin-top:10px; padding-top:10px; border-top:1px solid var(--gray-100); font-size:0.82rem; color:#555; }
.member-stat span { font-family:var(--font-mono); }
.member-actions { position:absolute; top:12px; right:12px; display:flex; gap:4px; }
.member-actions button { opacity:0; transition:opacity .2s var(--ease); }
.member-card:hover .member-actions button { opacity:1; }
.member-form { background:var(--white); border-radius:var(--radius-md); border:1px solid var(--gray-200); padding:24px 28px; margin-bottom:20px; }
.member-form-title { font-size:0.95rem; font-weight:400; color:#333; margin-bottom:16px; letter-spacing:-0.01em; }
.member-form-grid { display:grid; grid-template-columns:1fr 1fr 2fr 1fr; gap:12px; align-items:end; }

/* ── Gantt Drag ── */
.gc-labels .project-row .label-cell { cursor:grab; }
.gc-labels .project-row.gantt-dragging .label-cell { cursor:grabbing; }
.gc-labels .project-row.gantt-dragging { opacity:0.35; }
.gc-body .project-row.gantt-dragging { opacity:0.35; }
.gc-labels .project-row.gantt-drop-before td,
.gc-labels .project-row.gantt-drop-before .label-cell { box-shadow:0 -2px 0 0 var(--primary) inset; }

/* ── Misc ── */
.empty-state { text-align:center; padding:48px 20px; color:var(--gray-400); }
.empty-state p { font-size:0.88rem; }

/* ── Toast Notification ── */
.toast-notification { position:fixed; top:20px; right:20px; padding:12px 20px; border-radius:var(--radius-sm); font-size:0.82rem; font-weight:500; font-family:var(--font-sans); z-index:9999; opacity:0; transform:translateY(-10px); transition:all .3s var(--ease); max-width:400px; box-shadow:var(--shadow-md); }
.toast-notification.show { opacity:1; transform:translateY(0); }
.toast-success { background:#EDF3EC; color:#346538; border:1px solid #C6DFC4; }
.toast-warn { background:#FBF3DB; color:#956400; border:1px solid #F0E4B6; }

/* ── Manager Mobile Dashboard ── */
#page-m-dashboard { padding:12px; }

.md-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-bottom:8px; }
.md-stat-card { background:var(--white); border-radius:var(--radius-sm); padding:12px 8px; text-align:center; border:1px solid var(--gray-200); }
.md-stat-num { font-size:1.5rem; font-weight:500; font-family:var(--font-mono); line-height:1.2; }
.md-stat-label { font-size:0.72rem; color:var(--gray-500); margin-top:2px; letter-spacing:0.02em; }
.md-stat-active .md-stat-num { color:var(--status-active); }
.md-stat-overdue .md-stat-num { color:#9F2F2D; }
.md-stat-unassigned .md-stat-num { color:var(--status-unassigned); }
.md-stat-pending .md-stat-num { color:var(--status-pending); }

.md-summary { font-size:0.75rem; color:var(--gray-400); text-align:center; margin-bottom:14px; font-family:var(--font-mono); letter-spacing:0.03em; }

.md-section { background:var(--white); border-radius:var(--radius-md); border:1px solid var(--gray-200); margin-bottom:12px; overflow:hidden; }
.md-section-alert { border-color:#F5D0D0; }
.md-section-title { padding:12px 14px; border-bottom:1px solid var(--gray-200); font-size:0.85rem; font-weight:500; color:var(--gray-700); display:flex; align-items:center; gap:6px; letter-spacing:-0.01em; }
.md-section-alert .md-section-title { background:#FEF6F6; color:#9F2F2D; border-bottom-color:#F5D0D0; }

.md-alert-item { padding:10px 14px; border-bottom:1px solid var(--gray-100); cursor:pointer; transition:background .15s var(--ease); }
.md-alert-item:last-child { border-bottom:none; }
.md-alert-item:active { background:var(--gray-50); }
.md-alert-row1 { display:flex; align-items:center; gap:6px; margin-bottom:4px; }
.md-alert-name { font-size:0.85rem; font-weight:500; color:var(--gray-800); flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.md-alert-row2 { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.md-overdue-days { font-size:0.75rem; font-family:var(--font-mono); color:#9F2F2D; font-weight:500; }
.md-chip { display:inline-block; padding:1px 7px; border-radius:100px; font-size:0.7rem; background:var(--gray-100); color:var(--gray-600); font-weight:500; }
.md-meta { font-size:0.75rem; color:var(--gray-500); font-family:var(--font-mono); }

.md-team-list { padding:6px 0; }
.md-member-row { display:flex; align-items:center; gap:10px; padding:8px 14px; border-bottom:1px solid var(--gray-50); }
.md-member-row:last-child { border-bottom:none; }
.md-member-avatar { width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:500; font-size:0.82rem; flex-shrink:0; }
.md-member-info { flex:1; min-width:0; }
.md-member-name-row { display:flex; align-items:center; justify-content:space-between; margin-bottom:3px; }
.md-member-name { font-size:0.82rem; font-weight:600; }
.md-member-count { font-size:0.72rem; font-family:var(--font-mono); color:var(--gray-500); }
.md-member-bar-bg { height:4px; background:var(--gray-100); border-radius:2px; overflow:hidden; margin-bottom:3px; }
.md-member-bar-fill { height:100%; border-radius:2px; transition:width .5s var(--ease); }
.md-member-bar-fill.ok { background:var(--status-done); }
.md-member-bar-fill.warn { background:var(--status-unassigned); }
.md-member-bar-fill.over { background:#9F2F2D; }
.md-member-stat { display:flex; justify-content:space-between; font-size:0.7rem; color:var(--gray-500); font-family:var(--font-mono); }
.md-member-pct.over { color:#9F2F2D; font-weight:500; }
.md-member-pct.warn { color:#956400; font-weight:500; }
.md-member-pct.ok { color:var(--status-done); }

.md-pri-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; padding:12px 14px; }
.md-pri-item { display:flex; flex-direction:column; align-items:center; gap:4px; }
.md-pri-dot { width:8px; height:8px; border-radius:50%; }
.md-pri-label { font-size:0.7rem; color:var(--gray-500); }
.md-pri-num { font-size:1.1rem; font-weight:500; font-family:var(--font-mono); color:var(--gray-800); }

.md-deadline-item { display:flex; align-items:center; gap:10px; padding:10px 14px; border-bottom:1px solid var(--gray-100); cursor:pointer; transition:background .15s var(--ease); }
.md-deadline-item:last-child { border-bottom:none; }
.md-deadline-item:active { background:var(--gray-50); }
.md-deadline-left { flex-shrink:0; width:40px; text-align:center; }
.md-deadline-days { font-size:0.82rem; font-weight:600; font-family:var(--font-mono); color:var(--gray-600); }
.md-deadline-days.md-urgent { color:#9F2F2D; }
.md-deadline-days.md-soon { color:#956400; }
.md-deadline-right { flex:1; min-width:0; }
.md-deadline-name { font-size:0.85rem; font-weight:500; color:var(--gray-800); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.md-deadline-meta { font-size:0.72rem; color:var(--gray-500); margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.md-dept-list { padding:8px 14px; }
.md-dept-row { display:flex; align-items:center; justify-content:space-between; padding:5px 0; border-bottom:1px solid var(--gray-50); }
.md-dept-row:last-child { border-bottom:none; }
.md-dept-badge { font-size:0.82rem; font-weight:500; padding:2px 8px; border:1.5px solid; border-radius:100px; background:transparent; }
.md-dept-count { font-size:0.82rem; font-family:var(--font-mono); color:var(--gray-600); }

/* ── Responsive ── */
@media (max-width:768px) {
  .sidebar { width:44px; }
  .sidebar .sidebar-brand h2, .sidebar .sidebar-brand span { display:none; }
  .sidebar .sidebar-brand { padding:12px 6px; }
  .sidebar .sidebar-toggle { position:static; margin:0 auto; transform:rotate(180deg); }
  .sidebar .sidebar-nav { padding:8px 4px; }
  .sidebar .nav-item { padding:8px 0; justify-content:center; gap:0; border-left:none; }
  .sidebar .nav-label { display:none; }
  .sidebar .sidebar-footer { display:none; }
  .main { margin-left:44px; }
  .stat-grid { grid-template-columns:repeat(2,1fr); }
  .settings-grid { grid-template-columns:1fr; }
  .content { padding:16px; }

  /* ── Gantt Mobile ── */
  .gantt-filter-row { gap:6px; padding:8px 0; }
  .gantt-filter-row select { min-width:0; flex:1 1 calc(33% - 6px); padding:6px 8px; font-size:0.78rem; }
  .gantt-wrapper { grid-template-columns:160px 1fr; }
  .gantt-row td.label-cell { min-width:160px; max-width:160px; font-size:0.78rem; padding:5px 6px 5px 10px; }
  .gantt-row.phase-row td.label-cell { padding-left:22px; font-size:0.75rem; }
  .gc-corner { padding:8px 6px; font-size:0.78rem; }
  .gantt-header-row th.week-col { min-width:44px; font-size:0.72rem; }
  .gantt-row td.day-cell { min-width:44px; }
  .gantt-bar { font-size:0.68rem; padding:0 4px; height:22px; top:8px; }
  .gantt-bar.project-bar { height:22px; top:8px; }
  .gantt-bar.phase-bar { height:16px; top:11px; }
  .gantt-row td { height:34px; }
  .gantt-toggle-btn { padding:6px 14px; font-size:0.82rem; }
  .toggle-arrow { font-size:0.6rem; margin-right:2px; }
  .gantt-month-row th { font-size:0.78rem; padding:6px 2px; }
  .gantt-header-row th { padding:8px 2px; }
  .gantt-header-row th .wk-date { font-size:0.65rem; }
}