/* ============================================================
   万能记事 — 电脑端 UI
   全部配色/尺寸/圆角/阴影照抄鸿蒙端 Index.ets 记事页
   ============================================================ */

:root {
  /* 页面底色与分隔线 */
  --page-bg: #F5F5F5;
  --hairline: #E5E5E5;          /* 顶部细分隔线 0.5vp 发丝线 */
  --card-divider: #F0F1F3;      /* 标题与内容之间的细分隔线 */

  /* 品牌绿 */
  --green: #20B878;             /* +号/按钮主色 */
  --green-dark: #2E7D32;        /* 选中标签文字 */
  --green-slider-1: rgba(76, 175, 80, 0.2);   /* 滑块渐变起 */
  --green-slider-2: rgba(129, 199, 132, 0.08); /* 滑块渐变止 */

  /* 文字 */
  --text-main: #333333;         /* 小分类标题 */
  --text-sub: #88938D;          /* 收起/展开、弹窗标签 */
  --text-tab-inactive: #9E9E9E; /* 未选中分类标签 */
  --text-placeholder: #999999;
  --text-seq: #B8C0C8;          /* 内容行序号 */
  --text-done: #8FC8A5;         /* 已处理绿字 */

  /* 卡片 */
  --card-border: #E7E9ED;
  --card-shadow: 0 2px 8px rgba(0, 0, 0, 0.07);   /* #12000000 radius8 offsetY2 */
  --row-odd: #F2F2F2;           /* 内容第1/3/5行（硬行 index 偶数） */
  --row-even: #FFFFFF;          /* 内容第2/4/6行 */
  --dim-odd: rgba(242, 242, 242, 0.75);   /* #C0F2F2F2 已处理遮罩（灰行） */
  --dim-even: rgba(255, 255, 255, 0.75);  /* #C0FFFFFF 已处理遮罩（白行） */

  /* 操作按钮 */
  --edit-blue: #409EFF;
  --del-red: #F56C6C;
  --del-red-weak: #CBA5A5;      /* 弹窗内删除分类弱化红字 */
  --del-bg-weak: #F7F2F2;
  --switch-bg: #F1F4F2;         /* 弹窗切换入口浅灰底 */
  --switch-text: #7A8580;

  /* 弹窗 */
  --mask: rgba(0, 0, 0, 0.25);  /* #40000000 */
  --input-border: #E0E0E0;

  /* 尺寸（照抄鸿蒙数值） */
  --seq-w: 47px;                /* 序号列宽 NOTE_SEQ_W */
  --line-h: 26px;               /* 内容行高 noteLineH */
  --swipe-w: 116px;             /* 左滑露出按钮区总宽 noteSwipeWidth */
  --tab-h: 48px;                /* 分类标签高 */
  --slider-h: 40px;             /* 滑块高 */
  --card-min-h: 44px;           /* 卡片最小高（=操作按钮高） */
}

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

html, body, #app {
  height: 100%;
  overflow: hidden;
}

body {
  font-family: system-ui, "Segoe UI", "Microsoft YaHei", sans-serif;
  background: var(--page-bg);
  color: var(--text-main);
  user-select: none;
  -webkit-user-select: none;
}

/* 可编辑区域允许选中 */
textarea, input { user-select: text; -webkit-user-select: text; }

/* ============ 内容区 ============ */
#content {
  position: absolute;
  inset: 0 0 0 0;
  overflow-y: auto;
  overflow-x: hidden;
	padding: 8px 16px 144px 16px;   /* 底部留白避开 +号（加号底距屏底 76px，加号顶距屏底 132px，留白 ≥ 144px） */
  scrollbar-width: none;
}
#content::-webkit-scrollbar { display: none; }

#cards {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-height: 100%;
  justify-content: flex-end;      /* 内容少时卡片贴底（照抄 FlexAlign.End） */
}

/* ============ 小分类卡片 ============ */
.card {
  position: relative;
  width: 100%;
  flex-shrink: 0;
}

/* 底层操作按钮区（右键卡片唤出，右对齐） */
.card-actions {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: var(--swipe-w);
  display: flex;
  gap: 4px;
  align-items: center;
  justify-content: flex-end;
  padding-right: 4px;
  opacity: 0;
  transition: opacity 0.18s ease-out;
  pointer-events: none;
}
.card.open .card-actions { opacity: 1; pointer-events: auto; }

.card-actions button {
  width: 52px;
  height: 44px;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  font-size: 13px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.card-actions .btn-edit { background: var(--edit-blue); }
.card-actions .btn-del { background: var(--del-red); }

/* 顶层白卡（open = 右键唤出操作按钮，卡片左移露出） */
.card-body {
  position: relative;
  width: 100%;
  min-height: var(--card-min-h);
  background: #FFFFFF;
  border-radius: 12px;
  border: 1px solid var(--card-border);
  box-shadow: var(--card-shadow);
  overflow: hidden;
  transition: transform 0.18s ease-out;
}
.card.open .card-body { transform: translateX(calc(-1 * var(--swipe-w))); }

/* 标题行 */
.card-title {
  display: flex;
  align-items: center;
  width: 100%;
  height: 44px;
  padding: 0 12px;
  cursor: pointer;
}
.card-title .arrow {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: #666;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}
.card-title .name {
  font-size: 16px;
  font-weight: 500;
  color: var(--text-main);
  margin-left: 8px;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.card-title .fold-hint {
  font-size: 12px;
  color: var(--text-sub);
  margin-left: 8px;
  flex-shrink: 0;
}

/* 标题与内容分隔线 */
.card-divider {
  height: 1px;
  background: var(--card-divider);
}

/* ============ 内容区（装饰层 + 透明输入框叠放） ============ */
.note-area {
  position: relative;
  padding: 8px;
}

/* 色带层：JS 逐视觉行渲染的 .band-row（每行 26px，颜色按硬行交替）。
   不用 repeating-linear-gradient 铺满容器——容器高度含 +8 余量，
   渐变会把余量也画成下一段色带，出现"1行显示1行半"的错位 */
.note-bands {
  position: absolute;
  top: 8px; left: 8px; right: 8px;
  pointer-events: none;
}
.band-row { width: 100%; }

/* 序号列：z-index 3 提到最上（盖过 textarea / 遮罩）——
   不然 textarea 后渲染会盖住序号，点击序号实际点到输入框，"变已处理"不触发。
   盖在最上后：序号/绿字不被遮罩遮住，点击命中 span（pointer-events:auto），
   空档穿透（容器 pointer-events:none）落到 textarea */
.note-seq {
  position: absolute;
  top: 8px; left: 8px;
  width: var(--seq-w);
  pointer-events: none;
  z-index: 3;
}
.note-seq .seq-row {
  height: var(--line-h);
  display: flex;
  align-items: center;
  justify-content: center;
}
.note-seq .seq-num {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-seq);
  cursor: pointer;
  pointer-events: auto;
  padding: 0 6px;
}
.note-seq .seq-done {
  font-size: 15px;
  color: var(--text-done);
  pointer-events: auto;
  cursor: pointer;
}

/* 已处理遮罩层：盖在文字上方（z2，在序号层之下）——
   半透明盖住正文行让文字变淡，但不拦截点击（pointer-events:none 穿透给下方 textarea） */
.note-dims {
  position: absolute;
  top: 8px; left: 8px; right: 8px;
  pointer-events: none;
  z-index: 2;
}
.note-dims .dim-row {
  height: var(--line-h);
}

/* 透明输入框 */
.note-input {
  position: relative;
  display: block;            /* textarea 默认 inline-block 底部留行内基线间隙 ~4px，会造成内容区下面比上面高 */
  width: 100%;
  min-height: var(--line-h);
  border: none;
  outline: none;
  resize: none;
  background: transparent;
  font-size: 15px;
  line-height: var(--line-h);
  color: #1A1A1A;
  padding: 0 0 0 var(--seq-w);
  overflow: hidden;
  scrollbar-width: none;
  caret-color: #1A1A1A;
  font-family: inherit;
}
.note-input::-webkit-scrollbar { display: none; }
.note-input::placeholder { color: #BBBBBB; }

/* ============ 底部大分类栏 ============ */
#tabbar {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  background: var(--page-bg);
  border-top: 0.5px solid var(--hairline);
  box-shadow: 0 -4px 14px rgba(0, 0, 0, 0.08);   /* 弹窗浮起式柔影 */
  padding-bottom: 18px;
  z-index: 20;
}

#tabs {
  position: relative;
  display: flex;
  height: var(--tab-h);
  align-items: stretch;
}

/* 共享滑块：浅绿渐变圆角底座（渲染在标签下层） */
#slider {
  position: absolute;
  top: 4px;
  height: var(--slider-h);
  border-radius: 17px;
  background: linear-gradient(135deg, var(--green-slider-1) 0%, var(--green-slider-2) 100%);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.10);   /* #1A000000 radius8 offsetY3 */
  transition: transform 0.25s ease-in-out, width 0.25s ease-in-out;
  pointer-events: none;
  z-index: 0;
}

.tab-item {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--tab-h);
  cursor: pointer;
  position: relative;
  z-index: 1;
  white-space: nowrap;
}
.tab-item .tab-name {
  font-size: 15px;
  padding: 0 8px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tab-item.active .tab-name { color: var(--green-dark); font-weight: 700; }
.tab-item .tab-name { color: var(--text-tab-inactive); font-weight: 500; }

/* ============ 圆形 + 号 ============ */
#addBtn {
  position: absolute;
  right: 16px;
  bottom: calc(var(--tab-h) + 18px + 10px);   /* 贴着大分类栏上沿（电脑端无胶囊，加号下沉到栏上方 10px，同鸿蒙"贴栏上沿+间距"） */
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: none;
  background: var(--green);
  color: #fff;
  font-size: 30px;
  font-weight: 700;
  box-shadow: 0 4px 14px rgba(32, 184, 120, 0.20);  /* #3320B878 radius14 offsetY4 */
  cursor: pointer;
  z-index: 30;
}
#addBtn:hover { filter: brightness(1.05); }
#addBtn:active { transform: scale(0.96); }

/* ============ 手动同步按钮（右上角） ============ */
#syncBtn {
  position: absolute;
  top: 10px;
  right: 14px;
  height: 30px;
  padding: 0 14px;
  border-radius: 15px;
  border: 1px solid var(--green);
  background: transparent;
  color: var(--green);
  font-size: 13px;
  cursor: pointer;
  z-index: 30;
}
#syncBtn:hover { background: #E6F7EF; }
#syncBtn:disabled { opacity: 0.5; cursor: wait; }

/* ============ 弹窗 ============ */
.overlay {
  position: fixed;
  inset: 0;
  background: var(--mask);
  z-index: 100;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0 16px calc(var(--tab-h) + 12px + 18px);
}
.overlay[hidden] { display: none; }

.dialog-card {
  width: 100%;
  background: #fff;
  border-radius: 16px;
  padding: 16px 20px 20px 20px;
  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.20);  /* #33000000 radius24 offsetY-4 */
  display: flex;
  flex-direction: column;
  gap: 12px;
  animation: slideUp 0.22s ease-out;
}
@keyframes slideUp {
  from { transform: translateY(24px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.dialog-head {
  display: flex;
  align-items: center;
  gap: 12px;
}
.dialog-head .dialog-title { font-size: 18px; font-weight: 700; }
.dialog-head .dialog-title.green { color: var(--green); }
.dialog-head .dialog-close {
  margin-left: auto;
  font-size: 18px;
  color: var(--text-placeholder);
  cursor: pointer;
  padding: 2px 4px;
}
.dialog-switch {
  font-size: 13px;
  color: var(--switch-text);
  background: var(--switch-bg);
  border-radius: 13px;
  padding: 5px 10px;
  cursor: pointer;
}
.dialog-del-cat {
  font-size: 13px;
  color: var(--del-red-weak);
  background: var(--del-bg-weak);
  border-radius: 13px;
  padding: 5px 10px;
  cursor: pointer;
}

.dialog-label {
  font-size: 13px;
  color: var(--text-sub);
  width: 100%;
}
.dialog-input {
  width: 100%;
  height: 46px;
  font-size: 16px;
  border: 1px solid var(--input-border);
  border-radius: 8px;
  padding: 0 14px;
  outline: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  background: #fff;
}
.dialog-input::placeholder { color: var(--text-placeholder); }
.dialog-input:focus { border-color: var(--green); }
.dialog-textarea {
  width: 100%;
  height: 90px;
  font-size: 15px;
  border: 1px solid var(--input-border);
  border-radius: 8px;
  padding: 10px 14px;
  outline: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  background: #fff;
  resize: none;
  font-family: inherit;
}
.dialog-textarea::placeholder { color: var(--text-placeholder); }
.dialog-textarea:focus { border-color: var(--green); }

.dialog-ok {
  width: 100%;
  height: 46px;
  border: none;
  border-radius: 10px;
  background: var(--green);
  color: #fff;
  font-size: 16px;
  cursor: pointer;
}
.dialog-ok:hover { filter: brightness(1.05); }

/* ============ 确认弹窗 ============ */
.confirm-card { gap: 6px; }
.confirm-title { font-size: 18px; font-weight: 700; margin-top: 4px; }
.confirm-msg {
  font-size: 14px;
  color: var(--text-main);
  line-height: 1.5;
  word-break: break-all;
}
.confirm-btns { display: flex; gap: 12px; margin-top: 8px; }
.confirm-btns button {
  flex: 1;
  height: 44px;
  border: none;
  border-radius: 10px;
  font-size: 15px;
  cursor: pointer;
}
.btn-cancel { background: #F0F2F5; color: var(--text-sub); }
.btn-danger { background: var(--del-red); color: #fff; }
.btn-danger:hover { filter: brightness(1.05); }

/* ============ Toast ============ */
#toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--tab-h) + 70px);
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.78);
  color: #fff;
  font-size: 14px;
  padding: 10px 18px;
  border-radius: 8px;
  z-index: 300;
  opacity: 0;
  transition: opacity 0.25s;
  pointer-events: none;
  max-width: 80%;
  text-align: center;
}
#toast.show { opacity: 1; }

/* 空态提示 */
.empty-hint {
  color: var(--text-sub);
  font-size: 14px;
  text-align: center;
  padding: 40px 0;
}