/* High-Tech AI / Premium Dark Mode Design System */
:root {
  /* Dynamic Tech Colors */
  --tech-bg-deep: #050510;
  /* Base Void Background */
  --tech-bg-surface: rgba(20, 20, 40, 0.7);
  /* Glassmorphism Surface */
  --tech-bg-card: rgba(30, 32, 60, 0.4);
  /* Card Surface */
  --tech-border: rgba(100, 200, 255, 0.1);
  /* Glow Border */

  /* Neon Accents */
  --neon-primary: #00f0ff;
  /* Cyber Cyan */
  --neon-secondary: #7000ff;
  /* Deep Electric Purple */
  --neon-success: #00ff9d;
  /* Matrix Green */
  --neon-warning: #ffb800;
  /* Amber Alert */
  --neon-error: #ff2a6d;
  /* Glitch Red */

  /* Text */
  --text-primary: #ffffff;
  --text-secondary: #a0a0c0;
  --text-dim: #505070;

  /* Shadows & Glows */
  --glow-sm: 0 0 10px rgba(0, 240, 255, 0.1);
  --glow-md: 0 0 20px rgba(0, 240, 255, 0.2);
  --shadow-deep: 0 8px 32px rgba(0, 0, 0, 0.5);

  /* Radius */
  --radius-xl: 16px;
  --radius-l: 12px;
  --radius-m: 8px;
}

/* Reset & Base */
* {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  background-color: var(--tech-bg-deep);
  /* Fallback */
  background-image:
    radial-gradient(circle at 10% 20%, rgba(112, 0, 255, 0.15) 0%, transparent 40%),
    radial-gradient(circle at 90% 80%, rgba(0, 240, 255, 0.1) 0%, transparent 40%);
  background-attachment: fixed;
  color: var(--text-primary);
  margin: 0;
  padding: 0;
  height: 100vh;
  overflow: hidden;
  display: flex;
}

/* Scrollbar customization */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* --- Layout: Sidebar + Content --- */

/* Sidebar */
.app-sidebar {
  width: 260px;
  background: var(--tech-bg-surface);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-right: 1px solid var(--tech-border);
  display: flex;
  flex-direction: column;
  padding: 24px 16px;
  flex-shrink: 0;
  z-index: 100;
}

.app-sidebar h1 {
  font-size: 16px;
  /* Slightly larger brand */
  color: var(--neon-primary);
  /* Brand Color */
  text-transform: uppercase;
  letter-spacing: 2px;
  padding: 0 12px;
  margin-bottom: 32px;
  font-weight: 800;
  text-shadow: 0 0 15px rgba(0, 240, 255, 0.4);
}

.nav-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.nav-item {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  border-radius: var(--radius-m);
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  text-decoration: none;
  background: transparent;
  border: 1px solid transparent;
  width: 100%;
  text-align: left;
  letter-spacing: 0.5px;
}

.nav-item:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.03);
}

.nav-item.active {
  background: rgba(0, 240, 255, 0.1);
  border-color: rgba(0, 240, 255, 0.3);
  color: var(--neon-primary);
  box-shadow: var(--glow-sm);
}

/* User Info Panel */
.user-panel {
  margin-top: auto;
  padding-top: 20px;
  border-top: 1px solid var(--tech-border);
}

#user-info {
  font-family: 'JetBrains Mono', monospace;
  /* Tech font for data */
  font-size: 11px;
  color: var(--text-dim);
  margin-bottom: 12px;
}

/* Main Content Area */
.app-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: transparent;
  /* Let body gradient show through */
  /* Remove harsh borders, let it float */
}

/* Title Bar (Header) */
.app-titlebar {
  height: 64px;
  border-bottom: 1px solid var(--tech-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 32px;
  background: rgba(5, 5, 16, 0.6);
  /* Slightly darker header */
  backdrop-filter: blur(10px);
  position: sticky;
  top: 0;
  z-index: 90;
}

.app-titlebar h2 {
  font-size: 20px;
  font-weight: 700;
  margin: 0;
  letter-spacing: 0.5px;
  background: linear-gradient(90deg, #fff, #a0a0c0);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.scroll-content {
  flex: 1;
  overflow-y: auto;
  padding: 32px;
  /* Fancy subtle grid pattern */
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
  background-size: 40px 40px;
}

/* --- Components --- */

/* Glass Cards */
.card {
  background: var(--tech-bg-card);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.05);
  /* Subtle rim light */
  border-radius: var(--radius-xl);
  padding: 24px;
  box-shadow: var(--shadow-deep);
  margin-bottom: 24px;
  position: relative;
  overflow: hidden;
}

/* Card Glow Effect */
.card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
  opacity: 0.5;
}

.card h2 {
  font-size: 18px;
  font-weight: 600;
  margin-top: 0;
  margin-bottom: 20px;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Tables (Tech Style) */
.table-wrap {
  border: 1px solid var(--tech-border);
  border-radius: var(--radius-l);
  overflow: hidden;
  background: rgba(10, 10, 20, 0.4);
}

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  color: var(--text-secondary);
}

.table th {
  text-align: left;
  font-weight: 600;
  color: var(--neon-primary);
  /* Neon Headers */
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 11px;
  padding: 14px 20px;
  background: rgba(0, 0, 0, 0.3);
  /* Darker header */
  border-bottom: 1px solid var(--tech-border);
}

.table td {
  padding: 16px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
  vertical-align: middle;
  transition: background 0.2s;
}

.table tr:hover td {
  background: rgba(255, 255, 255, 0.02);
  color: var(--text-primary);
}

.table tr:last-child td {
  border-bottom: none;
}

/* Buttons (Futuristic) */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 20px;
  border-radius: 4px;
  /* Tech style slightly squarer */
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 0.3s ease;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 1px;
  position: relative;
  overflow: hidden;
}

.btn.primary {
  background: rgba(0, 240, 255, 0.1);
  border-color: var(--neon-primary);
  color: var(--neon-primary);
  box-shadow: 0 0 10px rgba(0, 240, 255, 0.1);
}

.btn.primary:hover {
  background: rgba(0, 240, 255, 0.2);
  box-shadow: 0 0 20px rgba(0, 240, 255, 0.3);
  transform: translateY(-1px);
}

.btn:not(.primary) {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
  color: var(--text-secondary);
}

.btn:not(.primary):hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-primary);
}

/* Inputs (Dark Field) */
input,
select,
textarea {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-m);
  padding: 10px 14px;
  font-size: 14px;
  width: 100%;
  color: var(--text-primary);
  font-family: inherit;
  transition: all 0.3s;
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--neon-primary);
  box-shadow: 0 0 10px rgba(0, 240, 255, 0.1);
  background: rgba(0, 0, 0, 0.5);
}

/* 确保下拉选项可见 - 强制浅色渲染 */
select option,
optgroup option {
  color-scheme: light !important;
  background-color: #ffffff;
  color: #000000;
  -webkit-text-fill-color: #000000;
}

/* Login Overlay (Sci-Fi Portal) */
#login-view {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at center, #1a1a2e 0%, #000 100%);
  z-index: 999;
  display: flex;
  /* Ensure it uses flex to center */
  justify-content: center;
  align-items: center;
}

#login-view.hidden {
  display: none !important;
}

.login-card {
  width: 380px;
  background: rgba(20, 20, 40, 0.6);
  backdrop-filter: blur(30px);
  border: 1px solid var(--neon-primary);
  border-radius: 2px;
  /* Tech Style */
  padding: 40px;
  text-align: center;
  box-shadow: 0 0 50px rgba(0, 240, 255, 0.15);
  position: relative;
}

/* Decorative corner accents for login */
.login-card::after {
  content: '';
  position: absolute;
  top: -1px;
  left: -1px;
  width: 20px;
  height: 20px;
  border-top: 2px solid var(--neon-primary);
  border-left: 2px solid var(--neon-primary);
}

.login-card::before {
  content: '';
  position: absolute;
  bottom: -1px;
  right: -1px;
  width: 20px;
  height: 20px;
  border-bottom: 2px solid var(--neon-primary);
  border-right: 2px solid var(--neon-primary);
}

.login-card h2 {
  color: var(--neon-primary);
  text-transform: uppercase;
  letter-spacing: 3px;
  margin-bottom: 32px;
}

.login-card form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Force visible text in login inputs */
.login-card input {
  background: #1e1e2d !important;
  /* Solid dark background to fix transparency issues */
  color: #ffffff !important;
  border: 1px solid var(--neon-primary) !important;
  font-size: 16px !important;
  -webkit-text-fill-color: #ffffff !important;
}

.login-card input:-webkit-autofill,
.login-card input:-webkit-autofill:hover,
.login-card input:-webkit-autofill:focus,
.login-card input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 30px #1e1e2d inset !important;
  -webkit-text-fill-color: #ffffff !important;
  transition: background-color 5000s ease-in-out 0s;
}

.login-card input::placeholder {
  color: rgba(255, 255, 255, 0.5) !important;
}

/* Status Pills (Glowing) */
.status-pill,
.pill {
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border: 1px solid transparent;
}

.pill.green,
.status-pill.success {
  background: rgba(0, 255, 157, 0.1);
  color: var(--neon-success);
  border-color: rgba(0, 255, 157, 0.3);
  box-shadow: 0 0 5px rgba(0, 255, 157, 0.1);
}

.pill.orange,
.status-pill.warning {
  background: rgba(255, 184, 0, 0.1);
  color: var(--neon-warning);
  border-color: rgba(255, 184, 0, 0.3);
}

.pill.blue,
.status-pill.info {
  background: rgba(0, 240, 255, 0.1);
  color: var(--neon-primary);
  border-color: rgba(0, 240, 255, 0.3);
}

.pill.gray,
.status-pill.neutral {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-secondary);
  border-color: rgba(255, 255, 255, 0.1);
}

/* Task Title overrides */
.table .task-title {
  color: var(--text-primary);
  font-weight: 500;
}

.table .task-owner {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--neon-secondary);
}

/* Modals / Dialogs */
dialog {
  background: #0f0f1a;
  color: #fff;
  border: 1px solid var(--tech-border);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-deep);
  padding: 0;
  /* Let inner content handle padding */
}

dialog::backdrop {
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(5px);
}

/* Explicit High Contrast for Dialog Inputs */
dialog input,
dialog textarea,
dialog select {
  background: rgba(30, 30, 45, 0.95) !important;
  /* Almost opaque */
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  padding: 12px !important;
  font-size: 15px !important;
  /* Larger text */
  border-radius: 4px;
}

dialog input:focus,
dialog textarea:focus,
dialog select:focus {
  border-color: var(--neon-primary) !important;
  background: #000 !important;
  box-shadow: 0 0 8px rgba(0, 240, 255, 0.3);
}

dialog label {
  color: var(--text-secondary);
  font-size: 13px;
  margin-bottom: 6px;
  display: block;
  font-weight: 600;
}

dialog .btn {
  margin-top: 10px;
}

/* Utility */
.hidden {
  display: none !important;
}

#app-container.hidden,
#login-view.hidden {
  display: none !important;
}

.app-titlebar h2 {
  background: none;
  -webkit-background-clip: border-box;
  -webkit-text-fill-color: currentColor;
}

.admin-only.hidden {
  display: none !important;
}

/* Stats (Dashboard Widgets) */
.week-stats {
  display: flex;
  gap: 20px;
  margin-bottom: 24px;
}

.stat-item {
  flex: 1;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.01) 100%);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: var(--radius-m);
  padding: 16px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.stat-number {
  font-size: 32px;
  font-weight: 700;
  color: var(--text-primary);
  display: block;
  margin-bottom: 4px;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
}

.stat-label {
  font-size: 12px;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Ensure view takes full height */
.view {
  height: 100%;
  display: flex;
  flex-direction: column;
}

:root {
  /* Dynamic System Colors */
  --system-bg-base: #f5f5f7;
  /* App background */
  --system-bg-sidebar: #ebxF0F2;
  /* Fallback */
  --system-bg-content: #ffffff;
  /* Card/Content background */
  --system-separator: #d1d1d6;
  /* Borders */

  /* Text Colors */
  --text-primary: #1d1d1f;
  --text-secondary: #86868b;
  --text-tertiary: #bfbfbf;

  /* Tint Color */
  --accent: #007aff;
  --accent-hover: #0062cc;
  --error: #ff3b30;
  --success: #34c759;
  --warning: #ff9500;

  /* Elevation & Radius */
  --radius-l: 12px;
  --radius-m: 10px;
  --radius-s: 6px;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);

  /* Spacing */
  --space-m: 16px;
  --space-l: 24px;
}

/* Reset & Base */
* {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif;
  background-color: var(--system-bg-base);
  color: var(--text-primary);
  margin: 0;
  padding: 0;
  height: 100vh;
  overflow: hidden;
  /* App-like feel */
  display: flex;
  /* Flex container for Sidebar + Main */
}

/* --- Layout: Sidebar + Content --- */

/* Sidebar (Navigation) */
.app-sidebar {
  width: 260px;
  background-color: rgba(240, 240, 245, 0.8);
  /* Translucent sidebar feel */
  backdrop-filter: blur(20px);
  border-right: 1px solid var(--system-separator);
  display: flex;
  flex-direction: column;
  padding: 24px 12px;
  flex-shrink: 0;
}

.app-sidebar h1 {
  font-size: 13px;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 0 12px;
  margin-bottom: 12px;
}

.nav-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.nav-item {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  border-radius: var(--radius-s);
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.1s;
  text-decoration: none;
  background: transparent;
  border: none;
  width: 100%;
  text-align: left;
}

.nav-item:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

.nav-item.active {
  background-color: rgba(0, 0, 0, 0.1);
  color: var(--accent);
  /* Optional: Keep text primary or accent? macOS uses selection color bg */
}

/* Main Content Area */
.app-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background-color: var(--system-bg-content);
  /* White content area */
  border-top-left-radius: 12px;
  /* iOS Corner if sidebar is dark, but here subtle separation */
  margin: 0;
  /* Or margin: 6px; for iPad style floating */
}

/* Title Bar (Header) */
.app-titlebar {
  height: 52px;
  border-bottom: 1px solid var(--system-separator);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(10px);
  position: sticky;
  top: 0;
  z-index: 100;
}

.app-titlebar h2 {
  font-size: 17px;
  font-weight: 600;
  margin: 0;
}

.scroll-content {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
  background-color: var(--system-bg-base);
  /* Gray background for cards inside */
}

/* --- Components --- */

/* Cards (Inset Grouped) */
.card {
  background-color: var(--system-bg-content);
  border-radius: var(--radius-l);
  padding: 20px;
  box-shadow: var(--shadow-sm);
  margin-bottom: 20px;
}

.card h2 {
  font-size: 17px;
  font-weight: 600;
  margin-top: 0;
  margin-bottom: 16px;
  color: var(--text-primary);
}

/* Tables (Apple Style) */
.table-wrap {
  border: 1px solid var(--system-separator);
  border-radius: var(--radius-l);
  overflow: hidden;
  /* Clip corners */
  background: var(--system-bg-content);
}

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.table th {
  text-align: left;
  font-weight: 500;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--system-separator);
  padding: 10px 16px;
  background-color: #f9f9fb;
  /* Slightly off-white header */
  font-size: 12px;
}

.table td {
  padding: 12px 16px;
  border-bottom: 1px solid #f0f0f5;
  /* Lighter separator for rows */
  vertical-align: middle;
}

.table tr:last-child td {
  border-bottom: none;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 14px;
  border-radius: 99px;
  /* Pill */
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  border: none;
  transition: all 0.2s;
  text-decoration: none;
}

.btn.primary {
  background-color: var(--accent);
  color: white;
}

.btn.primary:hover {
  background-color: var(--accent-hover);
}

.btn:not(.primary) {
  background-color: rgba(118, 118, 128, 0.12);
  /* macOS System Gray */
  color: var(--text-primary);
}

.btn:not(.primary):hover {
  background-color: rgba(118, 118, 128, 0.2);
}

/* Inputs */
input,
select,
textarea {
  background-color: rgba(118, 118, 128, 0.08);
  /* Transparent gray */
  border: none;
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 14px;
  width: 100%;
  color: var(--text-primary);
  font-family: inherit;
}

input:focus,
select:focus,
textarea:focus {
  outline: 2px solid var(--neon-primary);
  background: rgba(0, 0, 0, 0.5);
  /* Keep dark on focus */
  color: #fff;
}

/* 下拉选项可见性 */
select option {
  color-scheme: light;
  background-color: #ffffff;
  color: #000000;
}
  box-shadow: 0 0 10px rgba(0, 240, 255, 0.2);
}

/* Login Overlay */
#login-view {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(230, 230, 230, 0.8);
  backdrop-filter: blur(10px);
  z-index: 999;
  display: flex;
  justify-content: center;
  align-items: center;
}

#login-view.hidden {
  display: none;
}

.login-card {
  width: 360px;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: saturate(180%) blur(20px);
  border-radius: 18px;
  padding: 32px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
  text-align: center;
}

.login-card h2 {
  margin-bottom: 24px;
}

.login-card form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Status Pills */
.status-pill {
  padding: 4px 10px;
  border-radius: 12px;
  /* Pill */
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
}

.status-pill.success {
  background: rgba(52, 199, 89, 0.15);
  color: var(--success);
}

.status-pill.warning {
  background: rgba(255, 149, 0, 0.15);
  color: var(--warning);
}

.status-pill.neutral {
  background: rgba(142, 142, 147, 0.15);
  color: var(--text-secondary);
}

/* Utility */
.hidden {
  display: none !important;
}

.admin-only.hidden {
  display: none !important;
}

/* Fix layout for internal flex containers in legacy HTML structure if needed */
.view {
  /* If views are direct children of app-main, they take full height */
  height: 100%;
  display: flex;
  flex-direction: column;
}

:root {
  /* 颜色系统 */
  --bg-primary: #f5f5f7;
  --bg-secondary: #fafafa;
  --surface: #ffffff;
  --surface-elevated: #ffffff;
  --text-primary: #1d1d1f;
  --text-secondary: #6e6e73;
  --text-tertiary: #86868b;
  --accent: #0071e3;
  --accent-hover: #0077ed;
  --accent-pressed: #006edb;
  --success: #30d158;
  --warning: #ff9500;
  --error: #ff3b30;
  --border: #d2d2d7;
  --border-light: #f0f0f2;

  /* 间距系统 */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;

  /* 圆角系统 */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;

  /* 阴影系统 */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.12);

  /* 字体系统 */
  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-base: 17px;
  --font-size-lg: 19px;
  --font-size-xl: 21px;
  --font-size-2xl: 24px;
  --font-size-3xl: 28px;
  --font-size-4xl: 32px;
}

/* 基础重置 */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: var(--font-size-base);
  line-height: 1.47;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  background: var(--bg-primary);
  color: var(--text-primary);
  min-height: 100vh;
}

/* 布局组件 */
.app-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.app-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--border-light);
  padding: var(--space-md) var(--space-xl);
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 64px;
}

.app-header h1 {
  font-size: var(--font-size-xl);
  font-weight: 600;
  letter-spacing: -0.022em;
  color: var(--text-primary);
}

.user-info {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  font-weight: 400;
}

.logout-btn {
  background: none;
  border: none;
  color: var(--accent);
  font-size: var(--font-size-sm);
  cursor: pointer;
  padding: var(--space-sm);
  border-radius: var(--radius-sm);
  transition: background-color 0.2s ease;
}

.logout-btn:hover {
  background: rgba(0, 113, 227, 0.1);
}

/* 导航标签 */
.tabs {
  display: flex;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-xl);
  background: var(--surface);
  border-bottom: 1px solid var(--border-light);
  overflow-x: auto;
}

.tab {
  background: none;
  border: none;
  font-size: var(--font-size-base);
  color: var(--text-secondary);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  font-weight: 400;
}

.tab.active {
  background: rgba(0, 113, 227, 0.1);
  color: var(--accent);
  font-weight: 600;
}

.tab:hover:not(.active) {
  background: rgba(0, 0, 0, 0.04);
}

.tab.hidden {
  display: none;
}

/* 主要内容区域 */
.view {
  flex: 1;
  padding: var(--space-xl);
  max-width: 95vw;
  /* 使用视口宽度的95%，在大屏幕上更充分利用空间 */
  margin: 0 auto;
  width: 100%;
}

/* 大屏幕优化 */
@media (min-width: 1400px) {
  .view {
    max-width: 90vw;
    /* 超大屏幕使用90%宽度 */
    padding: var(--space-xl) var(--space-xxl);
  }
}

.hidden {
  display: none !important;
}

/* 卡片组件 */
.card {
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: var(--space-xl);
  margin-bottom: var(--space-lg);
  border: 1px solid var(--border-light);
}

.card h2 {
  font-size: var(--font-size-2xl);
  font-weight: 600;
  margin-bottom: var(--space-lg);
  letter-spacing: -0.022em;
}

.card h3 {
  font-size: var(--font-size-lg);
  font-weight: 600;
  margin-bottom: var(--space-md);
  letter-spacing: -0.022em;
}

/* 按钮组件 */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 20px;
  font-size: var(--font-size-base);
  font-weight: 500;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
  background: var(--surface);
  color: var(--text-primary);
  border: 1px solid var(--border);
}

.btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

.btn:active {
  transform: translateY(0);
}

.btn.primary {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}

.btn.primary:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}

.btn.primary:active {
  background: var(--accent-pressed);
  border-color: var(--accent-pressed);
}

.btn.danger {
  background: var(--error);
  color: white;
  border-color: var(--error);
}

.btn.small {
  padding: 8px 16px;
  font-size: var(--font-size-sm);
}

/* 表单组件 */
input,
textarea,
select {
  font-family: inherit;
  font-size: var(--font-size-base);
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-secondary);
  transition: all 0.2s ease;
  width: 100%;
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--accent);
  background: var(--surface);
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.1);
}

label {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: 500;
  margin-bottom: var(--space-sm);
  color: var(--text-primary);
}

/* 表格组件 */
.table-wrap {
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  border: 1px solid var(--border-light);
  /* 添加水平滚动支持 */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-base);
  /* 确保表格最小宽度，防止过度压缩 */
  min-width: 1000px;
}

.table th,
.table td {
  padding: 16px 20px;
  text-align: left;
  border-bottom: 1px solid var(--border-light);
  /* 改进文本换行 */
  word-wrap: break-word;
  vertical-align: top;
}

.table thead th {
  font-weight: 600;
  color: var(--text-secondary);
  background: var(--bg-secondary);
  font-size: var(--font-size-sm);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  /* 固定表头高度 */
  height: 56px;
  /* 防止表头文字换行 */
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 10;
}

.table tbody tr {
  transition: background-color 0.2s ease;
}

.table tbody tr:hover {
  background: var(--bg-secondary);
}

.table tbody tr:last-child td {
  border-bottom: none;
}

/* 表格列宽优化 */
.table th:nth-child(1),
.table td:nth-child(1) {
  /* 序列号 */
  width: 120px;
  min-width: 120px;
}

.table th:nth-child(2),
.table td:nth-child(2) {
  /* 任务内容 */
  width: 200px;
  min-width: 180px;
  max-width: 250px;
}

.table th:nth-child(3),
.table td:nth-child(3) {
  /* 开始时间 */
  width: 120px;
  min-width: 120px;
}

.table th:nth-child(4),
.table td:nth-child(4) {
  /* 计划完成时间 */
  width: 120px;
  min-width: 120px;
}

.table th:nth-child(5),
.table td:nth-child(5) {
  /* 实际完成时间 */
  width: 120px;
  min-width: 120px;
}

.table th:nth-child(6),
.table td:nth-child(6) {
  /* 工作内容总结 */
  width: 200px;
  min-width: 180px;
  max-width: 300px;
}

.table th:nth-child(7),
.table td:nth-child(7) {
  /* 工作成果展示 */
  width: 150px;
  min-width: 150px;
}

.table th:nth-child(8),
.table td:nth-child(8) {
  /* 状态 */
  width: 100px;
  min-width: 100px;
}

.table th:nth-child(9),
.table td:nth-child(9) {
  /* 操作 */
  width: 150px;
  min-width: 150px;
}

/* 任务状态样式优化 */
.task-status {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: var(--font-size-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

.task-status.pending {
  background: rgba(255, 149, 0, 0.1);
  color: var(--warning);
  border: 1px solid rgba(255, 149, 0, 0.2);
}

.task-status.in-progress {
  background: rgba(0, 113, 227, 0.1);
  color: var(--accent);
  border: 1px solid rgba(0, 113, 227, 0.2);
}

.task-status.completed {
  background: rgba(48, 209, 88, 0.1);
  color: var(--success);
  border: 1px solid rgba(48, 209, 88, 0.2);
}

.task-status.closed {
  background: rgba(142, 142, 147, 0.1);
  color: var(--text-secondary);
  border: 1px solid rgba(142, 142, 147, 0.2);
}

/* 表格操作按钮优化 */
.table .btn {
  padding: 6px 12px;
  font-size: var(--font-size-xs);
  margin: 2px;
  white-space: nowrap;
}

.table .btn.small {
  padding: 4px 8px;
  font-size: 11px;
}

/* 表格内容文本优化 */
.table td {
  line-height: 1.4;
}

.table .task-title {
  font-weight: 500;
  color: var(--text-primary);
  line-height: 1.3;
}

.table .task-title.overdue {
  color: var(--error);
  font-weight: 600;
}

.table .task-summary {
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  line-height: 1.4;
  max-height: 60px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.table .task-date {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  white-space: nowrap;
}

/* 移动端表格优化 */
@media (max-width: 768px) {
  .table-wrap {
    margin: 0 calc(-1 * var(--space-md));
    border-radius: 0;
    border-left: none;
    border-right: none;
  }

  .table {
    min-width: 800px;
    /* 减少最小宽度 */
  }

  .table th,
  .table td {
    padding: 12px 8px;
    font-size: var(--font-size-sm);
  }

  .table thead th {
    height: 48px;
    font-size: 11px;
  }

  /* 调整移动端列宽 */
  .table th:nth-child(1),
  .table td:nth-child(1) {
    width: 80px;
    min-width: 80px;
  }

  .table th:nth-child(2),
  .table td:nth-child(2) {
    width: 150px;
    min-width: 120px;
  }

  .table th:nth-child(3),
  .table td:nth-child(3) {
    width: 90px;
    min-width: 90px;
  }

  .table th:nth-child(4),
  .table td:nth-child(4) {
    width: 90px;
    min-width: 90px;
  }

  .table th:nth-child(5),
  .table td:nth-child(5) {
    width: 90px;
    min-width: 90px;
  }

  .table th:nth-child(6),
  .table td:nth-child(6) {
    width: 150px;
    min-width: 120px;
  }

  .table th:nth-child(7),
  .table td:nth-child(7) {
    width: 100px;
    min-width: 100px;
  }

  .table th:nth-child(8),
  .table td:nth-child(8) {
    width: 80px;
    min-width: 80px;
  }

  .table th:nth-child(9),
  .table td:nth-child(9) {
    width: 120px;
    min-width: 120px;
  }
}

@media (max-width: 480px) {
  .table {
    min-width: 700px;
    /* 进一步减少最小宽度 */
    font-size: 12px;
  }

  .table th,
  .table td {
    padding: 8px 6px;
  }

  .table thead th {
    height: 40px;
    font-size: 10px;
  }

  .task-status {
    padding: 4px 8px;
    font-size: 10px;
  }

  .table .btn {
    padding: 4px 6px;
    font-size: 10px;
  }
}

/* 布局组件 */
.layout-two {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
}

@media (min-width: 900px) {
  .layout-two {
    grid-template-columns: 1.2fr 0.8fr;
  }
}

.cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}

@media (min-width: 700px) {
  .cards {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  }
}

/* 任务卡片 */
.card.task {
  border-left: 4px solid var(--border);
  padding: var(--space-lg);
}

.card.task.incomplete {
  border-left-color: var(--warning);
  background: rgba(255, 149, 0, 0.05);
}

.card.task.completed {
  border-left-color: var(--success);
}

/* 状态标签 */
.pill {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: var(--font-size-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.pill.gray {
  background: var(--bg-secondary);
  color: var(--text-secondary);
}

.pill.blue {
  background: rgba(0, 113, 227, 0.1);
  color: var(--accent);
}

.pill.green {
  background: rgba(48, 209, 88, 0.1);
  color: var(--success);
}

.pill.orange {
  background: rgba(255, 149, 0, 0.1);
  color: var(--warning);
}

.pill.red {
  background: rgba(255, 59, 48, 0.1);
  color: var(--error);
}

/* 操作按钮组 */
.actions {
  display: flex;
  gap: var(--space-sm);
  align-items: center;
  margin: var(--space-md) 0;
  flex-wrap: wrap;
}

/* 双周计划布局 */
.week-overview {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl);
  margin: var(--space-lg) 0;
}

.week-section {
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-light);
}

.week-section h2 {
  margin: 0 0 var(--space-md) 0;
  color: var(--text-primary);
  font-size: var(--font-size-xl);
}

.week-info {
  margin-bottom: var(--space-md);
}

.week-label {
  display: inline-block;
  padding: var(--space-xs) var(--space-sm);
  background: var(--bg-secondary);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  font-weight: 500;
}

/* 计划控制区域 */
.plan-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-lg);
  padding: var(--space-md);
  background: var(--surface);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-light);
}

/* 双周计划表格布局 */
.dual-week-layout {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  margin-bottom: var(--space-xl);
}

.week-plan-section {
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-light);
}

.week-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--border-light);
}

.week-header h2 {
  margin: 0;
  color: var(--text-primary);
  font-size: var(--font-size-lg);
}

/* 历史记录区域 */
.history-section {
  margin-top: var(--space-xl);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--border-light);
}

/* 周统计样式 */
.week-stats {
  display: flex;
  justify-content: space-around;
  margin-bottom: var(--space-lg);
  padding: var(--space-md);
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
}

.stat-item {
  text-align: center;
}

.stat-number {
  display: block;
  font-size: var(--font-size-2xl);
  font-weight: 600;
  color: var(--accent);
  margin-bottom: var(--space-xs);
}

.stat-label {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  font-weight: 500;
}

/* 任务列表样式 */
.task-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.task-item {
  padding: var(--space-sm) var(--space-md);
  background: var(--bg-secondary);
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--border);
  transition: all 0.2s ease;
}

.task-item:hover {
  background: var(--surface);
  border-left-color: var(--accent);
  transform: translateX(2px);
}

.task-item .task-title {
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: var(--space-xs);
  line-height: 1.3;
}

.task-item .task-title.overdue {
  color: var(--error);
}

.task-meta {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--font-size-sm);
}

.task-date {
  color: var(--text-secondary);
  font-size: var(--font-size-xs);
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .week-overview {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }

  .week-section,
  .week-plan-section {
    margin-bottom: var(--space-lg);
  }

  .plan-controls {
    flex-direction: column;
    gap: var(--space-md);
    align-items: stretch;
  }

  .week-stats {
    flex-direction: column;
    gap: var(--space-sm);
  }

  .stat-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: left;
  }

  .stat-number {
    font-size: var(--font-size-lg);
    margin-bottom: 0;
  }
}

/* 过滤器 */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  align-items: center;
  margin: var(--space-lg) 0;
  padding: var(--space-lg);
  background: var(--surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-light);
}

/* 对话框 */
dialog {
  border: none;
  border-radius: var(--radius-lg);
  padding: 0;
  box-shadow: var(--shadow-lg);
  max-width: 90vw;
  max-height: 90vh;
}

dialog::backdrop {
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(4px);
}

dialog form {
  padding: var(--space-xl);
  min-width: 400px;
}

dialog form h3 {
  margin-bottom: var(--space-lg);
}

dialog form .actions {
  margin-top: var(--space-xl);
  justify-content: flex-end;
}

/* 登录界面 */
#login-view {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: var(--space-xl);
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
}

#login-view .card {
  width: 100%;
  max-width: 400px;
  box-shadow: var(--shadow-lg);
  border: none;
  padding: var(--space-3xl) var(--space-xl);
}

#login-view h2 {
  font-size: var(--font-size-3xl);
  font-weight: 600;
  margin-bottom: var(--space-xl);
  text-align: center;
  letter-spacing: -0.022em;
}

#login-form .btn.primary {
  width: 100%;
  margin-top: var(--space-lg);
  padding: 16px 0;
  font-size: var(--font-size-lg);
  font-weight: 600;
}

#login-view .hint {
  text-align: center;
  margin-top: var(--space-lg);
  font-size: var(--font-size-sm);
  color: var(--text-tertiary);
  line-height: 1.5;
}

/* 工具提示 */
.hint {
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
}

.muted {
  color: var(--text-secondary);
}

.danger {
  color: var(--error);
}

/* 折叠内容 */
.fold details {
  margin-top: var(--space-md);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  background: var(--surface);
}

.fold summary {
  cursor: pointer;
  font-weight: 500;
  padding: var(--space-sm);
  margin: calc(-1 * var(--space-sm));
  border-radius: var(--radius-sm);
}

.fold summary:hover {
  background: var(--bg-secondary);
}

/* 历史记录样式 */
.history-week {
  margin-bottom: var(--space-md);
}

.history-summary {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  padding: var(--space-sm) var(--space-md);
  background: var(--bg-secondary);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-light);
}

.history-summary:hover {
  background: var(--bg-tertiary);
}

.history-tasks {
  margin-top: var(--space-sm);
  padding: var(--space-sm);
}

/* 历史记录表格样式 */
.history-tasks .table {
  margin-bottom: 0;
  font-size: var(--font-size-sm);
}

.history-tasks .table th {
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--text-secondary);
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-light);
}

.history-tasks .table td {
  padding: var(--space-xs) var(--space-sm);
  vertical-align: middle;
}

.history-tasks .table tbody tr:hover {
  background: var(--bg-secondary);
}

/* 保留原有的历史任务样式作为备用 */
.history-task {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-xs) var(--space-sm);
  margin-bottom: var(--space-xs);
  background: var(--surface);
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--border-light);
}

.history-task:hover {
  background: var(--bg-secondary);
}

.history-task .task-title {
  flex: 1;
  font-weight: 500;
  color: var(--text-primary);
}

.history-task .task-status {
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  font-weight: 500;
}

.history-task .task-status.status-已关闭 {
  background: var(--success-bg);
  color: var(--success);
}

.history-task .task-status.status-进行中 {
  background: var(--warning-bg);
  color: var(--warning);
}

.history-task .task-status.status-未开始 {
  background: var(--bg-tertiary);
  color: var(--text-secondary);
}

.history-task .task-dates {
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  white-space: nowrap;
}

/* 文件预览 */
.file-preview {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-md);
}

.file-preview .file-list {
  list-style: none;
}

.file-preview .file-list li {
  margin: var(--space-xs) 0;
  padding: var(--space-sm);
  background: var(--bg-secondary);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .app-header {
    padding: var(--space-md);
  }

  .tabs {
    padding: var(--space-md);
  }

  .view {
    padding: var(--space-md);
  }

  .card {
    padding: var(--space-lg);
  }

  .table th,
  .table td {
    padding: 12px 16px;
  }

  .actions {
    flex-direction: column;
    align-items: stretch;
  }

  .btn {
    width: 100%;
    justify-content: center;
  }

  dialog form {
    min-width: auto;
    width: 100%;
  }

  #login-view {
    padding: var(--space-md);
  }

  #login-view .card {
    padding: var(--space-xl) var(--space-lg);
  }
}

@media (max-width: 480px) {
  .app-header h1 {
    font-size: var(--font-size-lg);
  }

  .card h2 {
    font-size: var(--font-size-xl);
  }

  .table {
    font-size: var(--font-size-sm);
  }

  .table th,
  .table td {
    padding: 8px 12px;
  }
}

/* 动画效果 */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.card {
  animation: fadeIn 0.3s ease-out;
}

/* 导出功能样式 */
.export-section {
  margin-top: var(--space-lg);
  padding: var(--space-lg);
  background: var(--surface);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-light);
}

/* 操作日志样式 */
.log-header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-xs);
  flex-wrap: wrap;
}

.log-details {
  margin: var(--space-xs) 0;
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
}

.pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: var(--font-size-xs);
  font-weight: 500;
  color: white;
}

.pill.blue {
  background-color: #007AFF;
  color: white;
}

.pill.green {
  background-color: #34C759;
  color: white;
}

.pill.orange {
  background-color: #FF9500;
  color: white;
}

.pill.red {
  background-color: #FF3B30;
  color: white;
}

.pill.purple {
  background-color: #AF52DE;
  color: white;
}

.pill.cyan {
  background-color: #5AC8FA;
  color: white;
}

.pill.yellow {
  background-color: #FFCC00;
  color: #1d1d1f;
}

.pill.gray {
  background-color: #8E8E93;
  color: white;
}

/* 滚动条样式 */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--bg-secondary);
}

::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--text-tertiary);
}

/* --- Desktop Responsiveness Fix --- */
@media (max-width: 1400px) {
  .dual-week-layout {
    flex-direction: column;
    /* Stack weeks if screen is narrow */
  }

  .table-wrap {
    overflow-x: auto;
    /* Enable horizontal scroll */
    max-width: 100%;
    display: block;
    white-space: nowrap;
    /* Prevent awkward wrapping inside cells */
  }

  .table th,
  .table td {
    min-width: 120px;
    /* Ensure columns have minimum width */
    white-space: normal;
    /* Allow text wrapping inside fixed width */
  }

  .table th:nth-child(2),
  .table td:nth-child(2) {
    min-width: 200px;
    /* Wider task title */
  }
}

/* --- Mobile Responsive Layout --- */
@media (max-width: 768px) {
  body {
    flex-direction: column;
    /* Stack vertically */
  }

  /* Sidebar becomes Bottom Navigation */
  .app-sidebar {
    width: 100%;
    height: 60px;
    /* Slim bottom bar */
    order: 2;
    /* Move to bottom */
    flex-direction: row;
    padding: 0;
    border-top: 1px solid var(--neon-primary);
    /* Tech Accent */
    border-right: none;
    background: rgba(10, 10, 20, 0.95);
    justify-content: space-around;
    align-items: center;
    box-shadow: 0 -4px 20px rgba(0, 240, 255, 0.15);
    position: fixed;
    bottom: 0;
    z-index: 9999;
  }

  /* Hide unused elements for mobile nav */
  .app-sidebar h1 {
    display: none;
  }

  .user-panel {
    display: none;
  }

  .nav-group {
    flex-direction: row;
    gap: 0;
    width: 100%;
    justify-content: space-around;
  }

  .nav-item {
    flex-direction: column;
    justify-content: center;
    text-align: center;
    font-size: 10px;
    padding: 8px 4px;
    height: 60px;
    /* Full height touch target */
    color: var(--text-secondary);
    border: none;
    border-radius: 0;
    background: transparent !important;
  }

  .nav-item.active {
    color: var(--neon-primary);
    text-shadow: 0 0 8px var(--neon-primary);
    box-shadow: none;
    border-top: 2px solid var(--neon-primary);
  }

  /* Main Content Adjustments */
  .app-main {
    order: 1;
    /* Move to top */
    height: calc(100vh - 60px);
    /* Leave space for bottom bar */
    border-radius: 0;
  }

  .scroll-content {
    padding: 16px;
    padding-bottom: 80px;
    /* Extra padding for bottom scroller */
  }

  /* Card List View for Tables */
  .table-wrap {
    background: transparent;
    border: none;
    overflow: visible;
  }

  .table thead {
    display: none;
  }

  /* Hide headers */
  .table tbody,
  .table tr,
  .table td {
    display: block;
    width: 100%;
  }

  .table tr {
    background: var(--tech-bg-card);
    /* Card-like rows */
    margin-bottom: 16px;
    border: 1px solid rgba(0, 240, 255, 0.1);
    border-radius: var(--radius-l);
    padding: 16px;
    box-shadow: var(--shadow-deep);
    position: relative;
  }

  .table td {
    padding: 8px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    text-align: right;
    /* Values align right */
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .table td::before {
    content: attr(data-label);
    /* Pseudo-header */
    float: left;
    font-weight: 600;
    color: var(--text-secondary);
    font-size: 11px;
    text-transform: uppercase;
  }

  .table td:last-child {
    border-bottom: none;
  }

  /* Mobile Modals */
  dialog {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    border-radius: 0;
    border: none;
    transform: none;
    /* Reset centering transform if any */
  }

  /* Stats Stack */
  .week-stats {
    flex-direction: column;
    gap: 12px;
  }
}

/* --- 5S Specific High-Tech Styles --- */
.issue-feed {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.issue-card-tech {
  background: var(--tech-bg-surface);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-xl);
  padding: 0;
  /* Flush content */
  overflow: hidden;
  /* Neon Status Indicator Stripe */
  border-left: 4px solid var(--neon-warning);
  position: relative;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.issue-card-tech.closed {
  border-left-color: var(--neon-success);
}

.issue-header {
  padding: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(255, 255, 255, 0.02);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.issue-content {
  padding: 16px;
}

.issue-photos {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 8px;
  margin-top: 12px;
}

.issue-photo-wrapper {
  position: relative;
  flex-shrink: 0;
}

.issue-thumb {
  width: 120px;
  height: 120px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.issue-footer {
  padding: 12px 16px;
  background: rgba(0, 0, 0, 0.2);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.fab {
  position: fixed;
  bottom: 80px;
  /* Above nav bar */
  right: 20px;
  width: 60px;
  height: 60px;
  border-radius: 30px;
  background: var(--neon-primary);
  color: #000;
  box-shadow: 0 0 20px rgba(0, 240, 255, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  font-weight: bold;
  border: none;
  z-index: 1000;
  transition: transform 0.2s;
}

.fab:active {
  transform: scale(0.9);
}

/* FORCE OVERRIDE FOR DIALOG INPUTS */
#task-dialog input,
#task-dialog textarea,
#task-dialog select {
  background-color: rgba(30, 30, 45, 0.9) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
}


/* FORCE OPTION VISIBILITY - Windows 下 option 由系统渲染，需强制浅色模式 */
select option {
  background-color: #ffffff !important;
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
}

/* 针对计划页的员工筛选下拉 - 白底黑字 */
.plan-controls select,
#plan-user-filter {
  color-scheme: light !important;           /* 强制浏览器用浅色模式渲染下拉 */
  background-color: #ffffff !important;
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
  border: 1px solid #d1d1d6 !important;
  min-width: 160px;
  cursor: pointer;
}

.plan-controls select option,
#plan-user-filter option {
  color-scheme: light !important;
  background-color: #ffffff !important;
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
  padding: 8px 12px;
}

/* ================= App shell: unified desktop/mobile experience ================= */
.mobile-tabbar,
.mobile-icon-btn,
.mobile-eyebrow,
.mobile-sheet-backdrop {
  display: none;
}

.factory-name {
  font-size: 10px;
  color: var(--text-secondary);
  padding-left: 12px;
  margin-bottom: 24px;
}

@media (max-width: 820px) {
  :root {
    --mobile-blue: #1677ff;
    --mobile-ink: #14213d;
    --mobile-muted: #68758c;
    --mobile-surface: #ffffff;
    --mobile-canvas: #f4f7fb;
    --mobile-line: #e7edf5;
  }

  html,
  body {
    width: 100%;
    min-height: 100%;
    overflow: hidden;
    background: var(--mobile-canvas) !important;
    color: var(--mobile-ink) !important;
    -webkit-tap-highlight-color: transparent;
  }

  #app-container {
    display: block !important;
    height: 100dvh !important;
  }

  .app-main {
    width: 100% !important;
    height: 100dvh !important;
    min-width: 0;
    border-radius: 0 !important;
    background: var(--mobile-canvas) !important;
  }

  .app-titlebar {
    position: sticky;
    top: 0;
    z-index: 60;
    height: auto !important;
    min-height: 76px;
    padding: calc(12px + env(safe-area-inset-top)) 18px 12px !important;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    background: rgba(255, 255, 255, 0.92) !important;
    border-bottom: 1px solid var(--mobile-line) !important;
    backdrop-filter: blur(22px) saturate(160%);
    -webkit-backdrop-filter: blur(22px) saturate(160%);
  }

  .title-stack {
    min-width: 0;
  }

  .mobile-eyebrow {
    display: block;
    margin-bottom: 3px;
    color: var(--mobile-blue);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
  }

  .app-titlebar h2 {
    margin: 0 !important;
    color: var(--mobile-ink) !important;
    background: none !important;
    -webkit-background-clip: border-box !important;
    -webkit-text-fill-color: var(--mobile-ink) !important;
    font-size: 22px !important;
    line-height: 1.2;
    letter-spacing: -0.02em;
  }

  .mobile-icon-btn {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border: 1px solid var(--mobile-line);
    border-radius: 14px;
    background: #fff;
    color: var(--mobile-ink);
    font-size: 18px;
    font-weight: 800;
    box-shadow: 0 6px 20px rgba(28, 57, 91, 0.08);
  }

  .scroll-content {
    height: calc(100dvh - 76px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
    padding: 16px 14px calc(104px + env(safe-area-inset-bottom)) !important;
    background: var(--mobile-canvas) !important;
  }

  .tab-panel,
  .week-overview,
  .dual-week-layout,
  .week-section,
  .week-plan-section,
  .table-wrap {
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .week-overview,
  .dual-week-layout,
  .layout-two,
  .cards,
  .plan-controls,
  .actions {
    grid-template-columns: 1fr !important;
    flex-direction: column;
  }

  .week-section,
  .week-plan-section,
  .card,
  .stats-card,
  .issue-card {
    background: var(--mobile-surface) !important;
    color: var(--mobile-ink) !important;
    border: 1px solid var(--mobile-line) !important;
    border-radius: 20px !important;
    box-shadow: 0 10px 30px rgba(28, 57, 91, 0.07) !important;
  }

  .week-section,
  .week-plan-section {
    padding: 16px !important;
    margin-bottom: 14px !important;
  }

  .card {
    padding: 16px !important;
  }

  h1, h2, h3, h4,
  .card strong,
  .week-section h2,
  .week-plan-section h2 {
    color: var(--mobile-ink) !important;
  }

  .hint,
  .week-label,
  .user-info,
  .card p {
    color: var(--mobile-muted) !important;
  }

  input,
  select,
  textarea,
  button {
    font-size: 16px;
  }

  input,
  select,
  textarea {
    width: 100%;
    min-height: 48px;
    border-radius: 13px !important;
    border: 1px solid #dbe4ef !important;
    background: #fff !important;
    color: var(--mobile-ink) !important;
    -webkit-text-fill-color: var(--mobile-ink) !important;
  }

  .btn {
    min-height: 44px;
    border-radius: 13px !important;
    padding: 11px 15px !important;
    font-weight: 700;
  }

  .btn.primary {
    background: linear-gradient(135deg, #1677ff, #435cff) !important;
    color: #fff !important;
    border: none !important;
    box-shadow: 0 8px 18px rgba(22, 119, 255, 0.22);
  }

  .table-wrap {
    overflow: visible !important;
    background: transparent !important;
  }

  .table {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .table thead {
    display: none !important;
  }

  .table tbody,
  .table tr,
  .table td {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    box-sizing: border-box;
  }

  .table tr {
    background: #fff !important;
    border: 1px solid var(--mobile-line) !important;
    border-radius: 18px !important;
    padding: 14px !important;
    margin-bottom: 12px !important;
    box-shadow: 0 8px 24px rgba(28, 57, 91, 0.06) !important;
  }

  .table td {
    display: flex !important;
    justify-content: space-between;
    gap: 14px;
    text-align: right !important;
    color: var(--mobile-ink) !important;
    border-color: var(--mobile-line) !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
  }

  .table td::before {
    flex: 0 0 auto;
    color: var(--mobile-muted) !important;
    font-size: 12px;
    font-weight: 700;
    text-align: left;
  }

  dialog[open] {
    position: fixed !important;
    inset: auto 0 0 0 !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    max-height: 92dvh !important;
    margin: 0 !important;
    padding: 22px 18px calc(22px + env(safe-area-inset-bottom)) !important;
    border-radius: 26px 26px 0 0 !important;
    overflow-y: auto;
    background: #fff !important;
    color: var(--mobile-ink) !important;
    transform: none !important;
  }

  dialog::backdrop {
    background: rgba(18, 29, 48, 0.48) !important;
    backdrop-filter: blur(4px);
  }

  .mobile-tabbar {
    position: fixed;
    left: 10px;
    right: 10px;
    bottom: calc(8px + env(safe-area-inset-bottom));
    z-index: 90;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    padding: 7px;
    border: 1px solid rgba(218, 228, 240, 0.9);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 14px 40px rgba(23, 47, 78, 0.18);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
  }

  .mobile-tabbar button {
    min-height: 54px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    border: 0;
    border-radius: 17px;
    background: transparent;
    color: #7d899c;
    font-size: 11px;
    font-weight: 650;
  }

  .mobile-tabbar button.active {
    color: var(--mobile-blue);
    background: #edf5ff;
  }

  .mobile-tabbar .tab-icon {
    font-size: 21px;
    line-height: 1;
  }

  .app-sidebar {
    display: none !important;
    position: fixed !important;
    left: 12px !important;
    right: 12px !important;
    bottom: calc(80px + env(safe-area-inset-bottom)) !important;
    top: auto !important;
    z-index: 120 !important;
    width: auto !important;
    height: auto !important;
    max-height: 72dvh;
    padding: 20px !important;
    flex-direction: column !important;
    overflow-y: auto;
    border: 1px solid var(--mobile-line) !important;
    border-radius: 26px !important;
    background: rgba(255, 255, 255, 0.98) !important;
    box-shadow: 0 22px 70px rgba(15, 33, 58, 0.24) !important;
  }

  .app-sidebar.mobile-open {
    display: flex !important;
    animation: mobileSheetIn 180ms ease-out;
  }

  .app-sidebar h1 {
    display: block !important;
    margin: 0 0 4px !important;
    color: var(--mobile-ink) !important;
  }

  .factory-name {
    display: block !important;
    padding: 0 !important;
    margin: 0 0 16px !important;
    color: var(--mobile-muted) !important;
    font-size: 12px !important;
  }

  .app-sidebar .nav-group {
    width: 100%;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px !important;
  }

  .app-sidebar .nav-item {
    width: 100%;
    height: auto !important;
    min-height: 48px;
    display: flex !important;
    align-items: center;
    justify-content: flex-start;
    padding: 12px !important;
    border: 1px solid var(--mobile-line) !important;
    border-radius: 14px !important;
    background: #f7f9fc !important;
    color: var(--mobile-ink) !important;
    text-align: left;
    font-size: 13px !important;
  }

  .app-sidebar .nav-item.active {
    color: var(--mobile-blue) !important;
    border-color: #bcd8ff !important;
    background: #edf5ff !important;
    text-shadow: none !important;
  }

  .app-sidebar .nav-item.hidden {
    display: none !important;
  }

  .app-sidebar > div[style*="border-top"] {
    display: none !important;
  }

  .mobile-sheet-backdrop {
    position: fixed;
    inset: 0;
    z-index: 110;
    background: rgba(18, 29, 48, 0.34);
    opacity: 0;
    pointer-events: none;
    transition: opacity 160ms ease;
  }

  .mobile-sheet-backdrop.visible {
    display: block;
    opacity: 1;
    pointer-events: auto;
  }

  .login-container {
    min-height: 100dvh !important;
    height: 100dvh !important;
    padding: calc(28px + env(safe-area-inset-top)) 24px calc(28px + env(safe-area-inset-bottom));
    background:
      radial-gradient(circle at 15% 10%, rgba(22, 119, 255, 0.14), transparent 34%),
      radial-gradient(circle at 85% 20%, rgba(77, 209, 177, 0.13), transparent 30%),
      #f7f9fc !important;
  }

  .login-logo {
    width: 72px !important;
    height: 72px !important;
    border-radius: 22px !important;
    box-shadow: 0 16px 34px rgba(22, 119, 255, 0.25) !important;
  }

  #login-form {
    max-width: 390px !important;
    padding: 20px;
    border: 1px solid var(--mobile-line);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 18px 50px rgba(28, 57, 91, 0.11);
  }

  @keyframes mobileSheetIn {
    from { opacity: 0; transform: translateY(18px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
  }
}