/* Systema Web 壳样式：绿色主题，两栏布局，还原桌面版观感 */

* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --primary: #5cb85c;
  --primary-dark: #449d44;
  --danger: #d9534f;
  --warn: #f0ad4e;
  --info: #337ab7;
  --bg: #f5f7f5;
  --panel-bg: #ffffff;
  --border: #dde4dd;
  --text: #333333;
  --muted: #888888;
  --disabled-bg: #f0f0f0;
}

html, body { height: 100%; }

body {
  font-family: "Microsoft YaHei", "PingFang SC", "Segoe UI", sans-serif;
  font-size: 14px;
  color: var(--text);
  background: var(--bg);
}

#app { display: flex; flex-direction: column; height: 100vh; }

/* ---------- 开始页 ---------- */
.splash {
  position: fixed;
  inset: 0;
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  transition: opacity .4s ease;
}
.splash.hide { opacity: 0; pointer-events: none; }
.splash-inner { text-align: center; }
.logo {
  font-size: 64px;
  font-weight: 700;
  color: var(--primary);
  letter-spacing: 2px;
}
.logo::after {
  content: "";
  display: block;
  width: 56px;
  height: 3px;
  margin: 16px auto 0;
  border-radius: 2px;
  background: var(--primary);
  opacity: .4;
}
.slogan { margin-top: 20px; font-size: 18px; color: var(--text); letter-spacing: 6px; }
.intro { margin-top: 10px; font-size: 13px; color: var(--muted); letter-spacing: 1px; }
.btn-enter {
  margin-top: 40px;
  padding: 10px 56px;
  font-size: 16px;
  color: #fff;
  background: var(--primary);
  border: none;
  border-radius: 24px;
  cursor: pointer;
  transition: background .2s, transform .1s;
}
.btn-enter:hover { background: var(--primary-dark); }
.btn-enter:active { transform: scale(.97); }

/* ---------- 顶栏 ---------- */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 52px;
  padding: 0 18px;
  background: var(--primary);
  color: #fff;
  flex-shrink: 0;
}
.topbar h1 { font-size: 18px; font-weight: 600; }
.topbar .sub { font-size: 12px; font-weight: 400; margin-left: 10px; opacity: .85; }
.topbar-right { display: flex; align-items: center; gap: 10px; }
.topbar-right .user-name { font-size: 13px; opacity: .95; max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar-right .btn {
  border: 1px solid rgba(255,255,255,.6);
  background: transparent;
  color: #fff;
  border-radius: 6px;
  padding: 3px 10px;
  font-size: 12px;
  cursor: pointer;
}
.topbar-right .btn:hover { background: rgba(255,255,255,.18); }
.conn-ok { font-size: 12px; opacity: .9; }
.conn-err { color: #ffe0e0; }

/* ---------- 布局 ---------- */
.layout { display: flex; flex: 1; min-height: 0; }

/* ---------- 左面板 ---------- */
.panel {
  width: 268px;
  flex-shrink: 0;
  background: var(--panel-bg);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
}

.mode-tabs { display: flex; padding: 8px; gap: 6px; border-bottom: 1px solid var(--border); }
.mode-btn {
  flex: 1;
  padding: 7px 0;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #fff;
  color: var(--text);
  cursor: pointer;
  font-size: 13px;
}
.mode-btn:hover { background: #f2f8f2; }
.mode-btn.active { background: var(--primary); border-color: var(--primary); color: #fff; }

.list-head {
  padding: 10px 14px 6px;
  font-size: 12px;
  color: var(--muted);
}

.item-list {
  list-style: none;
  overflow-y: auto;
  flex: 1;
  padding: 0 8px;
}
.item-list li {
  padding: 8px 10px;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid transparent;
  margin-bottom: 3px;
}
.item-list li:hover { background: #f2f8f2; }
.item-list li.active { background: #e8f5e9; border-color: var(--primary); }
.item-list .badge {
  font-size: 11px;
  color: var(--muted);
  background: #f0f0f0;
  border-radius: 10px;
  padding: 1px 8px;
  flex-shrink: 0;
  margin-left: 6px;
}

.list-ops {
  display: flex;
  gap: 6px;
  padding: 8px;
  border-top: 1px solid var(--border);
}
.list-ops button {
  flex: 1;
  padding: 6px 0;
  font-size: 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
}
.list-ops button:hover { background: #f2f8f2; }

/* ---------- 工作区 ---------- */
.workspace {
  flex: 1;
  overflow-y: auto;
  padding: 18px 22px;
  background: var(--bg);
}
.placeholder { color: var(--muted); text-align: center; margin-top: 60px; }

/* ---------- 通用控件 ---------- */
button.btn {
  padding: 7px 14px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
  font-size: 13px;
}
button.btn:hover:not(:disabled) { background: #f2f8f2; }
button.btn:disabled { opacity: .5; cursor: not-allowed; }
button.btn.primary { background: var(--primary); border-color: var(--primary); color: #fff; }
button.btn.primary:hover:not(:disabled) { background: var(--primary-dark); }
button.btn.danger { color: var(--danger); border-color: #e5b5b3; }
button.btn.danger:hover:not(:disabled) { background: #fdf2f2; }

.card {
  background: var(--panel-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 14px;
}

.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.card-title { font-size: 15px; font-weight: 600; }
.card-sub { font-size: 12px; color: var(--info); margin-left: 10px; font-weight: 400; }

/* 行式信息 */
.info-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.info-row .lbl { color: var(--muted); font-size: 12px; }
.info-row .val { font-size: 13px; }
.info-row .val.unset { color: var(--muted); }

/* ---------- 进度条 ---------- */
.progress {
  height: 18px;
  background: #eee;
  border-radius: 9px;
  overflow: hidden;
  margin: 8px 0;
}
.progress-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #5cb85c, #8bc34a);
  transition: width .4s ease;
}
.progress-text { font-size: 12px; color: var(--muted); margin-bottom: 8px; }

/* ---------- Flag 双模式 ---------- */
.section-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--primary-dark);
  margin: 14px 0 8px;
  padding-top: 12px;
  border-top: 1px dashed var(--border);
}
.section-title:first-of-type { border-top: none; padding-top: 0; }
.select-tip { font-size: 12px; color: var(--muted); margin-bottom: 12px; }
.mode-options { display: flex; flex-direction: column; gap: 12px; }
.mode-option {
  display: block;
  width: 100%;
  text-align: left;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
  padding: 16px;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.mode-option:hover:not(:disabled) { border-color: var(--primary); background: #f7fbf7; }
.mode-option:disabled { opacity: .55; cursor: not-allowed; }
.mode-option-name { font-size: 15px; font-weight: 600; color: var(--primary); }
.mode-option-desc { font-size: 12px; color: var(--muted); margin-top: 6px; line-height: 1.6; }
.dur-input { display: inline-flex; align-items: center; gap: 4px; }
.dur-input input[type="number"] {
  width: 60px;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 8px;
  font-size: 13px;
  outline: none;
}
.dur-input input[type="number"]:focus { border-color: var(--primary); }
.dur-input input[type="number"]:disabled { background: var(--disabled-bg); }
.dur-input .unit { font-size: 12px; color: var(--muted); margin-right: 8px; }

/* ---------- 表格 ---------- */
.table-wrap { overflow-x: auto; }
table.data-table { border-collapse: collapse; width: 100%; }
.data-table th, .data-table td {
  border: 1px solid var(--border);
  padding: 7px 10px;
  font-size: 13px;
  text-align: left;
}
/* 统一行高与内边距：进入编辑后格子变按钮，固定单元格高度/宽度，避免行被撑高、编辑/非编辑切换跳变 */
.data-table td {
  height: 40px;
  padding: 3px;  /* 与编辑态 td.cell-btn 一致，避免退出编辑后列宽变化 */
  text-align: center;  /* 有内容与空值横线统一居中 */
  vertical-align: middle;
}
.data-table th { background: #f2f8f2; font-weight: 600; white-space: nowrap; text-align: center; color: var(--muted); }
.data-table td.empty { text-align: center; }
.data-table td.empty .empty-val { color: #bbb; }
.data-table td input {
  width: 100%;
  border: 1px solid #cde3cd;
  border-radius: 4px;
  padding: 3px 6px;
  font-size: 13px;
  outline: none;
}
.data-table td input:focus { border-color: var(--primary); }
.data-table .row-idx { color: var(--muted); width: 40px; text-align: center; }
/* 编辑模式：格子呈按钮样式 */
.data-table td.cell-btn {
  padding: 3px;
  text-align: center;
  background: #fcfdfc;
  cursor: pointer;
}
.data-table td.cell-btn:hover { background: #eef7ee; }
.data-table .cell-thumb {
  display: inline-block;
  box-sizing: border-box;
  width: 70px;  /* 固定宽度：缩略显示（最多 2 字+…）足够容纳，列宽不再随内容变化；原 56px 加宽四分之一 */
  max-width: 100%;
  padding: 5px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #fff;
  font-size: 13px;
  color: var(--text);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}
.data-table td.cell-btn:hover .cell-thumb { border-color: var(--primary); color: var(--primary); }
.data-table td.cell-btn .cell-thumb.empty-val { color: #bbb; }
/* 表格工具：列/行选中高亮 + 底部行操作区 */
.data-table [data-col].sel { background: #e2f0e2; }
.data-table tbody tr.sel td { background: #f0f8f0; }
.data-table thead th[data-col] { cursor: pointer; user-select: none; }
.data-table thead th[data-col]:hover { background: #e8f2e8; }
.table-ops { display: flex; gap: 6px; margin-top: 10px; align-items: center; }
.tb-tools { display: flex; gap: 6px; align-items: center; }
.tb-count { font-size: 13px; color: var(--muted); margin-right: 2px; }
/* 操作区按钮统一尺寸 */
.tb-tools .btn, .table-ops .btn { min-width: 92px; padding: 7px 12px; text-align: center; }

/* ---------- 编辑区 ---------- */
textarea {
  width: 100%;
  min-height: 180px;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px;
  font-size: 13px;
  line-height: 1.6;
  resize: vertical;
  font-family: inherit;
  outline: none;
}
textarea:focus { border-color: var(--primary); }
textarea[readonly] { background: var(--disabled-bg); }

input[type="text"], input[type="datetime-local"] {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 7px 10px;
  font-size: 13px;
  outline: none;
}
input:focus { border-color: var(--primary); }

/* ---------- Flag 状态 ---------- */
.status-pill {
  display: inline-block;
  padding: 2px 12px;
  border-radius: 12px;
  font-size: 12px;
  background: #eee;
  color: #666;
}
.status-pill.created { background: #e8f5e9; color: #2e7d32; }
.status-pill.running { background: #e3f2fd; color: #1565c0; }
.status-pill.paused  { background: #fff3e0; color: #e65100; }
.status-pill.finished{ background: #e8f5e9; color: #2e7d32; }
.status-pill.discarded{ background: #fdecea; color: #c62828; }

/* ---------- 便签 ---------- */
.note-status { font-size: 12px; color: var(--muted); }

/* ---------- 单元格编辑模态框（便签式） ---------- */
.cell-modal {
  position: fixed;
  inset: 0;
  z-index: 950;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, .35);
}
.cell-modal.hidden { display: none; }
.cell-modal-box {
  width: min(560px, 90vw);
  background: #fff;
  border-radius: 10px;
  padding: 16px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .18);
}
.cell-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.cell-modal-head .btn { padding: 5px 14px; font-size: 12px; }
#cell-modal-title { font-size: 14px; font-weight: 600; }
.cell-modal-box textarea { min-height: 200px; }
.cell-modal-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
}
.cell-modal-hint { font-size: 12px; color: var(--muted); }
.cell-modal-count { margin-left: 8px; font-weight: 600; color: #1989fa; font-variant-numeric: tabular-nums; }

/* ---------- 通用对话框（模态框引擎 modal.js） ---------- */
.dialog {
  position: fixed;
  inset: 0;
  z-index: 970;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, .35);
}
.dialog.hidden { display: none; }
.dialog-box {
  width: min(420px, 90vw);
  background: #fff;
  border-radius: 10px;
  padding: 18px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .18);
}
.dialog-head { margin-bottom: 12px; }
#dialog-title { font-size: 15px; font-weight: 600; }
.dialog-message {
  font-size: 13px;
  line-height: 1.7;
  color: var(--text);
  white-space: pre-line;  /* 支持 \n 换行 */
  word-break: break-all;
  margin-bottom: 14px;
}
.dialog-input {
  width: 100%;
  margin-bottom: 14px;
}
.dialog-count {
  display: block;
  margin: -10px 0 12px;
  font-size: 12px;
  color: #1989fa;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.dialog-select {
  width: 100%;
  margin-bottom: 14px;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 7px 10px;
  font-size: 13px;
  outline: none;
  background: #fff;
}
.dialog-buttons { display: flex; flex-direction: column; gap: 8px; }
.dialog-btn {
  width: 100%;
  padding: 9px 0;
  font-size: 13px;
  text-align: center;
}
.dialog-btn.cancel { color: var(--muted); background: #f5f5f5; border-color: var(--border); }
.dialog-btn.cancel:hover:not(:disabled) { background: #ececec; }
.dialog-btn.danger { color: var(--danger); border-color: #e5b5b3; }
.dialog-btn.danger:hover:not(:disabled) { background: #fdf2f2; }

/* ---------- Toast ---------- */
.toast {
  position: fixed;
  right: 20px;
  bottom: 20px;
  background: rgba(0, 0, 0, .78);
  color: #fff;
  padding: 10px 18px;
  border-radius: 8px;
  font-size: 13px;
  z-index: 999;
  max-width: 420px;
  word-break: break-all;
}
.toast.error { background: rgba(217, 83, 79, .92); }
.toast.hidden { display: none; }

.empty-tip { color: var(--muted); text-align: center; padding: 24px 0; }

/* ---------- 日期时间选择弹层（datetimePicker.js） ---------- */
.dtp {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(0, 0, 0, .35);
  display: flex; align-items: center; justify-content: center;
}
.dtp.hidden { display: none; }
.dtp-box {
  width: min(320px, 92vw);
  background: #fff; border-radius: 12px; padding: 14px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .2);
  user-select: none;
}
.dtp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.dtp-title { font-size: 14px; font-weight: 600; }
.dtp-head .btn { padding: 2px 10px; font-size: 14px; }
.dtp-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.dtp-nav-btn { min-width: 30px; padding: 2px 8px; font-size: 15px; }
.dtp-ym { flex: 1; text-align: center; font-size: 14px; font-weight: 600; background: none; border: none; cursor: pointer; padding: 4px; }
.dtp-week { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; font-size: 11px; color: var(--muted); margin-bottom: 4px; }
.dtp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; margin-bottom: 10px; }
.dtp-cell {
  border: none; background: none; padding: 6px 0; font-size: 13px;
  border-radius: 6px; cursor: pointer; color: var(--text);
}
.dtp-cell:hover { background: #eef3ff; }
.dtp-cell.today { color: var(--primary); font-weight: 700; }
.dtp-cell.sel { background: var(--primary); color: #fff; font-weight: 700; }
.dtp-cell.blank { pointer-events: none; }
.dtp-time-row { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; }
.dtp-lbl { font-size: 12px; color: var(--muted); }
.dtp-time-row input[type="number"] {
  width: 52px; border: 1px solid var(--border); border-radius: 6px;
  padding: 5px 8px; font-size: 13px; text-align: center; outline: none;
}
.dtp-time-row input:focus { border-color: var(--primary); }
.dtp-actions { display: flex; gap: 8px; }
.dtp-actions .btn { flex: 1; padding: 8px 0; text-align: center; }

/* 期限模式时间栏：点击整栏弹出日历 */
.flag-time-bar {
  position: relative;
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--border); border-radius: 6px;
  padding: 6px 10px; cursor: pointer; font-size: 13px;
  background: #fff; color: var(--text); min-width: 150px;
}
.flag-time-bar:hover { border-color: var(--primary); }
.flag-time-bar.unset { color: var(--muted); }
.flag-time-bar .cal-ico { color: var(--primary); font-size: 13px; }

/* 通用隐藏类：modal.js/cellEditor.js 通过增删 hidden 控制显隐
   （对话框的输入框/下拉框等组件在不启用时整体隐藏） */
.hidden { display: none !important; }

/* 行号与列号一致：悬停变手指状；进入编辑模式后可点击选中整行 */
.data-table td.row-idx { cursor: pointer; user-select: none; }
.data-table td.row-idx:hover { background: #e8f2e8; }