/* TaskFlow CSS Bundle */

/* === css/variables.css === */
:root {
    --brand-primary: #0052cc;
    --brand-primary-hover: #0065ff;
    --brand-primary-light: #deebff;
    --brand-primary-bg: #e6f0ff;

    --gray-0: #ffffff;
    --gray-50: #f4f5f7;
    --gray-100: #ebecf0;
    --gray-200: #dfe1e6;
    --gray-300: #c1c7d0;
    --gray-400: #b3bac5;
    --gray-500: #7a869a;
    --gray-600: #5e6c84;
    --gray-700: #44546f;
    --gray-800: #2c3e5d;
    --gray-900: #172b4d;

    --status-todo: #c1c7d0;
    --status-progress: #0052cc;
    --status-done: #00875a;
    --status-overdue: #de350b;

    /* 语义状态色 */
    --color-success: #22c55e;
    --color-success-light: #dcfce7;
    --color-success-bg: #f0fdf4;
    --color-info: #3b82f6;
    --color-info-light: #dbeafe;
    --color-info-bg: #eff6ff;
    --color-warning: #eab308;
    --color-warning-light: #fef3c7;
    --color-warning-bg: #fffbeb;
    --color-error: #ef4444;
    --color-error-light: #fee2e2;
    --color-error-bg: #fef2f2;
    --color-orange: #f97316;
    --color-orange-light: #fff7ed;

    /* SOP 操作色 */
    --sop-start: #0052cc;
    --sop-start-hover: #0065ff;
    --sop-complete: #00875a;
    --sop-complete-hover: #00a86b;
    --sop-record: #f97316;
    --sop-record-hover: #ea580c;
    --sop-block: #de350b;
    --sop-block-light: #fee2e2;

    /* 登录渐变 */
    --login-gradient-start: #667eea;
    --login-gradient-end: #764ba2;

    --surface: #ffffff;
    --surface-raised: #ffffff;
    --surface-hover: #f4f5f7;
    --surface-secondary: #f4f5f7;

    --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Noto Sans', sans-serif;
    --font-xs: 13px;
    --font-sm: 13px;
    --font-base: 15px;
    --font-md: 17px;
    --font-lg: 22px;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;

    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 12px;
    --spacing-lg: 16px;
    --spacing-xl: 24px;
    --spacing-2xl: 32px;
    --spacing-3xl: 48px;

    --shadow-sm: 0 1px 1px rgba(9,30,66,0.13);
    --shadow-md: 0 4px 8px -2px rgba(9,30,66,0.13);
    --shadow-lg: 0 8px 16px -4px rgba(9,30,66,0.13);

    --border-color: #dfe1e6;
    --radius-sm: 3px;
    --radius-md: 6px;
    --radius-lg: 8px;
    --radius-xl: 12px;
    --radius-full: 50%;

    --navbar-height: 56px;
    --sidebar-width: 300px;
    --detail-panel-width: 420px;
    --gantt-row-height: 44px;
    --gantt-header-height: 56px;
}

/* === css/base.css === */
* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
    height: 100%;
}

body {
    font-family: var(--font);
    font-size: var(--font-base);
    color: var(--gray-800);
    background: var(--surface-secondary);
    min-height: 100vh;
    overflow: hidden;
}

h1, h2, h3, h4, h5, h6 { font-weight: var(--font-weight-semibold); }

#main-content {
    margin-top: var(--navbar-height);
    height: calc(100vh - var(--navbar-height));
    overflow: hidden;
}

#modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(9,30,66,0.54);
    z-index: 1000;
    align-items: center;
    justify-content: center;
}
#modal-overlay.show { display: flex; }

#toast-container {
    position: fixed;
    bottom: var(--spacing-lg);
    right: var(--spacing-lg);
    z-index: 9999;
    display: flex;
    flex-direction: column-reverse;
    gap: var(--spacing-sm);
    pointer-events: none;
}

/* Utility classes */
.hidden { display: none !important; }
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-xs { gap: var(--spacing-xs); }
.gap-sm { gap: var(--spacing-sm); }
.gap-md { gap: var(--spacing-md); }
.gap-lg { gap: var(--spacing-lg); }
.text-xs { font-size: var(--font-xs); }
.text-sm { font-size: var(--font-sm); }
.text-base { font-size: var(--font-base); }
.font-medium { font-weight: var(--font-weight-medium); }
.font-semibold { font-weight: var(--font-weight-semibold); }
.text-gray { color: var(--gray-600); }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Badges */
.badge {
    display: inline-flex;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: var(--font-xs);
    font-weight: var(--font-weight-semibold);
    line-height: 1.4;
}
.badge-todo, .badge-pending { background: var(--gray-100); color: var(--gray-600); }
.badge-info, .badge-progress { background: var(--brand-primary-light); color: var(--brand-primary); }
.badge-success, .badge-done { background: var(--color-success-light); color: var(--status-done); }
.badge-danger, .badge-overdue { background: var(--color-error-light); color: var(--status-overdue); }
.badge-warning { background: var(--color-warning-light); color: var(--color-warning); }

/* Progress bar */
.progress-bar {
    width: 100%;
    height: 6px;
    background: var(--gray-200);
    border-radius: 3px;
    overflow: hidden;
}
.progress-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.3s ease;
}

/* Buttons */
.btn {
    border: none;
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-sm);
    font-size: var(--font-sm);
    font-weight: var(--font-weight-semibold);
    font-family: var(--font);
    cursor: pointer;
    transition: all 0.15s;
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
}
.btn:hover { box-shadow: var(--shadow-sm); }

.btn-primary { background: var(--brand-primary); color: white; border: none; }
.btn-primary:hover { background: var(--brand-primary-hover); }

.btn-ghost { background: transparent; color: var(--brand-primary); border: 1px solid var(--brand-primary); }
.btn-ghost:hover { background: var(--brand-primary-light); }

.btn-danger { background: var(--status-overdue); color: white; border: none; }
.btn-secondary { background: var(--gray-200); color: var(--gray-800); border: none; }

.btn-sm { padding: 4px 12px; font-size: var(--font-xs); border-radius: var(--radius-sm); font-weight: var(--font-weight-semibold); font-family: var(--font); cursor: pointer; transition: all 0.15s; display: inline-flex; align-items: center; gap: var(--spacing-xs); }
.btn-sm:hover { box-shadow: var(--shadow-sm); }

/* Form elements */
input, select, textarea {
    padding: var(--spacing-sm) var(--spacing-md);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-sm);
    font-size: var(--font-base);
    font-family: var(--font);
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}
input:focus, select:focus, textarea:focus {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px var(--brand-primary-light);
}

/* Animations */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp { from { transform: translateY(10px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes slideRight { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

/* === css/navbar.css === */
#navbar{
  height: var(--navbar-height);
  background: var(--brand-primary);
  color: white;
  display: flex;
  align-items: center;
  padding: 0 var(--spacing-xl);
  box-shadow: var(--shadow-sm);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
}

.navbar-brand{
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  font-size: var(--font-lg);
  font-weight: var(--font-weight-semibold);
  margin-right: var(--spacing-xl);
  white-space: nowrap;
}
.navbar-brand svg{
  width: 28px;
  height: 28px;
}

.navbar-nav{
  display: flex;
  align-items: center;
  gap: 2px;
  height: 100%;
}
.nav-tab{
  background: transparent;
  border: none;
  color: rgba(255,255,255,0.7);
  padding: var(--spacing-sm) var(--spacing-lg);
  font-size: var(--font-sm);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  height: 100%;
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  border-bottom: 2px solid transparent;
  transition: all 0.15s;
}
.nav-tab:hover{ color: rgba(255,255,255,0.85); }
.nav-tab.active{
  color: white;
  border-bottom-color: white;
  background: rgba(255,255,255,0.1);
}

.navbar-right{
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  margin-left: auto;
}

.navbar-search{
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.2);
  color: white;
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--radius-md);
  font-size: var(--font-sm);
  width: 200px;
  outline: none;
}
.navbar-search::placeholder{ color: rgba(255,255,255,0.6); }
.navbar-search:focus{ background: rgba(255,255,255,0.25); border-color: rgba(255,255,255,0.4); }

.navbar-btn-new{
  background: white;
  color: var(--brand-primary);
  border: none;
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--radius-md);
  font-size: var(--font-sm);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  transition: all 0.15s;
}
.navbar-btn-new:hover{
  background: rgba(255,255,255,0.9);
  box-shadow: var(--shadow-sm);
}
.navbar-btn-daily{
  background: transparent;
  color: white;
  border: 1px solid rgba(255,255,255,0.5);
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--radius-md);
  font-size: var(--font-sm);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  transition: all 0.15s;
}
.navbar-btn-daily:hover{
  background: rgba(255,255,255,0.15);
  border-color: rgba(255,255,255,0.8);
}
.navbar-btn-daily:disabled{
  opacity: 0.5;
  cursor: not-allowed;
}

/* === css/gantt.css === */
.gantt-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--surface);
  border-top: 1px solid var(--border-color);
}

.gantt-left-panel {
  width: var(--sidebar-width);
  flex-shrink: 0;
  border-right: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  background: var(--surface);
}

.gantt-left-header {
  height: var(--gantt-header-height);
  display: flex;
  align-items: center;
  background: var(--surface-raised);
  border-bottom: 1px solid var(--border-color);
  font-size: 15px;
  font-weight: var(--font-weight-semibold);
  color: var(--gray-600);
  flex-shrink: 0;
  z-index: 5;
}

.gantt-left-header-cell {
  padding: 0 var(--spacing-sm);
  font-weight: var(--font-weight-semibold);
}

.gantt-left-body{
  flex: 1;
  overflow-y: auto;
}

/* ===== Left panel rows ===== */

.gantt-left-row {
  display: flex;
  align-items: center;
  padding: 0 8px;
  border-bottom: 1px solid var(--gray-100);
  cursor: pointer;
  transition: background 0.15s;
  gap: 6px;
  min-width: 0;
}
.gantt-left-row:hover { background: var(--surface-hover); }

.gantt-left-row.task-row {
  font-size: 15px;
  font-weight: 500;
}

.gantt-left-row.subtask-row {
  font-size: 14px;
  color: var(--gray-600);
  padding-left: 24px;
}

.row-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.subtask-row .row-name::before {
  content: '└ ';
  color: var(--gray-400);
  font-size: 11px;
}

.expand-toggle {
  cursor: pointer;
  margin-right: 4px;
  font-size: 12px;
  user-select: none;
  transition: transform 0.2s;
  flex-shrink: 0;
  width: 14px;
  text-align: center;
}
.expand-toggle:hover { opacity: 0.7; }

/* ===== Progress bar in left panel ===== */

.row-progress-wrap {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  width: 90px;
}

.row-progress-wrap .mini-progress {
  flex: 1;
  display: block;
  height: 6px;
  background: var(--gray-200);
  border-radius: 3px;
  overflow: hidden;
  min-width: 30px;
}

.row-progress-wrap .mini-progress-fill {
  display: block;
  height: 100%;
  border-radius: 3px;
  transition: width 0.3s;
}

.row-progress-text {
  font-size: 11px;
  color: var(--gray-500);
  min-width: 30px;
  text-align: right;
  flex-shrink: 0;
}

/* ===== Timeline ===== */

.gantt-timeline-wrap{
  flex: 1;
  overflow: auto;
  position: relative;
}

.gantt-timeline-wrap svg{
  display: block;
}

.gantt-timeline .bar-group{
  cursor: pointer;
}
.gantt-timeline .bar-group:hover rect:first-child{
  filter: brightness(0.95);
}

.gantt-timeline .bar-progress-fill{
  transition: all 0.3s ease;
}

.gantt-timeline .bar-resize-handle{
  fill: transparent;
  cursor: col-resize;
}
.gantt-timeline .bar-resize-handle:hover{
  fill: var(--brand-primary);
  opacity: 0.3;
}

/* Drag state */
.bar-group.dragging {
  opacity: 0.85;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.25));
}


/* === css/kanban.css === */
.kanban-board{
  display: flex;
  gap: var(--spacing-md);
  padding: var(--spacing-md);
  height: 100%;
  overflow-x: auto;
}

.kanban-column{
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-md);
  background: var(--surface-secondary);
}

.kanban-column-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-md);
  border-bottom: 2px solid var(--border-color);
  position: sticky;
  top: 0;
  z-index: 5;
}
.kanban-column-title{
  font-size: var(--font-md);
  font-weight: var(--font-weight-semibold);
  color: var(--gray-800);
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}
.kanban-column-count{
  background: var(--gray-200);
  color: var(--gray-700);
  padding: 2px 8px;
  border-radius: 10px;
  font-size: var(--font-xs);
  font-weight: var(--font-weight-semibold);
}

.kanban-column-body{
  flex: 1;
  overflow-y: auto;
  padding: var(--spacing-sm);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.kanban-card{
  background: var(--surface);
  border-radius: var(--radius-md);
  padding: var(--spacing-md);
  cursor: grab;
  border-left: 3px solid var(--gray-300);
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.15s, transform 0.15s;
}
.kanban-card:hover{
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}
.kanban-card.dragging{
  opacity: 0.5;
  transform: rotate(3deg);
}
.kanban-card.card-pending{ border-left-color: var(--gray-400); }
.kanban-card.card-in_progress{ border-left-color: var(--status-progress); }
.kanban-card.card-completed{ border-left-color: var(--status-done); }
.kanban-card.card-overdue{ border-left-color: var(--status-overdue); }

.kanban-card-title{
  font-size: var(--font-base);
  font-weight: var(--font-weight-semibold);
  color: var(--gray-800);
  margin-bottom: var(--spacing-sm);
  line-height: 1.4;
}
.kanban-card-meta{
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  font-size: var(--font-xs);
  color: var(--gray-600);
  margin-bottom: var(--spacing-sm);
}
.kanban-card-meta .avatar-xs{
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--brand-primary);
  color: white;
  font-size: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.kanban-card-progress{
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}
.kanban-card-progress .progress-bar{
  flex: 1;
  height: 4px;
  background: var(--gray-200);
  border-radius: 2px;
  overflow: hidden;
}
.kanban-card-progress .progress-fill{
  height: 100%;
  border-radius: 2px;
}
.kanban-card-progress .progress-text{
  font-size: var(--font-xs);
  color: var(--gray-500);
  min-width: 32px;
}

.kanban-drop-indicator{
  border: 2px dashed var(--brand-primary);
  background: var(--brand-primary-light);
  border-radius: var(--radius-md);
  min-height: 60px;
  margin: var(--spacing-sm);
}

/* Subtask group styling */
.kanban-subtask-group {
  margin: -4px 4px 4px 4px;
  padding: 0 0 0 12px;
  border-left: 2px solid var(--gray-200);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.kanban-subtask-card {
  padding: 8px 10px;
  background: var(--surface-secondary);
  border-left-width: 2px;
  border-radius: var(--radius-sm);
  box-shadow: none;
}
.kanban-subtask-card:hover {
  box-shadow: var(--shadow-sm);
}

.kanban-expand-btn:hover {
  color: var(--brand-primary) !important;
}


/* === css/listview.css === */
.list-container{
  height: 100%;
  overflow: auto;
  background: var(--surface);
}

.list-table{
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-sm);
}

.list-table thead{
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--surface-raised);
}
.list-table th{
  padding: var(--spacing-sm) var(--spacing-md);
  text-align: left;
  font-weight: var(--font-weight-semibold);
  color: var(--gray-600);
  border-bottom: 2px solid var(--border-color);
  white-space: nowrap;
  user-select: none;
}
.list-table th.sortable{
  cursor: pointer;
}
.list-table th.sortable:hover{
  background: var(--surface-hover);
}
.list-table th .sort-icon{
  margin-left: var(--spacing-xs);
  color: var(--gray-400);
  font-size: 10px;
}

.list-table td{
  padding: var(--spacing-sm) var(--spacing-md);
  border-bottom: 1px solid var(--gray-100);
  vertical-align: middle;
}
.list-table tr:hover td{
  background: var(--surface-hover);
}
.list-table tr.task-row{
  cursor: pointer;
}
.list-table tr.task-row:hover{
  background: var(--surface-hover);
}
.list-table tr.selected td{
  background: var(--brand-primary-light);
}
.list-table tr.subtask-row td{
  background: var(--surface-secondary);
}
.list-table tr.subtask-row td:first-child{
  padding-left: var(--spacing-xl);
}
.list-table .inline-edit{
  padding: 2px 4px;
  border: 1px solid var(--brand-primary);
  border-radius: var(--radius-sm);
  font-size: var(--font-sm);
  outline: none;
  width: 100%;
}
.list-table .expand-btn{
  cursor: pointer;
  color: var(--gray-400);
  transition: color 0.15s;
  display: inline-flex;
  align-items: center;
  margin-right: var(--spacing-sm);
}
.list-table .expand-btn:hover{ color: var(--gray-800); }

.list-status-badge{
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: var(--font-weight-semibold);
}
.list-status-badge.s-pending{ background: var(--gray-100); color: var(--gray-600); }
.list-status-badge.s-in_progress{ background: var(--brand-primary-light); color: var(--brand-primary); }
.list-status-badge.s-completed{ background: var(--color-success-light); color: var(--status-done); }
.list-status-badge.s-overdue{ background: var(--color-error-light); color: var(--status-overdue); }

.list-empty{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  color: var(--gray-400);
}
.list-empty .empty-icon{
  font-size: 48px;
  margin-bottom: var(--spacing-md);
  opacity: 0.4;
}

/* === css/modal.css === */
.modal-overlay{
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(9,30,66,0.54);
  z-index: 1000;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.15s;
}
.modal-overlay.show{ display: flex; }
@keyframes fadeIn{ from{ opacity: 0; } to{ opacity: 1; } }

.modal-card{
  background: var(--surface);
  border-radius: var(--radius-lg);
  width: 90%;
  max-width: 520px;
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: var(--shadow-lg);
  animation: slideUp 0.2s ease-out;
}
.modal-card-wide{
  max-width: 680px;
}
@keyframes slideUp{ from{ transform: translateY(20px); opacity: 0; } to{ transform: translateY(0); opacity: 1; } }

.modal-header{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-lg) var(--spacing-xl);
  border-bottom: 1px solid var(--border-color);
}
.modal-header h3{
  font-size: var(--font-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--gray-900);
}
.modal-close{
  background: none;
  border: none;
  color: var(--gray-500);
  font-size: 20px;
  cursor: pointer;
  padding: var(--spacing-xs);
  border-radius: var(--radius-sm);
  line-height: 1;
}
.modal-close:hover{ background: var(--surface-hover); color: var(--gray-800); }

.modal-body{ padding: var(--spacing-xl); }

.modal-footer{
  display: flex;
  justify-content: flex-end;
  gap: var(--spacing-sm);
  padding: var(--spacing-md) var(--spacing-xl);
  border-top: 1px solid var(--border-color);
}

.form-group{
  margin-bottom: var(--spacing-lg);
}
.form-group label{
  display: block;
  font-size: var(--font-sm);
  font-weight: var(--font-weight-medium);
  color: var(--gray-700);
  margin-bottom: var(--spacing-xs);
}
.form-group input,
.form-group select,
.form-group textarea{
  width: 100%;
  padding: var(--spacing-sm) var(--spacing-md);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
  font-size: var(--font-base);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px var(--brand-primary-light);
}
.form-row{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-md);
}

/* === css/toast.css === */
.toast-container{
  position: fixed;
  bottom: var(--spacing-lg);
  right: var(--spacing-lg);
  z-index: 9999;
  display: flex;
  flex-direction: column-reverse;
  gap: var(--spacing-sm);
  pointer-events: none;
}

.toast{
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-md) var(--spacing-lg);
  background: var(--surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  font-size: var(--font-sm);
  color: var(--gray-800);
  border-left: 3px solid var(--brand-primary);
  min-width: 280px;
  max-width: 420px;
  animation: toastIn 0.3s ease-out;
}
@keyframes toastIn{
  from{ transform: translateX(100%); opacity: 0; }
  to{ transform: translateX(0); opacity: 1; }
}
.toast.hiding{
  animation: toastOut 0.25s ease-in forwards;
}
@keyframes toastOut{
  to{ transform: translateX(100%); opacity: 0; }
}

.toast.toast-success{ border-left-color: var(--status-done); }
.toast.toast-error{ border-left-color: var(--status-overdue); }
.toast.toast-warning{ border-left-color: var(--color-warning); }
.toast.toast-info{ border-left-color: var(--brand-primary); }

.toast-icon{ flex-shrink: 0; font-size: 16px; }
.toast-success .toast-icon{ color: var(--status-done); }
.toast-error .toast-icon{ color: var(--status-overdue); }
.toast-warning .toast-icon{ color: var(--color-warning); }
.toast-info .toast-icon{ color: var(--brand-primary); }

.toast-close{
  margin-left: auto;
  background: none;
  border: none;
  color: var(--gray-400);
  cursor: pointer;
  padding: 0 var(--spacing-xs);
  font-size: 16px;
}
.toast-close:hover{ color: var(--gray-700); }

/* === css/detail-panel.css === */
#detail-panel{
  position: fixed;
  top: 0;
  right: 0;
  width: var(--detail-panel-width);
  height: 100%;
  background: var(--surface);
  box-shadow: -4px 0 16px rgba(9,30,66,0.13);
  z-index: 200;
  transform: translateX(100%);
  transition: transform 0.25s ease;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
#detail-panel.open{
  transform: translateX(0);
}

.detail-panel-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-md) var(--spacing-lg);
  border-bottom: 1px solid var(--border-color);
  flex-shrink: 0;
}
.detail-panel-header h3{
  font-size: var(--font-md);
  font-weight: var(--font-weight-semibold);
  color: var(--gray-800);
  line-height: 1.4;
}
.detail-panel-close{
  background: none;
  border: none;
  color: var(--gray-500);
  cursor: pointer;
  padding: var(--spacing-sm);
  border-radius: var(--radius-sm);
  font-size: 18px;
}
.detail-panel-close:hover{ background: var(--surface-hover); color: var(--gray-800); }

.detail-panel-body{
  flex: 1;
  overflow-y: auto;
  padding: var(--spacing-lg);
}

.detail-section{
  margin-bottom: var(--spacing-xl);
  padding-bottom: var(--spacing-md);
  border-bottom: 1px solid var(--gray-100);
}
.detail-section:last-child{
  border-bottom: none;
}
.detail-section-title{
  font-size: var(--font-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--gray-700);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: var(--spacing-md);
  padding-bottom: var(--spacing-xs);
}

.detail-field{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-sm) 0;
  font-size: var(--font-sm);
}
.detail-field-label{
  color: var(--gray-500);
  flex-shrink: 0;
  margin-right: var(--spacing-md);
}
.detail-field-value{
  color: var(--gray-800);
  font-weight: var(--font-weight-medium);
  text-align: right;
}

.detail-editable{
  cursor: pointer;
  padding: 2px var(--spacing-xs);
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  transition: all 0.15s;
}
.detail-editable:hover{
  background: var(--surface-hover);
  border-color: var(--gray-200);
}

.detail-subtask-item{
  background: var(--surface-secondary);
  border-radius: var(--radius-md);
  padding: var(--spacing-md);
  margin-bottom: var(--spacing-sm);
  border-left: 3px solid var(--gray-300);
}
.detail-subtask-item.sub-in_progress{ border-left-color: var(--status-progress); }
.detail-subtask-item.sub-completed{ border-left-color: var(--status-done); }
.detail-subtask-item.sub-overdue{ border-left-color: var(--status-overdue); }

.detail-checklist{
  margin-top: var(--spacing-sm);
  padding-top: var(--spacing-sm);
  border-top: 1px solid var(--gray-100);
}
.detail-checklist-item{
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-xs) 0;
  font-size: var(--font-sm);
  color: var(--gray-700);
}
.detail-checklist-item.done{
  color: var(--gray-400);
  text-decoration: line-through;
}
.detail-checklist-item input{
  width: 16px;
  height: 16px;
  cursor: pointer;
}

/* === css/person-selector.css === */
/* PersonSelector component styles */

.ps-wrapper {
  position: relative;
}

.ps-selected {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-xs);
  min-height: 38px;
  padding: var(--spacing-xs) var(--spacing-sm);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
  cursor: text;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.ps-selected:hover {
  border-color: var(--gray-300);
}
.ps-selected:focus-within {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px var(--brand-primary-light);
}

.ps-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  background: var(--brand-primary-bg);
  color: var(--brand-primary);
  border-radius: 3px;
  font-size: var(--font-sm);
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
  line-height: 1.6;
}

.ps-tag-remove {
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  margin-left: 2px;
  opacity: 0.6;
}
.ps-tag-remove:hover {
  opacity: 1;
}

.ps-input {
  flex: 1;
  min-width: 80px;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  padding: 2px 4px;
  font-size: var(--font-sm);
  background: transparent;
}

.ps-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 4px;
  background: var(--surface);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  z-index: 1100;
  max-height: 220px;
  overflow-y: auto;
}
.ps-dropdown.hidden {
  display: none;
}

.ps-dropdown-inner {
  padding: var(--spacing-xs) 0;
}

.ps-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: var(--spacing-sm) var(--spacing-md);
  cursor: pointer;
  font-size: var(--font-sm);
  transition: background 0.1s;
}
.ps-option:hover {
  background: var(--surface-hover);
}
.ps-option-selected {
  opacity: 0.4;
  pointer-events: none;
}

.ps-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--brand-primary);
  color: white;
  font-size: 11px;
  font-weight: var(--font-weight-medium);
  flex-shrink: 0;
}

.ps-info {
  display: flex;
  flex-direction: column;
}

.ps-name {
  font-weight: var(--font-weight-medium);
  color: var(--gray-800);
}

.ps-meta {
  font-size: var(--font-xs);
  color: var(--gray-500);
}

.ps-empty-msg {
  padding: var(--spacing-lg);
  text-align: center;
  color: var(--gray-400);
  font-size: var(--font-sm);
}

/* Quick pick modal list */
.ps-pick-item {
  transition: background 0.1s;
}

/* === css/login.css === */
/* Login Page */
.login-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: linear-gradient(135deg, var(--login-gradient-start) 0%, var(--login-gradient-end) 100%);
  padding: 20px;
}

.login-card {
  background: white;
  border-radius: 16px;
  padding: 40px 32px;
  width: 100%;
  max-width: 400px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}

.login-logo {
  font-size: 28px;
  font-weight: 700;
  color: var(--gray-900);
  text-align: center;
  margin-bottom: 4px;
}

.login-subtitle {
  font-size: 14px;
  color: var(--gray-400);
  text-align: center;
  margin-bottom: 32px;
}

.login-search-wrap {
  margin-bottom: 12px;
}

.login-search {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  font-size: 14px;
  outline: none;
  transition: border-color 0.2s;
  box-sizing: border-box;
}

.login-search:focus {
  border-color: var(--login-gradient-start);
}

.login-colleague-list {
  max-height: 260px;
  overflow-y: auto;
  border: 1px solid var(--gray-50);
  border-radius: 8px;
  margin-bottom: 16px;
}

.login-colleague-item {
  display: flex;
  align-items: center;
  padding: 10px 14px;
  cursor: pointer;
  transition: background 0.15s;
  border-bottom: 1px solid var(--gray-50);
}

.login-colleague-item:hover {
  background: var(--gray-50);
}

.login-colleague-item.selected {
  background: var(--color-info-bg);
  border-left: 3px solid var(--login-gradient-start);
}

.login-colleague-item:last-child {
  border-bottom: none;
}

.login-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--login-gradient-start);
  color: white;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
  margin-right: 10px;
  flex-shrink: 0;
}

.login-name {
  flex: 1;
  font-size: 14px;
  color: var(--gray-700);
}

.login-check {
  color: var(--login-gradient-start);
  font-weight: 600;
  font-size: 16px;
}

.login-btn {
  width: 100%;
  padding: 12px;
  background: var(--login-gradient-start);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
}

.login-btn:hover:not(:disabled) {
  background: var(--brand-primary);
}

.login-btn:disabled {
  background: var(--gray-300);
  cursor: not-allowed;
}

.login-btn-guest {
  background: var(--gray-100);
  color: var(--gray-600);
  border: 1px solid var(--gray-200);
  font-size: 13px;
  font-weight: 500;
}
.login-btn-guest:hover:not(:disabled) {
  background: var(--gray-200);
  color: var(--gray-700);
}

.login-divider {
  display: flex;
  align-items: center;
  margin: 16px 0 12px;
  gap: 12px;
  color: var(--gray-400);
  font-size: 12px;
}
.login-divider::before, .login-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--gray-200);
}

.login-status {
  margin-top: 16px;
  text-align: center;
  font-size: 13px;
  color: var(--gray-600);
  line-height: 1.6;
}

.login-status.pending {
  color: var(--color-orange);
}

.login-status.success {
  color: var(--color-success);
  font-weight: 600;
}

.login-status.error {
  color: var(--status-overdue);
}

.login-loading, .login-empty {
  text-align: center;
  color: var(--gray-400);
  font-size: 13px;
  padding: 20px;
}

.login-error {
  text-align: center;
  color: var(--status-overdue);
  font-size: 13px;
  padding: 20px;
}

/* === sop-styles.css === */
/**
 * SOP 工作痕迹系统 - 样式
 */

/* ==================== 进度条组件 ==================== */
.sop-progress-container {
    background: var(--surface);
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 20px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.sop-progress-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.sop-progress-title {
    font-weight: 600;
    color: var(--gray-800);
}

.sop-progress-percent {
    font-size: 20px;
    font-weight: bold;
    color: var(--status-done);
}

.sop-progress-bar {
    height: 8px;
    background: var(--gray-200);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 12px;
}

.sop-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--status-done), var(--status-done));
    border-radius: 4px;
    transition: width 0.3s ease;
}

.sop-progress-stats {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.sop-progress-stats .stat {
    font-size: 13px;
    color: var(--gray-600);
}

.sop-progress-stats .stat.completed { color: var(--status-done); }
.sop-progress-stats .stat.in-progress { color: var(--brand-primary); }
.sop-progress-stats .stat.blocked { color: var(--status-overdue); }
.sop-progress-stats .stat.pending { color: var(--gray-500); }

/* ==================== 步骤列表 ==================== */
.sop-steps-list {
    margin-top: 20px;
}

.sop-step {
    display: flex;
    align-items: flex-start;
    padding: 16px;
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    margin-bottom: 12px;
    background: var(--surface);
    transition: all 0.2s;
}

.sop-step:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.sop-step.completed {
    border-left: 4px solid var(--status-done);
    background: var(--color-success-bg);
}

.sop-step.in_progress {
    border-left: 4px solid var(--brand-primary);
    background: var(--brand-primary-bg);
}

.sop-step.blocked {
    border-left: 4px solid var(--status-overdue);
    background: var(--surface)5f5;
}

.sop-step.skipped {
    border-left: 4px solid var(--color-orange);
    opacity: 0.8;
}

.sop-step.pending {
    border-left: 4px solid var(--gray-300);
}

.sop-step-number {
    width: 28px;
    height: 28px;
    background: var(--gray-100);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    color: var(--gray-600);
    margin-right: 12px;
    flex-shrink: 0;
}

.sop-step.completed .sop-step-number {
    background: var(--status-done);
    color: white;
}

.sop-step.in_progress .sop-step-number {
    background: var(--brand-primary);
    color: white;
}

.sop-step.blocked .sop-step-number {
    background: var(--status-overdue);
    color: white;
}

.sop-step-content {
    flex: 1;
    min-width: 0;
}

.sop-step-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.sop-step-name {
    font-weight: 600;
    color: var(--gray-800);
}

.sop-step-status {
    font-size: 12px;
    padding: 4px 8px;
    border-radius: 4px;
    font-weight: 500;
}

.sop-step-status.completed {
    background: var(--color-success-bg);
    color: var(--status-done);
}

.sop-step-status.in_progress {
    background: var(--color-info-light);
    color: var(--brand-primary-hover);
}

.sop-step-status.blocked {
    background: var(--sop-block-light);
    color: var(--status-overdue);
}

.sop-step-status.skipped {
    background: var(--color-orange-light);
    color: var(--color-orange);
}

.sop-step-status.pending {
    background: var(--surface-secondary);
    color: var(--gray-600);
}

.sop-step-meta {
    display: flex;
    gap: 16px;
    font-size: 13px;
    color: var(--gray-600);
    flex-wrap: wrap;
}

.sop-step-meta span {
    display: flex;
    align-items: center;
    gap: 4px;
}

.sop-step-notes {
    margin-top: 8px;
    padding: 8px;
    background: var(--surface-secondary);
    border-radius: 4px;
    font-size: 13px;
    color: var(--gray-600);
}

.sop-step-block-reason,
.sop-step-skip-reason {
    margin-top: 8px;
    padding: 8px;
    border-radius: 4px;
    font-size: 13px;
}

.sop-step-block-reason {
    background: var(--sop-block-light);
    color: var(--status-overdue);
}

.sop-step-skip-reason {
    background: var(--color-orange-light);
    color: var(--color-orange);
}

.sop-step-actions {
    display: flex;
    gap: 8px;
    margin-left: 12px;
}

.sop-step-actions button {
    padding: 6px 12px;
    border: none;
    border-radius: 4px;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
}

.sop-step-actions .btn-start {
    background: var(--brand-primary);
    color: white;
}

.sop-step-actions .btn-start:hover {
    background: var(--brand-primary-hover);
}

.sop-step-actions .btn-complete {
    background: var(--status-done);
    color: white;
}

.sop-step-actions .btn-complete:hover {
    background: var(--status-done);
}

.sop-step-actions .btn-skip {
    background: var(--surface-secondary);
    color: var(--gray-600);
}

.sop-step-actions .btn-skip:hover {
    background: var(--gray-200);
}

.sop-step-actions .btn-block {
    background: var(--sop-block-light);
    color: var(--status-overdue);
}

.sop-step-actions .btn-block:hover {
    background: var(--color-error-light);
}

/* ==================== 模板选择器 ==================== */
.sop-template-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
    margin-top: 16px;
}

.sop-template-card {
    background: var(--surface);
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    padding: 16px;
    transition: all 0.2s;
}

.sop-template-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    border-color: var(--brand-primary);
}

.sop-template-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.sop-template-name {
    font-weight: 600;
    color: var(--gray-800);
}

.sop-template-category {
    font-size: 12px;
    padding: 2px 8px;
    background: var(--color-info-light);
    color: var(--brand-primary-hover);
    border-radius: 4px;
}

.sop-template-desc {
    font-size: 13px;
    color: var(--gray-600);
    margin-bottom: 12px;
    min-height: 36px;
}

.sop-template-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    font-size: 13px;
}

.sop-template-meta .step-count {
    color: var(--gray-600);
}

.sop-template-meta .badge {
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 4px;
}

.sop-template-meta .badge.default {
    background: var(--color-success-bg);
    color: var(--status-done);
}

.sop-template-steps-preview {
    display: flex;
    gap: 4px;
    margin-bottom: 12px;
}

.sop-template-steps-preview .step-dot {
    width: 20px;
    height: 20px;
    background: var(--gray-200);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    color: var(--gray-600);
}

.sop-template-card .btn-select {
    width: 100%;
    padding: 8px;
    background: var(--brand-primary);
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 500;
}

.sop-template-card .btn-select:hover {
    background: var(--brand-primary-hover);
}

/* ==================== 活动日志 ==================== */
.sop-activity-list {
    max-height: 400px;
    overflow-y: auto;
}

.sop-activity-item {
    display: flex;
    gap: 12px;
    padding: 12px;
    border-bottom: 1px solid var(--gray-100);
}

.sop-activity-item:last-child {
    border-bottom: none;
}

.sop-activity-icon {
    width: 32px;
    height: 32px;
    background: var(--surface-secondary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
}

.sop-activity-content {
    flex: 1;
}

.sop-activity-title {
    font-weight: 500;
    color: var(--gray-800);
    margin-bottom: 4px;
}

.sop-activity-content-text {
    font-size: 13px;
    color: var(--gray-600);
    margin-bottom: 4px;
}

.sop-activity-meta {
    display: flex;
    gap: 12px;
    font-size: 12px;
    color: var(--gray-500);
}

/* ==================== 通用样式 ==================== */
.sop-empty {
    text-align: center;
    padding: 40px;
    color: var(--gray-500);
    font-size: 14px;
}

.sop-not-created {
    text-align: center;
    padding: 40px;
    background: var(--surface-secondary);
    border-radius: 8px;
    color: var(--gray-600);
}

/* ==================== 标签页 ==================== */
.sop-tabs {
    display: flex;
    border-bottom: 1px solid var(--gray-200);
    margin-bottom: 20px;
}

.sop-tab {
    padding: 12px 20px;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    color: var(--gray-600);
    font-weight: 500;
}

.sop-tab:hover {
    color: var(--gray-800);
}

.sop-tab.active {
    color: var(--brand-primary);
    border-bottom-color: var(--brand-primary);
}

.sop-tab-content {
    display: none;
}

.sop-tab-content.active {
    display: block;
}

/* ==================== 步骤操作按钮（纵向布局） ==================== */
.sop-step-actions-col {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-left: 12px;
    min-width: 80px;
}

.sop-step-actions-col button {
    padding: 6px 12px;
    border: none;
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.sop-step-actions-col .btn-start {
    background: var(--brand-primary);
    color: white;
}
.sop-step-actions-col .btn-start:hover { background: var(--brand-primary-hover); }

.sop-step-actions-col .btn-complete {
    background: var(--status-done);
    color: white;
}
.sop-step-actions-col .btn-complete:hover { background: var(--status-done); }

.sop-step-actions-col .btn-record {
    background: var(--color-orange);
    color: white;
}
.sop-step-actions-col .btn-record:hover { background: var(--color-orange); }

.sop-step-actions-col .btn-skip {
    background: var(--surface-secondary);
    color: var(--gray-600);
}
.sop-step-actions-col .btn-skip:hover { background: var(--gray-200); }

.sop-step-actions-col .btn-block {
    background: var(--sop-block-light);
    color: var(--status-overdue);
}
.sop-step-actions-col .btn-block:hover { background: var(--color-error-light); }

.sop-step-actions-col .btn-ghost {
    background: transparent;
    border: 1px solid var(--gray-200);
    color: var(--gray-600);
}
.sop-step-actions-col .btn-ghost:hover { background: var(--surface-secondary); }

.sop-step-actions-col .btn-unblock {
    background: var(--color-orange);
    color: white;
}
.sop-step-actions-col .btn-unblock:hover { background: var(--color-orange); }

/* ==================== 成果录入表单 ==================== */
.sop-record-form {
    background: var(--gray-50);
    border: 2px solid var(--color-info-light);
    border-radius: 8px;
    padding: 16px;
    margin: 12px 0;
    animation: sop-slide-in 0.2s ease;
}

@keyframes sop-slide-in {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}

.sop-record-form-title {
    font-weight: 600;
    font-size: 14px;
    color: var(--gray-800);
    margin-bottom: 12px;
}

.sop-form-group {
    margin-bottom: 12px;
}

.sop-form-group label {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: var(--gray-600);
    margin-bottom: 4px;
}

.sop-form-group textarea {
    width: 100%;
    min-height: 60px;
    padding: 8px;
    border: 1px solid var(--gray-200);
    border-radius: 4px;
    font-size: 13px;
    resize: vertical;
    font-family: inherit;
    box-sizing: border-box;
}

.sop-form-group textarea:focus {
    outline: none;
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.1);
}

.sop-link-input-row {
    display: flex;
    gap: 6px;
}

.sop-link-input-row input {
    padding: 6px 8px;
    border: 1px solid var(--gray-200);
    border-radius: 4px;
    font-size: 13px;
}

.sop-link-input-row input:focus {
    outline: none;
    border-color: var(--brand-primary);
}

.btn-add-link {
    width: 32px;
    height: 32px;
    border: 1px solid var(--gray-200);
    border-radius: 4px;
    background: var(--surface-secondary);
    cursor: pointer;
    font-size: 16px;
    color: var(--brand-primary);
    flex-shrink: 0;
}

.btn-add-link:hover {
    background: var(--color-info-light);
}

.sop-deliverable-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    background: var(--surface);
    border: 1px solid var(--gray-200);
    border-radius: 4px;
    margin-top: 6px;
    font-size: 13px;
}

.sop-deliverable-row-desc {
    flex: 1;
    color: var(--gray-800);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sop-deliverable-row-link {
    color: var(--brand-primary);
    font-size: 12px;
    text-decoration: none;
    flex-shrink: 0;
}

.sop-deliverable-row-link:hover {
    text-decoration: underline;
}

.btn-remove-link {
    width: 20px;
    height: 20px;
    border: none;
    background: transparent;
    color: var(--gray-500);
    cursor: pointer;
    font-size: 14px;
    flex-shrink: 0;
}

.btn-remove-link:hover {
    color: var(--status-overdue);
}

.sop-form-actions {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}

.sop-form-actions .btn-save,
.sop-form-actions .btn-complete {
    padding: 8px 16px;
    background: var(--brand-primary);
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 500;
    font-size: 13px;
}

.sop-form-actions .btn-save:hover,
.sop-form-actions .btn-complete:hover {
    background: var(--brand-primary-hover);
}

.sop-form-actions .btn-cancel {
    padding: 8px 16px;
    background: var(--surface-secondary);
    color: var(--gray-600);
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
}

.sop-form-actions .btn-cancel:hover {
    background: var(--gray-200);
}

/* ==================== 交付物展示 ==================== */
.sop-deliverables {
    margin-top: 8px;
    padding: 8px;
    background: var(--brand-primary-bg);
    border-radius: 4px;
}

.sop-deliverables-title {
    font-size: 12px;
    font-weight: 500;
    color: var(--gray-600);
    margin-bottom: 4px;
}

.sop-deliverable-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 0;
    font-size: 12px;
}

.sop-deliverable-item a {
    color: var(--brand-primary-hover);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 200px;
}

.sop-deliverable-item a:hover {
    text-decoration: underline;
}

.sop-deliverable-type {
    font-size: 10px;
    padding: 1px 6px;
    background: var(--color-info-light);
    color: var(--brand-primary-hover);
    border-radius: 3px;
    flex-shrink: 0;
}

/* ==================== 加载状态 ==================== */
.sop-loading {
    text-align: center;
    padding: 16px;
    color: var(--gray-500);
    font-size: 13px;
}

/* ==================== 文件上传 ==================== */
.sop-file-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
}
.sop-upload-area {
    border: 2px dashed var(--gray-300);
    border-radius: 6px;
    padding: 16px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
    overflow: hidden;
}

.sop-upload-area:hover,
.sop-upload-dragover {
    border-color: var(--brand-primary);
    background: var(--color-info-light);
}

.sop-upload-dragover {
    border-color: var(--brand-primary-hover);
    background: var(--color-info-light);
}

.sop-upload-area:hover {
    border-color: var(--brand-primary);
    background: var(--brand-primary-bg);
}

.sop-upload-hint {
    font-size: 13px;
    color: var(--gray-500);
}

.sop-uploading .sop-upload-status {
    color: var(--color-orange);
    font-size: 12px;
}

.sop-uploaded .sop-deliverable-row-desc {
    color: var(--status-done);
}

.sop-upload-status {
    font-size: 12px;
    color: var(--color-orange);
    flex-shrink: 0;
}

.sop-upload-progress {
    width: 100%;
    height: 3px;
    background: var(--gray-200);
    border-radius: 2px;
    margin-top: 4px;
    overflow: hidden;
}

.sop-upload-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--brand-primary), var(--brand-primary-hover));
    border-radius: 2px;
    transition: width 0.3s ease;
}

.sop-uploaded .sop-deliverable-row-desc {
    color: var(--status-done);
}

/* ==================== 模板选择提示 ==================== */
.sop-select-hint {
    text-align: center;
    padding: 8px;
    color: var(--gray-600);
    font-size: 13px;
    margin-bottom: 8px;
}

/* ==================== 响应式 ==================== */
@media (max-width: 768px) {
    .sop-template-list {
        grid-template-columns: 1fr;
    }
    
    .sop-step-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    
    .sop-step-actions {
        margin-left: 0;
        margin-top: 12px;
        width: 100%;
    }
    
    .sop-step-actions button {
        flex: 1;
    }
}

/* ==================== 实际日期 ==================== */
.sop-actual-dates {
    margin-top: 6px;
    font-size: 12px;
    color: var(--brand-primary-hover);
    background: var(--color-info-light);
    padding: 4px 8px;
    border-radius: 4px;
}

/* ==================== 完成状态标签 ==================== */
.sop-completion-tag {
    display: inline-block;
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 10px;
    margin-left: 8px;
    font-weight: 500;
}
.sop-completion-tag.sop-tag-early {
    background: var(--color-success-bg);
    color: var(--status-done);
}
.sop-completion-tag.sop-tag-ontime {
    background: var(--color-info-light);
    color: var(--brand-primary-hover);
}
.sop-completion-tag.sop-tag-late {
    background: var(--color-orange-light);
    color: var(--color-orange);
}

/* ==================== 评分展示 ==================== */
.sop-evaluation {
    margin-top: 10px;
    padding: 10px;
    background: var(--gray-50);
    border-radius: 6px;
    border: 1px solid var(--gray-200);
}
.sop-eval-scores {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}
.sop-eval-item {
    font-size: 12px;
    color: var(--gray-600);
}
.sop-stars {
    color: var(--color-warning);
    font-size: 14px;
    letter-spacing: 1px;
}
.sop-eval-comment {
    margin-top: 6px;
    font-size: 12px;
    color: var(--gray-600);
    padding-top: 6px;
    border-top: 1px solid var(--gray-100);
}

/* ==================== 评分表单 ==================== */
.sop-eval-form-inline {
    background: var(--gray-50);
    border: 2px solid var(--color-orange-light);
    border-radius: 8px;
    padding: 16px;
    margin: 12px 0;
    animation: sop-slide-in 0.2s ease;
}
.sop-eval-dimension {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}
.sop-eval-dimension label {
    width: 50px;
    font-size: 13px;
    font-weight: 500;
    color: var(--gray-600);
    flex-shrink: 0;
}
.sop-star-input {
    display: flex;
    gap: 4px;
}
.sop-star-input .sop-star {
    font-size: 24px;
    color: var(--gray-200);
    cursor: pointer;
    transition: color 0.15s, transform 0.15s;
    user-select: none;
}
.sop-star-input .sop-star:hover {
    transform: scale(1.2);
}
.sop-star-input .sop-star.active {
    color: var(--color-warning);
}

.sop-step-actions-col .btn-evaluate {
    background: var(--color-warning);
    color: var(--gray-800);
}
.sop-step-actions-col .btn-evaluate:hover { background: var(--color-warning); }

.sop-step-admin-col {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0 4px;
    opacity: 0.4;
    transition: opacity 0.15s;
}
.sop-step:hover .sop-step-admin-col { opacity: 1; }

/* ===== Leader Overview — 左右分栏布局 ===== */

/* ===== Overview (总览) ===== */

.ov-container {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: var(--gray-50);
}

/* Toolbar */
.ov-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    background: var(--surface);
    border-bottom: 1px solid var(--gray-200);
    flex-shrink: 0;
}

.ov-dim-tabs {
    display: flex;
    gap: 2px;
    background: var(--gray-100);
    border-radius: 8px;
    padding: 3px;
}

.ov-dim-tab {
    padding: 6px 16px;
    border: none;
    background: transparent;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    color: var(--gray-500);
    transition: all .15s;
    font-weight: 500;
}

.ov-dim-tab:hover { color: var(--gray-700); }

.ov-dim-tab.active {
    background: var(--surface);
    color: var(--brand-primary);
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(0,0,0,.08);
}

.ov-search {
    padding: 6px 12px;
    border: 1px solid var(--gray-200);
    border-radius: 6px;
    font-size: 13px;
    width: 180px;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}

.ov-search:focus {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px var(--brand-primary-light);
}

.ov-toolbar-stats {
    margin-left: auto;
    display: flex;
    gap: 12px;
    font-size: 12px;
    color: var(--gray-500);
}

.ov-ts-done { color: var(--color-success); }
.ov-ts-overdue { color: var(--color-error); }

/* Main: left list + right detail */
.ov-main {
    flex: 1;
    display: flex;
    overflow: hidden;
}

/* Left list */
.ov-list {
    width: 300px;
    flex-shrink: 0;
    overflow-y: auto;
    border-right: 1px solid var(--gray-200);
    background: var(--surface);
}

.ov-list-empty {
    padding: 40px 16px;
    text-align: center;
    color: var(--gray-400);
    font-size: 13px;
}

.ov-list-item {
    padding: 14px 16px;
    border-bottom: 1px solid var(--gray-100);
    cursor: pointer;
    transition: background .12s, border-color .12s;
    border-left: 3px solid transparent;
}

.ov-list-item:hover { background: var(--gray-50); }

.ov-list-item.active {
    background: var(--brand-primary-bg);
    border-left-color: var(--brand-primary);
}

.ov-li-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

.ov-li-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--gray-800);
    margin-bottom: 8px;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ov-li-actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

.ov-li-bar {
    height: 3px;
    background: var(--gray-100);
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: 8px;
}

.ov-li-bar-fill {
    height: 100%;
    background: var(--brand-primary);
    border-radius: 2px;
    transition: width .3s;
}

.ov-list-item.active .ov-li-bar-fill {
    background: var(--brand-primary);
}

.ov-li-assignee {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
}

.ov-li-avatar {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--brand-primary-light);
    color: var(--brand-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
    flex-shrink: 0;
}

.ov-li-assignee-name {
    font-size: 12px;
    color: var(--gray-600);
    font-weight: 500;
}

.ov-li-dates {
    font-size: 11px;
    color: var(--gray-400);
    margin-left: auto;
}

.ov-li-meta {
    display: flex;
    gap: 10px;
    font-size: 11px;
    color: var(--gray-500);
}

.ov-li-overdue { color: var(--color-error) !important; font-weight: 600; }
.ov-li-hidden-tag {
    background: var(--gray-100);
    color: var(--gray-500);
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 10px;
}

.ov-li-score {
    margin-top: 4px;
    font-size: 12px;
    color: var(--color-warning);
    font-weight: 600;
}

/* Right detail */
.ov-detail {
    flex: 1;
    overflow-y: auto;
    background: var(--gray-50);
}

.ov-detail-empty {
    padding: 80px 20px;
    text-align: center;
    color: var(--gray-400);
    font-size: 14px;
}

.ov-detail-inner {
    padding: 24px 28px;
    max-width: 900px;
}

.ov-detail-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--gray-900);
    margin: 0 0 16px;
    line-height: 1.3;
}

/* Editable fields */
.ov-editable {
    cursor: pointer;
    border-bottom: 1px dashed var(--gray-300);
    transition: background .12s;
    border-radius: 2px;
    padding: 0 2px;
}
.ov-editable:hover {
    background: var(--brand-primary-light);
}

/* Task info grid */
.ov-task-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 24px;
    margin-bottom: 20px;
    padding: 14px 16px;
    background: var(--surface);
    border-radius: var(--radius-lg);
    border: 1px solid var(--gray-200);
}

.ov-task-info-field {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.ov-sub-actions {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}

.ov-detail-stats {
    display: flex;
    gap: 16px;
    font-size: 13px;
    color: var(--gray-500);
    align-items: center;
    margin-bottom: 20px;
    padding: 10px 0;
    border-top: 1px solid var(--gray-200);
    border-bottom: 1px solid var(--gray-200);
}

.ov-detail-bar {
    width: 140px;
    height: 6px;
    background: var(--gray-100);
    border-radius: 3px;
    overflow: hidden;
}

.ov-detail-bar-fill {
    height: 100%;
    background: var(--brand-primary);
    border-radius: 3px;
    transition: width .3s;
}

/* Subtask cards */
.ov-subs {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ov-sub {
    background: var(--surface);
    border-radius: var(--radius-lg);
    border: 1px solid var(--gray-200);
    padding: 16px 18px;
    transition: box-shadow .15s;
}

.ov-sub:hover {
    box-shadow: var(--shadow-sm);
}

.ov-sub-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.ov-sub-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--gray-800);
    flex: 1;
}


.ov-sub-info {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 24px;
    padding-top: 10px;
    border-top: 1px solid var(--gray-100);
}

.ov-sub-col {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ov-sub-field {
    display: flex;
    gap: 8px;
    font-size: 13px;
    line-height: 1.5;
}

.ov-sub-label {
    color: var(--gray-400);
    min-width: 56px;
    flex-shrink: 0;
    font-size: 12px;
}

.ov-sub-val {
    color: var(--gray-700);
    min-width: 0;
}

.ov-sub-val .ov-actual { color: var(--brand-primary); }

/* Head row for task dimension */
.tdv-head-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 4px;
}

.tdv-action-btns {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

.tdv-btn-sm {
    font-size: 12px;
}

.tdv-hidden-warn {
    background: var(--color-warning-bg);
    color: var(--color-warning);
    padding: 6px 12px;
    border-radius: var(--radius-md);
    font-size: 12px;
    margin-bottom: 12px;
    border-left: 3px solid var(--color-warning);
}

.tdv-sub-head-right {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.tdv-sub-del {
    font-size: 14px;
    color: var(--gray-400);
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px 4px;
    border-radius: 3px;
    transition: color .12s, background .12s;
}

.tdv-sub-del:hover {
    color: var(--color-error);
    background: var(--color-error-light);
}

/* Status badges */
.ov-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    flex-shrink: 0;
    letter-spacing: 0.3px;
}

.ov-badge.pending { background: var(--gray-100); color: var(--gray-500); }
.ov-badge.in_progress { background: var(--color-info-light); color: var(--brand-primary); }
.ov-badge.completed { background: var(--color-success-light); color: var(--color-success); }
.ov-badge.overdue { background: var(--color-error-light); color: var(--color-error); }

.ov-completion-tag {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: 500;
}

.ov-tag-early { background: var(--color-success-light); color: var(--color-success); }
.ov-tag-ontime { background: var(--color-info-light); color: var(--brand-primary); }
.ov-tag-late { background: var(--color-warning-light); color: var(--color-warning); }

/* Deliverables */
.ov-deliv-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.ov-deliv-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--gray-50);
    border: 1px solid var(--gray-100);
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 12px;
    cursor: default;
    transition: background .12s;
}

.ov-deliv-item:hover {
    background: var(--gray-100);
}

.ov-deliv-item a {
    color: var(--brand-primary);
    text-decoration: none;
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ov-deliv-item a:hover { text-decoration: underline; }
.ov-deliv-empty { color: var(--gray-400); font-size: 12px; }

.ov-deliv-img { cursor: pointer; }

.ov-deliv-thumb {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid var(--gray-200);
    flex-shrink: 0;
}

/* Evaluation block */
.ov-eval-block {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ov-eval-avg {
    font-size: 18px;
    font-weight: 700;
    color: var(--color-warning);
    line-height: 1.2;
    margin-bottom: 2px;
}

.ov-eval-row {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    line-height: 1.8;
}

.ov-eval-label {
    color: var(--gray-500);
    min-width: 36px;
}

.ov-eval-stars {
    color: var(--color-warning);
    letter-spacing: -1px;
    font-size: 13px;
}

.ov-eval-num {
    font-weight: 600;
    color: var(--gray-700);
    font-size: 12px;
}

.ov-eval-comment {
    font-size: 12px;
    color: var(--gray-500, var(--gray-600));
    margin-top: 2px;
    max-width: 240px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ov-eval-none { color: var(--gray-400, var(--gray-500)); font-size: 12px; }

.ov-eval-btn {
    padding: 4px 12px;
    border: 1px solid var(--color-warning);
    background: var(--surface)beb;
    color: var(--color-warning);
    border-radius: 6px;
    font-size: 12px;
    cursor: pointer;
    font-weight: 500;
}

.ov-eval-btn:hover { background: var(--color-warning-light); }

/* ---- File preview overlay ---- */
.ov-preview-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1100;
    cursor: pointer;
}

.ov-preview-box {
    background: var(--surface);
    border-radius: 12px;
    width: 90vw;
    max-width: 1000px;
    height: 85vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    cursor: default;
}

.ov-preview-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    border-bottom: 1px solid var(--gray-200, var(--gray-200));
    flex-shrink: 0;
}

.ov-preview-filename {
    font-size: 13px;
    font-weight: 500;
    color: var(--gray-700);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ov-preview-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-shrink: 0;
}

.ov-preview-open {
    color: var(--brand-primary, var(--brand-primary));
    font-size: 13px;
    text-decoration: none;
}

.ov-preview-open:hover { text-decoration: underline; }

.ov-preview-close {
    padding: 4px 14px;
    background: var(--gray-100, var(--surface-secondary));
    border: none;
    border-radius: 6px;
    font-size: 13px;
    cursor: pointer;
    color: var(--gray-600);
}

.ov-preview-body {
    flex: 1;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-secondary);
}

.ov-preview-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.ov-preview-iframe {
    width: 100%;
    height: 100%;
    border: none;
}

/* deliverable items */
.ov-deliv-item {
    cursor: pointer;
}

.ov-deliv-name {
    color: var(--brand-primary, var(--brand-primary));
    font-size: 12px;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---- Eval modal ---- */
.ov-eval-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,.3);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.ov-eval-modal {
    background: var(--surface);
    border-radius: 12px;
    padding: 24px;
    width: 90%;
    max-width: 480px;
    max-height: 85vh;
    overflow-y: auto;
    box-shadow: 0 8px 30px rgba(0,0,0,.15);
}

.ov-eval-modal h3 { margin: 0 0 16px; font-size: 16px; color: var(--gray-800); }
.ov-eval-modal .ov-eval-field { margin-bottom: 12px; }
.ov-eval-modal label { display: block; font-size: 13px; color: var(--gray-600); margin-bottom: 4px; }
.ov-eval-modal .ov-star-row { display: flex; gap: 4px; }

.ov-eval-modal .ov-star-btn {
    font-size: 20px; background: none; border: none; cursor: pointer;
    color: var(--gray-300); transition: color .1s;
}
.ov-eval-modal .ov-star-btn.active { color: var(--color-warning); }

.ov-eval-modal textarea {
    width: 100%; height: 60px; border: 1px solid var(--gray-200);
    border-radius: 6px; padding: 8px; font-size: 13px; resize: vertical; outline: none;
}
.ov-eval-modal textarea:focus { border-color: var(--brand-primary); }

.ov-eval-modal .ov-eval-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; }

.ov-eval-modal .btn-save,
.ov-eval-modal .btn-cancel {
    padding: 6px 16px; border-radius: 6px; font-size: 13px; cursor: pointer; border: none;
}
.ov-eval-modal .btn-save { background: var(--brand-primary); color: var(--surface); }
.ov-eval-modal .btn-cancel { background: var(--gray-100); color: var(--gray-600); }

/* ---- Eval modal upload ---- */
.ov-eval-upload-area {
    border: 2px dashed var(--gray-300, var(--gray-300));
    border-radius: 6px;
    padding: 14px;
    text-align: center;
    cursor: pointer;
    font-size: 12px;
    color: var(--gray-400, var(--gray-500));
    transition: all .15s;
}

.ov-eval-upload-area:hover,
.ov-eval-dragover {
    border-color: var(--brand-primary);
    background: var(--brand-primary-light, var(--brand-primary-light));
    color: var(--brand-primary);
}

.ov-eval-file-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    font-size: 12px;
    color: var(--gray-600);
}

.ov-eval-file-done span { color: var(--color-success); font-weight: 500; }

.ov-eval-file-row a {
    color: var(--brand-primary);
    font-size: 11px;
    text-decoration: none;
}

.ov-eval-file-row a:hover { text-decoration: underline; }

.ov-eval-file-remove {
    background: none;
    border: none;
    color: var(--gray-400);
    cursor: pointer;
    font-size: 14px;
    padding: 0 4px;
}

.ov-eval-file-remove:hover { color: var(--status-overdue); }

.ov-eval-file-status {
    color: var(--color-warning);
    font-size: 11px;
}

.ov-eval-file-progress {
    flex: 1;
    height: 3px;
    background: var(--gray-100);
}

/* ===== Stats Dashboard ===== */

.stats-container {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
  height: calc(100vh - var(--navbar-height));
  overflow-y: auto;
  box-sizing: border-box;
}

.stats-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 2px solid var(--gray-100);
  margin-bottom: 20px;
}

.stats-tab {
  padding: 8px 20px;
  border: none;
  background: none;
  cursor: pointer;
  font-size: 14px;
  color: var(--gray-500);
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: all 0.15s;
}

.stats-tab:hover { color: var(--gray-700); }

.stats-tab.active {
  color: var(--brand-primary);
  border-bottom-color: var(--brand-primary);
  font-weight: 600;
}

.stats-loading,
.stats-empty {
  text-align: center;
  padding: 60px 20px;
  color: var(--gray-400);
  font-size: 15px;
}

.stats-error {
  text-align: center;
  padding: 40px 20px;
  color: var(--color-error);
}

/* ===== Week Header ===== */

.stats-week-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(135deg, var(--color-info-bg), var(--color-success-bg));
  border: 1px solid var(--color-info-light);
  border-radius: 10px;
  padding: 14px 20px;
  margin-bottom: 16px;
}

.stats-week-main {
  display: flex;
  align-items: center;
  gap: 12px;
}

.stats-week-label {
  font-size: 18px;
  font-weight: 700;
  color: var(--brand-primary);
}

.stats-week-range {
  font-size: 14px;
  color: var(--gray-500);
}

.stats-week-month {
  font-size: 14px;
  color: var(--gray-500);
}

/* ===== Cards ===== */

.stats-kpi-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}

.stats-kpi-card {
  background: var(--surface);
  border: 1px solid var(--gray-100);
  border-radius: var(--radius-lg);
  padding: 18px 14px;
  text-align: center;
  transition: box-shadow 0.15s;
}

.stats-kpi-card:hover {
  box-shadow: var(--shadow-md);
}

.stats-kpi-num {
  font-size: 30px;
  font-weight: 700;
  color: var(--gray-800);
  line-height: 1.2;
}

.stats-kpi-label {
  font-size: 12px;
  color: var(--gray-500);
  margin-top: 4px;
  font-weight: 500;
}

.stats-kpi-green .stats-kpi-num { color: var(--color-success); }
.stats-kpi-green { border-bottom: 3px solid var(--color-success); }
.stats-kpi-blue  .stats-kpi-num { color: var(--color-info); }
.stats-kpi-blue  { border-bottom: 3px solid var(--color-info); }
.stats-kpi-red   .stats-kpi-num { color: var(--color-error); }
.stats-kpi-red   { border-bottom: 3px solid var(--color-error); }

/* Legacy stats-cards still used in report */
.stats-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px;
  margin-bottom: 20px;
}

.stats-card {
  background: white;
  border: 1px solid var(--gray-100);
  border-radius: 8px;
  padding: 14px;
  text-align: center;
}

.stats-card-value {
  font-size: 26px;
  font-weight: 700;
  color: var(--gray-800);
  line-height: 1.2;
}

.stats-card-label {
  font-size: 12px;
  color: var(--gray-500);
  margin-top: 4px;
}

.stats-card-green .stats-card-value { color: var(--color-success); }
.stats-card-blue  .stats-card-value { color: var(--color-info); }
.stats-card-yellow .stats-card-value { color: var(--color-warning); }
.stats-card-red   .stats-card-value { color: var(--color-error); }

/* ===== Period Cards (本周/本月) ===== */

.stats-period-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 20px;
}

.stats-period-box {
  background: white;
  border: 1px solid var(--gray-100);
  border-radius: 8px;
  padding: 14px 18px;
}

.stats-period-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--gray-600);
  margin-bottom: 10px;
}

.stats-period-stats {
  display: flex;
  gap: 24px;
}

.stats-period-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.stats-period-num {
  font-size: 24px;
  font-weight: 700;
  color: var(--brand-primary);
}

.stats-period-label {
  font-size: 12px;
  color: var(--gray-500);
}

/* ===== Charts ===== */

.stats-charts-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.stats-chart-box {
  background: white;
  border: 1px solid var(--gray-100);
  border-radius: 8px;
  padding: 16px;
}

.stats-chart-card {
  background: var(--surface);
  border: 1px solid var(--gray-100);
  border-radius: var(--radius-lg);
  padding: 18px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.15s;
}

.stats-chart-card:hover {
  box-shadow: var(--shadow-md);
}

.stats-chart-card-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--gray-700);
  margin: 0 0 14px;
}

.stats-chart-box h4 {
  margin: 0 0 12px;
  font-size: 14px;
  color: var(--gray-600);
}

/* Fix: pie/doughnut chart must be square */
.stats-chart-square {
  max-width: 280px;
  margin: 0 auto;
}

.stats-chart-box canvas {
  max-height: 300px;
}

.stats-chart-full {
  background: white;
  border: 1px solid var(--gray-100);
  border-radius: 8px;
  padding: 16px;
  height: 300px;
}

.stats-chart-full canvas {
  height: 260px !important;
}

/* ===== Trend week card ===== */

.stats-week-card {
  background: linear-gradient(135deg, var(--color-info-bg), var(--color-success-bg));
  border: 1px solid var(--color-info-light);
  border-radius: 10px;
  padding: 16px 20px;
  margin-bottom: 20px;
}

.stats-week-card-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--gray-700);
  margin-bottom: 8px;
}

.stats-week-card-stats {
  display: flex;
  gap: 24px;
}

.stats-week-stat {
  font-size: 15px;
  color: var(--gray-600);
}

.stats-week-stat strong {
  font-size: 22px;
  margin: 0 4px;
}

/* ===== Sections ===== */

.stats-section {
  margin-bottom: 24px;
}

.stats-section h4 {
  margin: 0 0 12px;
  font-size: 15px;
  color: var(--gray-700);
}

.stats-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.stats-period-toggle {
  display: flex;
  gap: 4px;
}

.stats-period-btn {
  padding: 4px 12px;
  border: 1px solid var(--gray-200);
  border-radius: 4px;
  background: white;
  cursor: pointer;
  font-size: 12px;
  color: var(--gray-500);
}

.stats-period-btn.active {
  background: var(--brand-primary);
  color: white;
  border-color: var(--brand-primary);
}

/* ===== Table ===== */

.stats-table-wrap {
  overflow-x: auto;
}

.stats-table {
  width: 100%;
  border-collapse: collapse;
  background: white;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--gray-100);
}

.stats-table th {
  background: var(--gray-50);
  padding: 10px 14px;
  text-align: left;
  font-size: 12px;
  color: var(--gray-500);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

.stats-table td {
  padding: 10px 14px;
  border-top: 1px solid var(--gray-50);
  font-size: 14px;
  white-space: nowrap;
}

.stats-table tr:hover td {
  background: var(--gray-25, var(--gray-50));
}

/* Person table group headers */
.stats-person-table .th-group {
  text-align: center;
  background: var(--brand-primary-bg);
  border-left: 2px solid white;
  border-right: 2px solid white;
}

/* ===== Alerts ===== */

.stats-alerts-summary {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.stats-alert-badge {
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 600;
}

.stats-alerts-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.stats-alert-group {
  margin-bottom: 12px;
}

.stats-alert-group-header {
  font-size: 14px;
  font-weight: 700;
  padding: 8px 0 4px;
  border-bottom: 1px solid var(--gray-100);
  margin-bottom: 6px;
}

.stats-alert-item {
  padding: 10px 14px;
  border-radius: 6px;
  transition: box-shadow 0.15s;
  margin-bottom: 4px;
}

.stats-alert-item:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.stats-alert-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 2px;
}

.stats-alert-task {
  font-size: 14px;
  font-weight: 500;
}

.stats-alert-meta {
  display: flex;
  gap: 16px;
  font-size: 12px;
  color: var(--gray-500);
  padding-left: 0;
}

/* ===== Report ===== */

.report-container {
  background: white;
  border-radius: 8px;
  padding: 32px;
  border: 1px solid var(--gray-100);
}

.report-header {
  text-align: center;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 2px solid var(--gray-200);
}

.report-header h2 {
  margin: 0;
  font-size: 20px;
  color: var(--gray-800);
}

.report-period {
  font-size: 14px;
  color: var(--gray-500);
  margin-top: 4px;
}

.report-section {
  margin-bottom: 24px;
}

.report-section h3 {
  font-size: 16px;
  color: var(--gray-700);
  margin: 0 0 12px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--gray-100);
}

.report-highlights {
  font-size: 14px;
  color: var(--gray-600);
  line-height: 1.6;
  padding: 12px 16px;
  background: var(--gray-50);
  border-radius: 6px;
  margin-top: 12px;
}

/* ===== Week Navigation ===== */

.stats-week-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, var(--color-info-bg), var(--color-success-bg));
  border: 1px solid var(--color-info-light);
  border-radius: 10px;
  padding: 12px 18px;
  margin-bottom: 16px;
}

.stats-nav-btn {
  border: 1px solid var(--gray-200);
  border-radius: 4px;
  background: white;
  cursor: pointer;
  font-size: 14px;
  padding: 4px 10px;
  color: var(--gray-600);
}

.stats-nav-btn:hover { background: var(--gray-50); }

.stats-week-nav-label {
  font-size: 18px;
  font-weight: 700;
  color: var(--brand-primary);
}

.stats-week-nav-range {
  font-size: 14px;
  color: var(--gray-500);
}

/* ===== Person Cards ===== */

.stats-person-card {
  background: var(--surface);
  border: 1px solid var(--gray-100);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  margin-bottom: 10px;
  transition: box-shadow 0.15s;
}

.stats-person-card:hover {
  box-shadow: var(--shadow-sm);
}

.stats-person-header {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.stats-person-avatar {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  background: var(--brand-primary-light);
  color: var(--brand-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 14px;
  flex-shrink: 0;
}

.stats-person-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--gray-800);
}

.stats-person-badges {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-left: auto;
}

.stats-person-badge {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 10px;
  background: var(--gray-50);
  color: var(--gray-600);
  font-weight: 500;
}

.stats-person-badge-green {
  background: var(--color-success-light);
  color: var(--color-success);
}

.stats-person-badge-score {
  background: var(--color-info-light);
  color: var(--color-info);
}

.stats-person-toggle {
  font-size: 12px;
  color: var(--brand-primary);
  background: none;
  border: 1px solid var(--brand-primary-light);
  border-radius: var(--radius-sm);
  padding: 2px 10px;
  cursor: pointer;
  transition: background 0.15s;
}

.stats-person-toggle:hover {
  background: var(--brand-primary-light);
}

.stats-person-stats {
  display: flex;
  gap: 14px;
  font-size: 12px;
  color: var(--gray-500);
  margin-top: 4px;
  flex-wrap: wrap;
}

.stats-person-stats strong {
  color: var(--brand-primary);
}

.stats-person-tasks-collapsed {
  display: none;
}

.stats-person-tasks-expanded {
  display: block;
}

.stats-person-section-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 8px 0 4px;
}

.stats-person-section-label:first-child {
  padding-top: 4px;
}

.stats-person-main-task .stats-task-name {
  font-weight: 500;
  color: var(--gray-800);
}

.stats-person-task-list {
  border-top: 1px solid var(--gray-50);
  padding-top: 8px;
}

.stats-person-task-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  font-size: 13px;
  border-bottom: 1px solid var(--gray-50);
}

.stats-person-task-item:last-child { border-bottom: none; }

.stats-task-status {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.stats-task-parent {
  color: var(--gray-500);
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stats-task-arrow {
  color: var(--gray-300);
}

.stats-task-name {
  flex: 1;
  color: var(--gray-700);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stats-task-progress {
  font-size: 12px;
  color: var(--gray-500);
  min-width: 32px;
  text-align: right;
}

.stats-task-label {
  font-size: 11px;
  font-weight: 600;
  min-width: 48px;
}

/* Print styles */
@media print {
  body > nav,
  .stats-tabs,
  .stats-section-header > div,
  .stats-period-btn,
  #ts-status,
  #toast-container { display: none !important; }
  .stats-container { padding: 0; }
  .report-container { border: none; padding: 0; box-shadow: none; }
  .stats-card { border: 1px solid var(--gray-200); }
}

/* ===== Detail Panel Utility Classes ===== */

/* Form inputs (replaces 5 identical inline styles) */
.dp-form-input {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--gray-200);
    border-radius: 4px;
    font-size: 14px;
}

/* Dependency rows */
.dp-dep-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 0;
}

/* Extra-small badge */
.dp-badge-xs { font-size: 10px; }

/* Remove button (tiny) */
.dp-btn-remove-xs {
    font-size: 10px;
    padding: 2px 6px;
    color: var(--status-overdue);
}

/* Small ghost button variants */
.dp-btn-xs-ghost { font-size: 10px; padding: 2px 6px; margin-top: 4px; }
.dp-btn-xs-ghost-bottom { font-size: 10px; padding: 2px 6px; margin: 4px 0; }
.dp-btn-xs-ghost-top { font-size: 10px; padding: 2px 6px; margin-top: 4px; }

/* Small action button */
.dp-btn-action {
    font-size: 13px;
    padding: 5px 14px;
}

/* Action row */
.dp-action-row { display: flex; gap: 8px; }
.dp-action-row-wrap { margin-top: 12px; display: flex; gap: 8px; flex-wrap: wrap; }

/* Readonly banner */
.dp-readonly-banner {
    margin-bottom: 12px;
    padding: 8px 12px;
    background: var(--gray-50);
    border-radius: 6px;
    font-size: var(--font-xs);
    color: var(--gray-600);
}

/* Hidden task warning */
.dp-hidden-warning {
    margin-top: 8px;
    padding: 8px 12px;
    background: var(--color-warning-light);
    border-radius: 6px;
    font-size: var(--font-xs);
    color: #92400e;
}

/* Progress bar in detail */
.dp-progress-track {
    flex: 1;
    height: 8px;
    background: var(--gray-200);
    border-radius: 4px;
    overflow: hidden;
}
.dp-progress-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.3s;
}

/* Checklist */
.dp-checklist-area { margin: 8px 0; }
.dp-checklist-row { padding: 3px 0; font-size: var(--font-sm); display: flex; align-items: center; gap: 6px; }
.dp-checklist-input { width: 14px; height: 14px; cursor: pointer; flex-shrink: 0; }
.dp-checklist-text { flex: 1; min-width: 0; }
.dp-checklist-text:hover { background: var(--brand-primary-light); border-radius: 2px; }
.dp-checklist-del { background: none; border: none; color: var(--gray-400); cursor: pointer; font-size: 14px; padding: 0 4px; opacity: 0; transition: opacity .15s; }
.dp-checklist-row:hover .dp-checklist-del { opacity: 1; }
.dp-checklist-del:hover { color: var(--color-error); }

/* Reminder records */
.dp-reminder-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 3px 0;
    font-size: var(--font-xs);
    color: var(--gray-500);
}
.dp-reminder-name { color: var(--gray-600); }

/* Submission status */
.dp-submission-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 8px;
    font-weight: 600;
    font-size: var(--font-xs);
    margin-bottom: 8px;
}
.dp-submission-details {
    font-size: var(--font-xs);
    color: var(--gray-500);
    line-height: 1.8;
}

/* Upload progress */
.dp-upload-status { font-size: 11px; color: var(--gray-500); }
.dp-upload-progress {
    height: 4px;
    background: var(--gray-100);
    border-radius: 2px;
    margin-top: 4px;
    overflow: hidden;
}
.dp-upload-progress-bar {
    height: 100%;
    border-radius: 2px;
    transition: width 0.2s;
}
.dp-file-link {
    font-size: 11px;
    margin-left: 8px;
    color: var(--brand-primary);
}
.dp-file-remove-btn { font-size: 10px; padding: 1px 4px; margin-left: 4px; }
.dp-upload-error { color: var(--status-overdue); }

/* SOP tabs */
.dp-sop-tab {
    padding: 8px 16px;
    cursor: pointer;
    font-size: var(--font-sm);
    border-bottom: 2px solid transparent;
    color: var(--gray-500);
}
.dp-sop-tab.active {
    border-bottom-color: var(--brand-primary);
    color: var(--brand-primary);
    font-weight: 500;
}

/* Utility */
.dp-clickable { color: var(--brand-primary); cursor: pointer; }
.dp-hidden { display: none; }
.dp-text-muted { color: var(--gray-400); }
.dp-text-muted-sm { color: var(--gray-400); font-size: var(--font-sm); }
.dp-text-xs-muted { font-size: var(--font-xs); color: var(--gray-400); margin-top: 4px; }
.dp-mt-sm { margin-top: 8px; }
.dp-mt-md { margin-top: 12px; }
.dp-full-width { width: 100%; }
.dp-sop-step { margin: 0; }
.dp-sop-content-full { width: 100%; }

/* Toggle hide button */
.dp-toggle-hide { }

/* Send reminder button */
.dp-btn-reminder { }

/* Generic small buttons */
.dp-btn-sm { }
.dp-btn-sm-ghost { }

/* Progress row (flex with center alignment) */
.dp-progress-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Progress percentage label */
.dp-progress-label {
    font-size: var(--font-sm);
    font-weight: 600;
    min-width: 36px;
    color: var(--gray-600);
}

/* Dependency name span */
.dp-dep-name {
    font-size: var(--font-sm);
    margin-left: 8px;
}

/* SOP tab bar */
.dp-sop-tab-bar {
    display: flex;
    border-bottom: 1px solid var(--gray-200);
    margin-bottom: 12px;
}


/* PersonSelector */
.ps-pick-search {
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-md);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-sm);
    font-size: 14px;
    margin-bottom: var(--spacing-md);
}

.ps-pick-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 14px;
}

.ps-pick-item:hover {
    background: var(--surface-hover);
}

.ps-pick-avatar {
    width: 28px;
    height: 28px;
    font-size: 12px;
}

.ps-pick-name {
    font-weight: var(--font-weight-medium);
}

.ps-pick-meta {
    font-size: var(--font-xs);
    color: var(--gray-500);
}

.ps-pick-empty {
    padding: var(--spacing-lg);
    text-align: center;
    color: var(--gray-400);
}

.ps-pick-check {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

/* Modal */
.modal-confirm-text {
    font-size: var(--font-base);
    color: var(--gray-700);
}

.modal-prompt-input {
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-md);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-sm);
    font-size: 14px;
}



/* ===== Toolbar ===== */

/* Nav tab icon character */
.tb-nav-icon {
    font-size: 14px;
}

/* Changelog bell button */
.tb-changelog-btn {
    position: relative;
    cursor: pointer;
    padding: var(--spacing-xs) 6px;
    font-size: 18px;
    line-height: 1;
}

/* Changelog notification badge */
.tb-changelog-badge {
    display: none;
    position: absolute;
    top: 0;
    right: 2px;
    width: 8px;
    height: 8px;
    background: var(--color-error);
    border-radius: var(--radius-full);
}

.tb-changelog-badge.tb-visible {
    display: block;
}

/* User area in navbar */
.tb-user-area {
    display: none;
    margin-left: var(--spacing-sm);
    align-items: center;
    gap: 6px;
    font-size: var(--font-sm);
    color: var(--gray-600);
    cursor: pointer;
}

.tb-user-area.tb-visible {
    display: flex;
}

/* User avatar circle */
.tb-user-avatar {
    width: 26px;
    height: 26px;
    border-radius: var(--radius-full);
    background: var(--brand-primary);
    color: white;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-xs);
    font-weight: var(--font-weight-semibold);
}

/* Modal form input (text, date) */
.tb-form-input {
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-md);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-sm);
    font-size: 14px;
}

/* Modal form textarea */
.tb-form-textarea {
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-md);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-sm);
    font-size: 14px;
    resize: vertical;
}

/* SOP checkbox label */
.tb-sop-label {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    cursor: pointer;
    font-size: var(--font-sm);
}

/* SOP checkbox */
.tb-sop-checkbox {
    width: 16px;
    height: 16px;
}

/* SOP template selector wrapper */
.tb-sop-selector {
    display: none;
    margin-top: var(--spacing-sm);
}

.tb-sop-selector.tb-visible {
    display: block;
}
/* ColleaguesPage */
.cp-page { max-width: 780px; margin: 0 auto; padding: 32px 24px; height: 100%; overflow-y: auto; }
.cp-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.cp-title { font-size: var(--font-lg); font-weight: var(--font-weight-semibold); color: var(--gray-900); margin: 0; }
.cp-add-btn { font-size: var(--font-sm); padding: 6px 16px; }
.cp-desc { font-size: var(--font-sm); color: var(--gray-500); margin-bottom: 20px; }
.cp-empty { text-align: center; color: var(--gray-400); padding: 40px 0; }
.cp-table-wrap { background: var(--surface); border: 1px solid var(--gray-200); border-radius: var(--radius-lg); overflow: hidden; }
.cp-table { width: 100%; border-collapse: collapse; }
.cp-table th { text-align: left; padding: 10px 16px; font-size: 12px; font-weight: 600; color: var(--gray-500); text-transform: uppercase; letter-spacing: 0.5px; background: var(--gray-50); border-bottom: 1px solid var(--gray-200); }
.cp-table td { padding: 10px 16px; font-size: var(--font-sm); color: var(--gray-700); border-bottom: 1px solid var(--gray-100); }
.cp-table tr:last-child td { border-bottom: none; }
.cp-table tr:hover td { background: var(--gray-50); }
.cp-table-avatar { display: inline-flex; width: 28px; height: 28px; border-radius: var(--radius-full); background: var(--brand-primary-light); color: var(--brand-primary); align-items: center; justify-content: center; font-size: 13px; font-weight: 600; margin-right: 8px; vertical-align: middle; }
.cp-table-id { font-size: 12px; color: var(--gray-400); font-family: monospace; }
.cp-role-badge { font-size: 11px; padding: 2px 8px; border-radius: 10px; font-weight: 500; }
.cp-role-admin { background: var(--color-error-light); color: var(--color-error); }
.cp-role-leader { background: var(--color-warning-light); color: #92400e; }
.cp-role-teacher { background: var(--color-info-light); color: var(--color-info); }
/* Legacy card classes kept for compatibility */
.cp-card { display: flex; align-items: center; gap: 14px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--gray-200); border-radius: var(--radius-md); margin-bottom: 8px; }
.cp-avatar { width: 36px; height: 36px; font-size: 15px; flex-shrink: 0; }
.cp-info { flex: 1; min-width: 0; }
.cp-name { font-weight: var(--font-weight-medium); color: var(--gray-900); font-size: var(--font-base); }
.cp-meta { font-size: var(--font-xs); color: var(--gray-500); margin-top: 2px; }
.cp-actions { display: flex; gap: 6px; flex-shrink: 0; }
.cp-btn-sm { font-size: 12px; padding: 4px 10px; }
.cp-input-readonly { background: var(--surface-secondary); color: var(--gray-500); }


/* === GanttChart === */

/* Toolbar: zoom button group (left) */
.gc-toolbar-group {
    display: flex;
    gap: var(--spacing-xs);
}

/* Toolbar: right actions group */
.gc-toolbar-right {
    margin-left: auto;
    display: flex;
    gap: 6px;
    align-items: center;
}

/* Main flex container (left panel + timeline) */
.gc-main {
    display: flex;
    flex: 1;
    overflow: hidden;
    position: relative;
}

/* Left header cell: flexible (task name) */
.gc-left-header-main {
    flex: 1;
}

/* Left header cell: fixed width (progress) */
.gc-left-header-progress {
    width: 90px;
}

/* Left panel row spacer (indent placeholder) */
.gc-left-spacer {
    width: 15px;
    flex-shrink: 0;
}

/* Hidden-task popup: item row */
.gc-hidden-task-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 0;
    border-bottom: 1px solid var(--gray-100);
}

/* Hidden-task popup: task name */
.gc-hidden-task-name {
    font-size: var(--font-sm);
}

/* Hidden-task popup: action buttons */
.gc-hidden-task-actions {
    display: flex;
    gap: 6px;
}

/* Hidden-task popup: restore button */
.gc-hidden-task-btn {
    font-size: 11px;
    padding: 2px 8px;
    color: var(--brand-primary);
}

/* Hidden-task popup: delete button */
.gc-hidden-delete-btn {
    font-size: 11px;
    padding: 2px 8px;
}

/* Hidden-task popup: scrollable list container */
.gc-hidden-popup {
    max-height: 300px;
    overflow-y: auto;
}
/* ListView */
.lv-expand-btn { cursor: pointer; display: inline-flex; }
.lv-progress-task { width: 60px; height: 6px; }
.lv-progress-fill-task { /* dynamic width kept inline */ }
.lv-progress-pct { font-size: 11px; margin-left: 6px; color: var(--gray-500); }
.lv-btn-xs { padding: 2px 6px; font-size: 11px; }
.lv-subtask-cell { padding-left: var(--spacing-xl); color: var(--gray-600); }
.lv-progress-sub { width: 50px; height: 4px; }
.lv-progress-pct-sub { font-size: 10px; margin-left: 4px; color: var(--gray-500); }
.lv-sort-icon { font-size: 10px; }

/* KanbanBoard */
.kb-outer { padding: var(--spacing-md); }
.kb-status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; }
.kb-empty-col { text-align: center; padding: 30px; color: var(--gray-400); font-size: 12px; }
.kb-card-title-row { display: flex; justify-content: space-between; align-items: center; }
.kb-expand-btn { cursor: pointer; font-size: 11px; color: var(--gray-400); flex-shrink: 0; padding: 2px 4px; }
.kb-subtask-title { font-size: 12px; color: var(--gray-600); }
.kb-avatar-xs { width: 16px; height: 16px; font-size: 8px; }
.kb-meta-sm { font-size: 11px; }
.kb-subtask-progress { margin-top: 4px; }
.kb-progress-thin { height: 3px; }
.kb-progress-text-xs { font-size: 10px; }


/* Missing classes from agent work */
.cp-modal-input { width: 100%; padding: 8px 12px; border: 1px solid var(--gray-200); border-radius: 4px; font-size: 14px; }
.cp-modal-input-readonly { background: var(--surface-secondary); color: var(--gray-500); }
.ps-pick-list { /* container for pick modal items */ }

/* ===== LeaderOverview ===== */
.ov-li-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.ov-li-actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}
.ov-btn-hide,
.ov-btn-del {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 14px;
    padding: 2px;
}
.ov-btn-del {
    color: var(--status-overdue);
}
.ov-li-hidden-tag {
    color: var(--color-warning);
}
.ov-eval-upload-error {
    color: var(--status-overdue);
}

/* ===== StatsDashboard ===== */
.sd-completed-count { color: var(--color-success); }
.sd-empty-period { font-size: 12px; color: var(--gray-400); padding: 8px 0; }
.sd-alert-overdue { background: var(--color-error-bg); color: var(--color-error); }
.sd-alert-blocked { background: var(--color-warning-bg); color: var(--color-warning); }
.sd-alert-due-soon { background: var(--color-orange-light); color: var(--color-orange); }
.sd-alert-no-assignee { background: var(--gray-50); color: var(--gray-400); }
.sd-form-select { padding: 4px 8px; border: 1px solid var(--gray-200); border-radius: 4px; font-size: var(--font-sm); }
.sd-report-row { display: flex; gap: 8px; align-items: center; }
.sd-overdue-row { color: var(--color-error); }
.sd-btn-today {
    font-size: 11px;
    padding: 2px 8px;
}
.sd-daily-chart-wrap {
    height: 220px;
}
.sd-scale-toggle {
    display: flex;
    gap: 4px;
    margin-bottom: 16px;
}
.sd-stat-completed {
    color: var(--color-success);
}
.sd-person-empty {
    font-size: 12px;
    color: var(--gray-400);
    padding: 8px 0;
}
.sd-clickable {
    cursor: pointer;
}

/* ===== LoginPage ===== */
.lp-hidden { display: none; }

/* ===== Changelog ===== */
.cl-badge-hidden { display: none; }

.tb-visible { display: flex; }

/* Button size variants */
.btn-xs { font-size: 11px; padding: 2px 6px; }

/* Unified empty state */
.empty-state {
    text-align: center;
    padding: 40px 16px;
    color: var(--gray-400);
    font-size: var(--font-sm);
}
.empty-state-icon {
    font-size: 32px;
    margin-bottom: 12px;
}
.empty-state-text {
    font-size: var(--font-sm);
    color: var(--gray-400);
}

/* Unified badge system — use .badge with status modifier */
.badge-pending, .list-status-badge.s-pending, .ov-badge.pending {
    background: var(--gray-100); color: var(--gray-600);
}
.badge-progress, .list-status-badge.s-in_progress, .ov-badge.in_progress {
    background: var(--brand-primary-light); color: var(--brand-primary);
}
.badge-done, .list-status-badge.s-completed, .ov-badge.completed {
    background: var(--color-success-light); color: var(--status-done);
}
.badge-overdue, .list-status-badge.s-overdue, .ov-badge.overdue {
    background: var(--color-error-light); color: var(--status-overdue);
}

/* Progress bar size variants */
.progress-bar-sm { height: 4px; }
.progress-bar { height: 6px; }
.progress-bar-lg { height: 8px; }


/* ===== RESTORED: Missing classes from duplicate cleanup ===== */

/* GanttChart toolbar */
.gantt-toolbar {
    display: flex;
    align-items: center;
    padding: 6px 12px;
    background: var(--surface);
    border-bottom: 1px solid var(--gray-200);
    gap: 8px;
}
.zoom-btn {
    padding: 4px 12px;
    font-size: 12px;
    border: 1px solid var(--gray-200);
    border-radius: 4px;
    background: var(--surface);
    cursor: pointer;
    color: var(--gray-600);
    transition: all 0.15s;
}
.zoom-btn:hover { background: var(--surface-hover); border-color: var(--gray-300); }
.zoom-btn.active { background: var(--brand-primary); color: white; border-color: var(--brand-primary); }
.zoom-pct-label { font-size: 13px; font-weight: 600; color: var(--gray-700); min-width: 40px; text-align: center; user-select: none; }
.gc-hidden-badge { font-size: 12px; color: var(--color-warning); background: var(--color-warning-light); padding: 3px 10px; border-radius: 4px; font-weight: 500; }
/* Hidden tasks section */
.gc-hidden-section { margin-top: 8px; border-top: 1px solid var(--gray-200); background: var(--surface); border-radius: 0 0 8px 8px; }
.gc-hidden-header { display: flex; align-items: center; gap: 6px; padding: 8px 12px; cursor: pointer; font-size: 13px; color: var(--gray-500); user-select: none; }
.gc-hidden-header:hover { background: var(--surface-hover); }
.gc-hidden-toggle-icon { font-size: 10px; transition: transform 0.15s; }
.gc-hidden-body { border-top: 1px solid var(--gray-100); }
.gc-hidden-row { display: flex; align-items: center; padding: 6px 12px; gap: 10px; border-bottom: 1px solid var(--gray-100); opacity: 0.7; }
.gc-hidden-row:hover { opacity: 1; background: var(--surface-hover); }
.gc-hidden-name { font-size: 13px; color: var(--gray-700); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-decoration: line-through; }
.gc-hidden-meta { font-size: 11px; color: var(--gray-400); white-space: nowrap; }
.gc-hidden-actions { display: flex; gap: 4px; flex-shrink: 0; }
.show-hidden-btn { color: var(--color-warning); border-color: var(--color-warning); }
.show-hidden-btn:hover { background: var(--color-warning-light); }

/* ListView */
.lv-col-check { width: 32px; }
.lv-col-actions { width: 100px; }
.lv-btn-row { padding: 2px 6px; font-size: 11px; }
.lv-progress-bar { width: 60px; height: 6px; }
.lv-subtask-name { padding-left: var(--spacing-xl); color: var(--gray-600); }
.lv-subtask-pct { font-size: 10px; margin-left: 4px; color: var(--gray-500); }
.lv-subtask-progress-bar { width: 50px; height: 4px; }
.task-name-cell { font-weight: 500; }

/* KanbanBoard */
.kb-wrapper { padding: var(--spacing-md); }
.kb-empty-msg { text-align: center; padding: 30px; color: var(--gray-400); font-size: 12px; }
.kb-subtask-avatar { width: 16px; height: 16px; font-size: 8px; }
.kb-subtask-date { font-size: 11px; }
.kb-subtask-progress-bar { height: 3px; }
.kb-subtask-progress-section { margin-top: 4px; }
.kb-subtask-progress-text { font-size: 10px; }

/* ColleaguesPage */
.colleague-card { transition: box-shadow 0.15s; }
.colleague-card:hover { box-shadow: var(--shadow-sm); }
.cp-action-btn { font-size: 12px; padding: 4px 10px; }

/* Changelog */
.cl-entry { margin-bottom: 20px; }
.cl-title { font-size: 15px; font-weight: 600; color: var(--gray-800); margin-bottom: 4px; }
.cl-date { font-size: 11px; color: var(--gray-400); margin-bottom: 8px; }
.cl-items { margin: 0; padding-left: 18px; font-size: var(--font-sm); color: var(--gray-600); line-height: 1.8; }

/* StatsDashboard */
.stats-body { padding: 16px 0; }
.stats-card-blue { background: var(--color-info-bg); border-left: 3px solid var(--color-info); }
.stats-card-green { background: var(--color-success-bg); border-left: 3px solid var(--color-success); }
.stats-card-red { background: var(--color-error-bg); border-left: 3px solid var(--color-error); }

/* LeaderOverview */
.ov-list-action { display: inline-flex; align-items: center; justify-content: center; padding: 2px; cursor: pointer; border-radius: 3px; }
.ov-list-action:hover { background: var(--surface-hover); }
.ov-eval-file-bar { height: 4px; background: var(--gray-200); border-radius: 2px; overflow: hidden; }

/* TaskDimensionView / PersonDimensionView shared */
.ov-deliv-icon { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border-radius: 4px; background: var(--surface-secondary); flex-shrink: 0; }
.ov-deliv-preview { max-width: 120px; max-height: 80px; border-radius: 4px; object-fit: cover; cursor: pointer; }
.ov-sub-del-btn { opacity: 0; transition: opacity 0.15s; }
.ov-sub-complete-btn { opacity: 0; transition: opacity 0.15s; background: var(--color-success); color: white; border: none; border-radius: 4px; width: 22px; height: 22px; font-size: 13px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.ov-sub:hover .ov-sub-complete-btn { opacity: 0.7; }
.ov-sub:hover .ov-sub-complete-btn:hover { opacity: 1; }

/* Navbar user */
.navbar-user { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--gray-600); cursor: pointer; }

/* SOP reused classes */
.sop-del-name { font-size: 13px; }
.duration { font-size: 11px; color: var(--gray-500); }
.time { font-size: 12px; color: var(--gray-600); }

/* Remaining missing classes */
.colleague-edit { cursor: pointer; }
.colleague-delete { cursor: pointer; }
.kanban-task-card { cursor: pointer; transition: box-shadow 0.15s; }
.kanban-task-card:hover { box-shadow: var(--shadow-md); }

/* ===== DetailPanel Redesign ===== */

/* Hero status bar */
.dp-hero {
  padding: 12px 16px;
  background: var(--surface-secondary);
  border-bottom: 1px solid var(--gray-200);
  margin-bottom: 8px;
}
.dp-hero-sub {
  border-left: 4px solid var(--brand-primary);
}
.dp-hero-sub.completed { border-left-color: var(--status-done); background: var(--color-success-bg); }
.dp-hero-sub.in_progress { border-left-color: var(--brand-primary); background: var(--brand-primary-bg); }
.dp-hero-sub.pending { border-left-color: var(--gray-300); }
.dp-hero-sub.blocked { border-left-color: var(--status-overdue); background: var(--color-error-bg); }

.dp-hero-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--font-sm);
  color: var(--gray-600);
  margin-bottom: 8px;
}
.dp-hero-assignee { font-weight: var(--font-weight-semibold); color: var(--gray-800); }
.dp-hero-dates { color: var(--gray-500); }
.dp-hero-progress {
  display: flex;
  align-items: center;
  gap: 10px;
}
.dp-hero-pct {
  font-size: var(--font-md);
  font-weight: var(--font-weight-semibold);
  color: var(--gray-800);
  min-width: 42px;
}

/* Status icons */
.dp-hero-status {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.dp-status-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
  font-size: 14px;
  font-weight: bold;
}
.dp-status-icon.completed { background: var(--color-success-light); color: var(--status-done); }
.dp-status-icon.in_progress { background: var(--brand-primary-light); color: var(--brand-primary); }
.dp-status-icon.pending { background: var(--gray-100); color: var(--gray-500); }
.dp-status-icon.blocked { background: var(--color-error-light); color: var(--status-overdue); }

.dp-status-text {
  font-size: var(--font-md);
  font-weight: var(--font-weight-semibold);
}
.dp-status-text.completed { color: var(--status-done); }
.dp-status-text.in_progress { color: var(--brand-primary); }
.dp-status-text.pending { color: var(--gray-500); }
.dp-status-text.blocked { color: var(--status-overdue); }

/* Back link */
.dp-back-link {
  padding: 8px 16px;
  font-size: var(--font-sm);
  color: var(--brand-primary);
  cursor: pointer;
  border-bottom: 1px solid var(--gray-200);
  margin-bottom: 8px;
}
.dp-back-link:hover { text-decoration: underline; }

/* Collapsible sections */
.dp-section {
  border-bottom: 1px solid var(--gray-100);
}
.dp-section-header {
  display: flex;
  align-items: center;
  padding: 10px 16px;
  cursor: pointer;
  font-size: var(--font-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--gray-700);
  gap: 8px;
  user-select: none;
}
.dp-section-header:hover { background: var(--surface-hover); }
.dp-section-toggle {
  margin-left: auto;
  font-size: 10px;
  color: var(--gray-400);
  transition: transform 0.2s;
}
.dp-section-badge {
  font-size: 11px;
  font-weight: normal;
  color: var(--gray-500);
  background: var(--gray-100);
  padding: 1px 6px;
  border-radius: 10px;
}
.dp-section-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out, padding 0.3s ease-out;
  padding: 0 16px;
}
.dp-section-body.open {
  max-height: 10000px;
  padding: 0 16px 12px;
}

/* Actions bar (anchored to panel bottom) */
.dp-actions-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--gray-200);
  background: var(--surface);
  flex-wrap: wrap;
  flex-shrink: 0;
}

/* SOP action buttons in dp-actions-bar */
.dp-actions-bar .btn-start { background: var(--sop-start); color: white; border: none; padding: 6px 14px; border-radius: var(--radius-sm); font-size: 13px; font-weight: 600; cursor: pointer; }
.dp-actions-bar .btn-start:hover { background: var(--sop-start-hover); }
.dp-actions-bar .btn-complete { background: var(--sop-complete); color: white; border: none; padding: 6px 14px; border-radius: var(--radius-sm); font-size: 13px; font-weight: 600; cursor: pointer; }
.dp-actions-bar .btn-complete:hover { background: var(--sop-complete-hover); }
.dp-actions-bar .btn-record { background: var(--sop-record); color: white; border: none; padding: 6px 14px; border-radius: var(--radius-sm); font-size: 13px; font-weight: 600; cursor: pointer; }
.dp-actions-bar .btn-record:hover { background: var(--sop-record-hover); }
.dp-actions-bar .btn-block { background: var(--sop-block-light); color: var(--status-overdue); border: 1px solid var(--status-overdue); padding: 5px 13px; border-radius: var(--radius-sm); font-size: 13px; font-weight: 600; cursor: pointer; }
.dp-actions-bar .btn-block:hover { background: var(--color-error-light); }
.dp-actions-bar .btn-unblock { background: var(--color-success-light); color: var(--status-done); border: 1px solid var(--status-done); padding: 5px 13px; border-radius: var(--radius-sm); font-size: 13px; font-weight: 600; cursor: pointer; }
.dp-actions-bar .btn-unblock:hover { background: var(--color-success); color: white; }
.dp-actions-bar .btn-ghost { background: transparent; color: var(--gray-600); border: 1px solid var(--gray-300); padding: 5px 13px; border-radius: var(--radius-sm); font-size: 13px; font-weight: 500; cursor: pointer; }
.dp-actions-bar .btn-ghost:hover { background: var(--gray-50); }

/* ===== Overview Redesign ===== */

/* KPI Cards */
.ov-kpi-row {
    display: flex;
    gap: 12px;
    padding: 12px 16px;
    background: var(--surface);
    border-bottom: 1px solid var(--gray-200);
}
.ov-kpi-card {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 8px;
    background: var(--gray-50);
    border-radius: var(--radius-md);
    border: 1px solid var(--gray-100);
}
.ov-kpi-num {
    font-size: 24px;
    font-weight: var(--font-weight-semibold);
    color: var(--gray-800);
    line-height: 1.2;
}
.ov-kpi-label {
    font-size: 11px;
    color: var(--gray-500);
    margin-top: 2px;
}
.ov-kpi-done { background: var(--color-success-bg); border-color: var(--color-success-light); }
.ov-kpi-done .ov-kpi-num { color: var(--status-done); }
.ov-kpi-overdue { background: var(--color-error-bg); border-color: var(--color-error-light); }
.ov-kpi-overdue .ov-kpi-num { color: var(--status-overdue); }

/* Enhanced list items */
.ov-li-assignee {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--font-xs);
    color: var(--gray-500);
    margin-top: 4px;
}
.ov-li-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: var(--radius-full);
    background: var(--brand-primary);
    color: white;
    font-size: 10px;
    font-weight: var(--font-weight-semibold);
}
.ov-li-assignee-name {
    color: var(--gray-700);
    font-weight: var(--font-weight-medium);
}
.ov-li-dates {
    margin-left: auto;
    font-size: 11px;
    color: var(--gray-400);
}

/* ===== Kanban Redesign ===== */
.kanban-task-card { position: relative; }
.kanban-task-card.kb-card-overdue { border-left: 3px solid var(--status-overdue); }
.kb-card-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kb-card-meta-row { display: flex; align-items: center; gap: 4px; }
.kb-assignee-name { font-size: var(--font-xs); color: var(--gray-600); }
.kb-avatar { background: var(--brand-primary); color: white; }
.kb-card-dates { margin-left: auto; font-size: 10px; color: var(--gray-400); }
.card-completed { opacity: 0.7; }

/* ===== ListView Redesign ===== */
.list-table th { font-size: var(--font-xs); font-weight: var(--font-weight-semibold); color: var(--gray-500); text-transform: uppercase; letter-spacing: 0.3px; }
.lv-assignee-cell { font-size: var(--font-xs); color: var(--gray-600); }
.subtask-row { background: var(--gray-50); }
.subtask-row td { border-top: 1px solid var(--gray-100); }

/* ===== Stats Redesign ===== */

/* KPI cards - bigger numbers */
.stats-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 10px;
    margin-bottom: 16px;
}
.stats-card {
    background: var(--surface);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    padding: 16px 12px;
    text-align: center;
    transition: box-shadow 0.15s;
}
.stats-card:hover { box-shadow: var(--shadow-sm); }
.stats-card-value {
    font-size: 28px;
    font-weight: 700;
    color: var(--gray-800);
    line-height: 1.1;
}
.stats-card-label {
    font-size: 11px;
    color: var(--gray-500);
    margin-top: 4px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* Chart containers - card wrappers */
.stats-chart-card {
    background: var(--surface);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    padding: 16px;
    margin-bottom: 12px;
}
.stats-chart-card h4 {
    font-size: var(--font-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--gray-700);
    margin-bottom: 12px;
}

/* Stats tab navigation */
.stats-tab-btn {
    font-size: var(--font-sm);
    padding: 8px 16px;
}