/* ==========================================================================
   时间盒-Timebox 复刻版样式
   沿用原站 CSS 变量体系，补充分钟级时间选择的控件样式
   ========================================================================== */

:root {
    --slot-width: 17px;
    --box-height: 50px;
    --color-bg: #f8f9fa;
    --color-text: #212529;
    --color-primary: #0d6efd;
    --color-panel: #ffffff;
    --color-border: #e9ecef;

    --color-normal: #e7f1ff;
    --color-normal-border: #0d6efd;
    --color-normal-text: #0d6efd;

    --color-short: #d3f9d8;
    --color-short-border: #2b8a3e;
    --color-short-text: #2b8a3e;

    --color-medium: #e7f1ff;
    --color-medium-border: #0d6efd;
    --color-medium-text: #0d6efd;

    --color-long: #fff3bf;
    --color-long-border: #f08c00;
    --color-long-text: #e67700;

    --color-extra: #eebefa;
    --color-extra-border: #9c36b5;
    --color-extra-text: #9c36b5;

    --color-important: #fff0f0;
    --color-important-border: #dc3545;
    --color-important-text: #dc3545;

    --color-done: #d4edda;
    --color-done-border: #28a745;
    --color-done-text: #155724;

    --color-postponed: #fff3cd;
    --color-postponed-border: #ffc107;
    --color-postponed-text: #856404;

    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.16);
}

* { box-sizing: border-box; }

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
                 "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;
    background-color: var(--color-bg);
    margin: 0;
    padding: 24px;
    color: var(--color-text);
    -webkit-font-smoothing: antialiased;
}

.container {
    width: 1400px;
    max-width: 100%;
    margin: 0 auto;
    background: var(--color-panel);
    padding: 24px 28px 20px;
    border-radius: 14px;
    box-shadow: var(--shadow-md);
}

/* ---------- Header ---------- */

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 22px;
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 18px;
}

.brand { display: flex; flex-direction: column; gap: 2px; }
h2 { margin: 0; font-weight: 650; font-size: 20px; color: #343a40; letter-spacing: -0.2px; }
.brand-sub { font-size: 12px; color: #adb5bd; }

.controls { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }

button {
    background-color: var(--color-primary);
    color: #fff;
    border: none;
    padding: 8px 16px;
    border-radius: 7px;
    cursor: pointer;
    font-size: 14px;
    font-family: inherit;
    transition: background-color 0.18s;
}
button:hover { background-color: #0b5ed7; }
button:active { filter: brightness(0.95); }

.btn-ghost {
    background: #fff;
    color: #495057;
    border: 1px solid #dee2e6;
}
.btn-ghost:hover { background: #f1f3f5; color: var(--color-primary); }

.btn-secondary { background-color: #6c757d; }
.btn-secondary:hover { background-color: #5a6268; }

.btn-danger { background-color: #dc3545; }
.btn-danger:hover { background-color: #bb2d3b; }

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

.btn-teal { background-color: #20c997; }
.btn-teal:hover { background-color: #1aa179; }

.btn-blue { background-color: #0d6efd; }
.btn-blue:hover { background-color: #0b5ed7; }

.btn-sm { padding: 3px 9px; font-size: 12px; height: 26px; line-height: 1; }
.btn-inline { height: 36px; }

/* ---------- Palette ---------- */

.palette {
    display: flex;
    gap: 10px;
    padding: 7px 14px;
    background: #f1f3f5;
    border-radius: 9px;
    align-items: center;
}
.palette span { font-size: 12px; color: #868e96; font-weight: 500; white-space: nowrap; }

.draggable-source {
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    cursor: grab;
    user-select: none;
    transition: box-shadow 0.12s;
}
.draggable-source:hover { box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15); }
/* 注意：不要在此处使用 transform。拖拽源带 transform 时
   Chrome/Edge 会取消拖拽或让 drop 无法命中目标。 */
.draggable-source:active { cursor: grabbing; }
.draggable-source.dragging { opacity: 0.5; }

.w-5  { width: 30px;  height: 26px; background: #adb5bd; }
.w-10 { width: 42px;  height: 26px; background: #868e96; }
.w-15 { width: 46px;  height: 26px; background: #2b8a3e; }
.w-30 { width: 62px;  height: 26px; background: #0d6efd; }
.w-60 { width: 88px;  height: 26px; background: #e67700; }

/* ---------- User menu ---------- */

.user-menu-container { position: relative; display: inline-block; }

.user-menu-btn {
    background-color: transparent;
    color: var(--color-text);
    border: 1px solid #dee2e6;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
}
.user-menu-btn:hover { background-color: #f8f9fa; color: var(--color-primary); }

.icon { width: 15px; height: 15px; fill: currentColor; flex-shrink: 0; }

.user-dropdown {
    display: none;
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    background-color: var(--color-panel);
    min-width: 190px;
    box-shadow: var(--shadow-lg);
    border-radius: 9px;
    border: 1px solid var(--color-border);
    z-index: 1000;
    padding: 6px 0;
}
.user-dropdown.show { display: block; }

.user-dropdown a {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 16px;
    text-decoration: none;
    color: #343a40;
    font-size: 13px;
    transition: background 0.14s;
}
.user-dropdown a:hover { background-color: #f1f3f5; }
.user-dropdown a.danger-link { color: #dc3545; }
.user-dropdown a.danger-link:hover { background-color: #fff5f5; }

.dropdown-divider { height: 1px; background: var(--color-border); margin: 6px 0; }

/* ---------- Timeline ---------- */

.timeline-container {
    position: relative;
    overflow-x: hidden;
    padding-bottom: 8px;
}

.day-block {
    border: 1px solid var(--color-border);
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 16px;
    background: var(--color-panel);
    box-shadow: var(--shadow-sm);
    transition: background-color 0.3s;
}

@keyframes highlight-pulse {
    0%   { box-shadow: 0 0 16px rgba(13, 110, 253, 0.45); border-color: #0d6efd; }
    55%  { box-shadow: 0 0 26px rgba(13, 110, 253, 0.25); border-color: #0d6efd; }
    100% { box-shadow: var(--shadow-sm); border-color: var(--color-border); }
}
.day-block.highlight { animation: highlight-pulse 3.2s ease-out; }

.day-block.is-today { border-color: #ffc107; }
.day-block.is-today .day-header::before { background: #ffc107; }

.day-header {
    font-size: 15px;
    font-weight: 650;
    color: #343a40;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.day-header::before {
    content: '';
    display: block;
    width: 4px;
    height: 15px;
    background: var(--color-primary);
    border-radius: 2px;
    flex-shrink: 0;
}

.day-weekday { font-size: 12px; color: #adb5bd; font-weight: 500; }
.day-today-badge {
    font-size: 11px;
    background: #fff3cd;
    color: #856404;
    padding: 1px 7px;
    border-radius: 10px;
    font-weight: 600;
}
.day-count { margin-left: auto; font-size: 12px; color: #adb5bd; font-weight: 400; }

/* 日期头：进行中徽标 + 完成进度 */
.day-running-badge {
    font-size: 11px;
    background: #ffe8cc;
    color: #d9480f;
    padding: 1px 8px;
    border-radius: 10px;
    font-weight: 700;
}
.day-progress {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.day-progress-bar {
    display: inline-block;
    width: 60px;
    height: 5px;
    background: #e9ecef;
    border-radius: 3px;
    overflow: hidden;
}
.day-progress-bar > span {
    display: block;
    height: 100%;
    background: #40c057;
    border-radius: 3px;
    transition: width 0.4s ease;
}
.day-progress-text {
    font-size: 11px;
    color: #868e96;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

body.dark-mode .day-running-badge { background: #3d2200; color: #ffa94d; }
body.dark-mode .day-progress-bar { background: #333; }
body.dark-mode .day-progress-text { color: #868e96; }

.track-row {
    display: flex;
    align-items: center;
    margin-top: 26px;
    margin-bottom: 6px;
}
.track-row:last-child { margin-bottom: 0; }

.track-label {
    width: 52px;
    font-size: 12px;
    color: #868e96;
    font-weight: 500;
    text-align: right;
    padding-right: 14px;
    flex-shrink: 0;
    user-select: none;
}

.timeline-track {
    position: relative;
    height: var(--box-height);
    background-image:
        linear-gradient(to right, #ced4da 1px, transparent 1px),
        linear-gradient(to right, #f1f3f5 1px, transparent 1px);
    background-size:
        calc(var(--slot-width) * 6) 100%,
        var(--slot-width) 100%;
    background-color: #fdfdfd;
    border: 1px solid #dee2e6;
    border-radius: 5px;
    flex-grow: 1;
    min-width: 0;
}
.timeline-track.pm-track { background-color: #fafafa; }

.track-time-label {
    position: absolute;
    top: -18px;
    transform: translateX(-50%);
    font-size: 10px;
    color: #ced4da;
    pointer-events: none;
    white-space: nowrap;
    user-select: none;
}
.track-time-label.hour-mark {
    font-weight: 700;
    color: #868e96;
    font-size: 11px;
    top: -19px;
}
/* 端点标签贴边对齐，避免被轨道裁切 */
.track-time-label.edge-start { transform: translateX(0); }
.track-time-label.edge-end { transform: translateX(0); text-align: right; }

/* ---------- Timebox ---------- */

.timebox {
    position: absolute;
    top: 4px;
    bottom: 4px;
    border-radius: 6px;
    border-width: 1px;
    border-style: solid;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    box-sizing: border-box;
    user-select: none;
    transition: box-shadow 0.18s, filter 0.18s;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
    overflow: hidden;
    padding: 0 3px;
    font-weight: 700;
    z-index: 2;
    letter-spacing: -0.2px;
    min-width: 6px;
}
.timebox:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.16);
    z-index: 20;
    filter: brightness(1.03);
}
/* 注意：.timebox 上不能加 transform，否则 HTML5 拖拽会失效 */
.timebox.dragging { opacity: 0.45; }

/* 窄盒子：只显示色块，完整信息在 tooltip */
.timebox.too-narrow { padding: 0; }
.timebox.too-narrow .timebox-content { display: none; }

/* 中等宽度盒子：文字单行省略，不换行不溢出 */
.timebox .timebox-content {
    display: block;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    position: relative;
    z-index: 2;
}

/* 时间重叠的盒子：加斜纹提示，避免用户以为数据丢失 */
.timebox.overlapping {
    box-shadow: 0 0 0 1px rgba(255, 152, 0, 0.55), 0 2px 6px rgba(255, 152, 0, 0.25);
}

.timebox-content {
    /* 不设置 pointer-events:auto —— 否则拖拽会从子元素发起，
       父级 .timebox 的 draggable 无法接管，导致拖不动 */
    pointer-events: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    min-width: 0;
    line-height: 1.15;
    display: block;
}

.timebox .resize-handle {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 6px;
    cursor: ew-resize;
    z-index: 15;
    opacity: 0;
    transition: opacity 0.14s;
}
.timebox:hover .resize-handle { opacity: 1; }
.timebox .resize-handle.left  { left: 0;  border-left: 2px solid rgba(0, 0, 0, 0.28); border-radius: 6px 0 0 6px; }
.timebox .resize-handle.right { right: 0; border-right: 2px solid rgba(0, 0, 0, 0.28); border-radius: 0 6px 6px 0; }

/* 时长分档配色 */
.timebox.dur-short  { background: var(--color-short);  border-color: var(--color-short-border);  color: var(--color-short-text); }
.timebox.dur-medium { background: var(--color-medium); border-color: var(--color-medium-border); color: var(--color-medium-text); }
.timebox.dur-long   { background: var(--color-long);   border-color: var(--color-long-border);   color: var(--color-long-text); }
.timebox.dur-extra  { background: var(--color-extra);  border-color: var(--color-extra-border);  color: var(--color-extra-text); }

/* 重要 */
.timebox.important {
    border-width: 2px;
    border-color: var(--color-important-border);
    box-shadow: 0 0 0 1px rgba(220, 53, 69, 0.14), 0 2px 6px rgba(220, 53, 69, 0.14);
    font-weight: 800;
}
.timebox.important::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--color-important-border);
    border-radius: 5px 5px 0 0;
}

/* ==========================================================================
   状态机样式
   auto 组（时间线驱动）：upcoming 未开始 / running 进行中 / done 已完成
   manual 组（手动覆盖）：postponed 延后 / incomplete 未完成
   ========================================================================== */

/* ---------- 未开始：淡出、虚线、不可抢眼 ---------- */
.timebox.state-upcoming {
    opacity: 0.55;
    filter: saturate(0.55);
}
.timebox.state-upcoming .timebox-content {
    color: #868e96;
}

/* ---------- 进行中：高亮 + 呼吸光晕 + 左侧进度条 ---------- */
.timebox.state-running {
    box-shadow: 0 0 0 2px rgba(232, 89, 12, 0.55), 0 4px 14px rgba(232, 89, 12, 0.28);
    z-index: 12;
    animation: running-pulse 2.4s ease-in-out infinite;
}
@keyframes running-pulse {
    0%, 100% { box-shadow: 0 0 0 2px rgba(232, 89, 12, 0.55), 0 4px 14px rgba(232, 89, 12, 0.28); }
    50%      { box-shadow: 0 0 0 3px rgba(232, 89, 12, 0.75), 0 4px 20px rgba(232, 89, 12, 0.42); }
}

/* 进行中的已过时间遮罩 */
.timebox-progress {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    background: rgba(232, 89, 12, 0.22);
    pointer-events: none;
    /* 必须高于盒子背景但低于文字，否则会被背景色盖住 */
    z-index: 1;
    border-radius: 5px 0 0 5px;
    border-right: 1px solid rgba(232, 89, 12, 0.45);
}

/* 进行中的「▶」标记 */
.timebox.state-running::after {
    content: '▶';
    position: absolute;
    right: 4px;
    bottom: 1px;
    font-size: 9px;
    color: #e8590c;
    font-weight: 900;
    z-index: 2;
}

/* ---------- 已完成（自动或手动）：绿底 + 删除线 + 勾 ---------- */
.timebox.state-done {
    background: var(--color-done) !important;
    border-color: var(--color-done-border) !important;
    color: var(--color-done-text) !important;
    opacity: 0.88;
}
.timebox.state-done .timebox-content {
    text-decoration: line-through;
    opacity: 0.7;
}
.timebox.state-done::after {
    content: '✓';
    position: absolute;
    right: 3px;
    bottom: 1px;
    font-size: 11px;
    color: var(--color-done-border);
    font-weight: 900;
    z-index: 2;
}

/* ---------- 延后（手动）：黄色虚线 ---------- */
.timebox.state-postponed {
    background: var(--color-postponed) !important;
    border-color: var(--color-postponed-border) !important;
    border-style: dashed !important;
    color: var(--color-postponed-text) !important;
}
.timebox.state-postponed::after {
    content: '»';
    position: absolute;
    right: 4px;
    bottom: 0;
    font-size: 13px;
    font-weight: 900;
    color: var(--color-postponed-border);
    z-index: 2;
}

/* ---------- 未完成（手动）：灰色 + 问号点 ---------- */
.timebox.state-incomplete {
    background: #f1f3f5 !important;
    border-color: #adb5bd !important;
    color: #495057 !important;
    opacity: 0.92;
}
.timebox.state-incomplete::after {
    content: '·';
    position: absolute;
    right: 4px;
    bottom: 2px;
    font-size: 16px;
    font-weight: 900;
    color: #adb5bd;
    z-index: 2;
}

/* 进行中的进度条在竖向时从顶部向下 */
body.layout-vertical .timebox-progress {
    top: 0;
    left: 0;
    right: 0;
    bottom: auto;
    border-radius: 5px 5px 0 0;
}

/* 行内编辑输入框 */
.timebox input.inline-edit {
    width: 100%;
    height: 100%;
    border: none;
    background: transparent;
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
    font-family: inherit;
    text-align: center;
    padding: 0;
    margin: 0;
    outline: none;
    letter-spacing: inherit;
}

/* 当前时间指示线 */
.current-time-indicator {
    position: absolute;
    top: -3px;
    bottom: -3px;
    width: 2px;
    background: #fa5252;
    z-index: 30;
    pointer-events: none;
    border-radius: 1px;
    box-shadow: 0 0 6px rgba(250, 82, 82, 0.7);
}
.current-time-indicator::before {
    content: '';
    position: absolute;
    top: -4px;
    left: -3px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #fa5252;
}

/* 拖动时间提示 */
.drag-tooltip {
    position: fixed;
    background: rgba(33, 37, 41, 0.92);
    color: #fff;
    padding: 5px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    pointer-events: none;   /* 关键：不能拦截拖拽的 drop 命中 */
    z-index: 9999;
    display: none;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    font-variant-numeric: tabular-nums;
}

/* ---------- Context menu ---------- */

.context-menu {
    position: fixed;
    background: var(--color-panel);
    border: 1px solid var(--color-border);
    border-radius: 9px;
    box-shadow: var(--shadow-lg);
    padding: 5px 0;
    z-index: 3000;
    display: none;
    min-width: 140px;
}
.context-menu.active { display: block; }
.context-menu hr { margin: 4px 0; border: 0; border-top: 1px solid var(--color-border); }

.context-menu-item {
    padding: 8px 16px 8px 10px;
    font-size: 13px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 7px;
    transition: background 0.12s;
    color: #343a40;
}
.context-menu-item:hover { background: #f1f3f5; }
.context-menu-item .ctx-check {
    width: 14px;
    text-align: center;
    color: #2b8a3e;
    font-weight: 900;
    font-size: 12px;
    flex-shrink: 0;
}
.context-menu-item .ctx-label { flex: 1; }

/* 菜单顶部的当前状态 */
.ctx-state-label {
    padding: 7px 14px 8px 17px;
    font-size: 11px;
    font-weight: 700;
    color: #868e96;
    border-bottom: 1px solid var(--color-border);
    margin-bottom: 3px;
    letter-spacing: 0.2px;
}
.ctx-state-label[data-state="running"]    { color: #e8590c; }
.ctx-state-label[data-state="done"]       { color: #2b8a3e; }
.ctx-state-label[data-state="upcoming"]   { color: #adb5bd; }
.ctx-state-label[data-state="postponed"]  { color: #e67700; }
.ctx-state-label[data-state="incomplete"] { color: #868e96; }

/* ---------- Modals ---------- */

.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.42);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    padding: 20px;
    backdrop-filter: blur(2px);
}
.modal-overlay.active { display: flex; }

.modal {
    background: var(--color-panel);
    border-radius: 13px;
    padding: 24px 26px;
    width: 100%;
    max-width: 460px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: var(--shadow-lg);
    animation: modal-in 0.16s ease-out;
}
@keyframes modal-in {
    from { opacity: 0; transform: translateY(-8px) scale(0.985); }
    to   { opacity: 1; transform: none; }
}

.modal h3 { margin: 0 0 16px; font-size: 17px; font-weight: 650; color: #343a40; }

.section-title { font-weight: 650; color: #495057; font-size: 13px; margin-bottom: 10px; }
.modal hr { margin: 18px 0; border: 0; border-top: 1px solid var(--color-border); }

.form-group { margin-bottom: 15px; }
.form-group label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: #868e96;
    margin-bottom: 6px;
}
.mini-label { font-size: 11px; display: block; margin-bottom: 4px; color: #868e96; }

.form-group input[type="text"],
.form-group input[type="time"],
.form-group input[type="number"],
.form-group textarea,
.preset-add-row input,
.form-group-inline input {
    width: 100%;
    padding: 9px 11px;
    border: 1px solid #dee2e6;
    border-radius: 7px;
    font-size: 14px;
    font-family: inherit;
    color: var(--color-text);
    background: var(--color-panel);
    transition: border-color 0.16s, box-shadow 0.16s;
}
.form-group input:focus,
.form-group textarea:focus,
.preset-add-row input:focus,
.form-group-inline input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.12);
}
.form-group textarea { resize: vertical; min-height: 64px; }

.time-row { display: flex; align-items: center; gap: 10px; }
.time-row input[type="time"] {
    width: 130px;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    font-size: 15px;
    letter-spacing: 0.5px;
}

.hint { font-size: 11px; color: #adb5bd; font-weight: 400; }

.form-group-inline {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: flex-end;
}
.form-group-inline input { width: 64px; padding: 7px 8px; }

/* 时长选择 */
.duration-selector { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.duration-btn {
    background: #f1f3f5;
    color: #495057;
    border: 1px solid transparent;
    padding: 7px 15px;
    border-radius: 7px;
    font-size: 13px;
    font-weight: 600;
}
.duration-btn:hover { background: #e9ecef; }
.duration-btn.active {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
}
#modalDurationNum {
    width: 76px;
    padding: 7px 9px;
    border: 1px solid #dee2e6;
    border-radius: 7px;
    font-size: 13px;
    font-family: inherit;
    font-variant-numeric: tabular-nums;
}
#modalDurationNum:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.12);
}

/* 重要性 / 状态选择 */
.importance-selector, .status-selector { display: flex; gap: 8px; }
.importance-btn, .status-btn {
    flex: 1;
    background: #f1f3f5;
    color: #495057;
    border: 1px solid transparent;
    padding: 8px 10px;
    border-radius: 7px;
    font-size: 13px;
    font-weight: 600;
}
.importance-btn:hover, .status-btn:hover { background: #e9ecef; }

.importance-btn.active-normal { background: #e7f1ff; color: #0d6efd; border-color: #0d6efd; }
.importance-btn.active-important { background: #fff0f0; color: #dc3545; border-color: #dc3545; }

.status-btn.active-auto { background: #e7f1ff; color: #0d6efd; border-color: #0d6efd; font-weight: 700; }
.status-btn.active-incomplete { background: #f1f3f5; color: #495057; border-color: #adb5bd; }
.status-btn.active-completed { background: #d4edda; color: #155724; border-color: #28a745; }
.status-btn.active-postponed { background: #fff3cd; color: #856404; border-color: #ffc107; }

/* 状态选择器：4 个按钮 */
.status-selector { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.status-selector .status-btn { padding: 8px 4px; font-size: 12.5px; }

/* 预设标签 */
.preset-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 14px; align-items: center; }
.preset-tags:empty { display: none; }
.preset-tag {
    background: #e7f1ff;
    color: #0d6efd;
    padding: 4px 11px;
    border-radius: 14px;
    font-size: 12px;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background 0.14s;
}
.preset-tag:hover { background: #cfe2ff; }
.preset-tags .preset-label { font-size: 11px; color: #adb5bd; }

.preset-list { list-style: none; padding: 0; margin: 0 0 12px; max-height: 190px; overflow-y: auto; }
.preset-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 11px;
    background: #f8f9fa;
    border-radius: 7px;
    margin-bottom: 6px;
    font-size: 13px;
}
.preset-item button {
    background: #fff;
    color: #dc3545;
    border: 1px solid #ffc9c9;
    padding: 3px 10px;
    font-size: 12px;
    border-radius: 5px;
}
.preset-item button:hover { background: #fff5f5; }

.preset-add-row { display: flex; gap: 8px; }
.preset-add-row input { flex: 1; }

.modal-actions { display: flex; gap: 9px; justify-content: flex-end; margin-top: 20px; }
.modal-actions button { min-width: 76px; }
.modal-footer-right { text-align: right; margin-top: 18px; }
.modal-footer-center { text-align: center; margin-top: 16px; }

.data-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.data-grid button { padding: 12px 10px; font-size: 13px; border-radius: 9px; }

/* 颜色选择 */
.color-selector { display: flex; gap: 11px; margin-top: 5px; }
.color-option {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid transparent;
    position: relative;
    transition: transform 0.14s, box-shadow 0.14s;
}
.color-option.red    { background-color: #dc3545; }
.color-option.blue   { background-color: #0d6efd; }
.color-option.purple { background-color: #6f42c1; }
.color-option.green  { background-color: #198754; }
.color-option.orange { background-color: #fd7e14; }
.color-option.default { background: linear-gradient(135deg, #e35d6a 50%, #ddd 50%); }
.color-option.selected {
    border-color: #343a40;
    transform: scale(1.1);
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px #343a40;
}

/* ---------- Calendar ---------- */

.calendar-container {
    display: none;
    padding: 4px 0;
}
.calendar-container.active { display: block; }

.calendar-pair { display: flex; gap: 18px; }
.calendar-col { flex: 1; min-width: 0; }

.calendar-month-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 9px;
    height: 28px;
}
.calendar-month-header h4 { margin: 0; font-size: 15px; font-weight: 650; color: #343a40; }
.header-spacer { width: 26px; }

.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1px;
    background: #e9ecef;
    border: 1px solid #e9ecef;
    border-radius: 7px;
    overflow: hidden;
}

.calendar-day-header {
    background: #f8f9fa;
    padding: 7px 0;
    text-align: center;
    font-weight: 650;
    font-size: 12px;
    color: #868e96;
}

.calendar-cell {
    background: var(--color-panel);
    min-height: 78px;
    padding: 3px;
    position: relative;
    transition: background 0.14s;
    overflow: hidden;
}
.calendar-cell.other-month { background: #fbfbfc; color: #ced4da; }
.calendar-cell.today { background: #fff8e1; }
.calendar-cell:hover { background: #f8f9fa; }
.calendar-cell.today:hover { background: #fff3cd; }

.calendar-date-num {
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 3px;
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: context-menu;
    padding: 1px 2px;
    border-radius: 4px;
}
.calendar-cell.other-month .calendar-date-num { color: #ced4da; }
.calendar-cell.today .calendar-date-num { color: #e67700; }
.calendar-date-num > span:last-child { margin-left: auto; }

.calendar-holiday {
    font-size: 10px;
    color: #e35d6a;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 62px;
}
.calendar-holiday.red    { color: #dc3545; }
.calendar-holiday.blue   { color: #0d6efd; }
.calendar-holiday.purple { color: #6f42c1; }
.calendar-holiday.green  { color: #198754; }
.calendar-holiday.orange { color: #fd7e14; }

.calendar-tasks-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    align-content: flex-start;
}

.calendar-task {
    font-size: 10px;
    padding: 1px 4px;
    border-radius: 3px;
    background: #e9ecef;
    color: #495057;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    flex: 0 0 calc(50% - 1px);
    max-width: calc(50% - 1px);
    box-sizing: border-box;
    transition: filter 0.14s;
}
.calendar-task:hover { filter: brightness(0.94); }
.calendar-task.important { border-left: 3px solid #dc3545; }

/* 日历任务：五种状态 */
.calendar-task.state-upcoming {
    background: #f8f9fa;
    color: #adb5bd;
    opacity: 0.85;
}
.calendar-task.state-running {
    background: #ffe8cc;
    color: #d9480f;
    font-weight: 700;
    box-shadow: inset 2px 0 0 #e8590c;
}
.calendar-task.state-done {
    background: #d4edda;
    color: #155724;
    text-decoration: line-through;
}
.calendar-task.state-postponed {
    background: #fff3cd;
    color: #856404;
    border: 1px dotted #ffeeba;
}
.calendar-task.state-incomplete {
    background: #e9ecef;
    color: #495057;
    opacity: 0.9;
}

.calendar-more { font-size: 10px; color: #adb5bd; padding: 1px 3px; }

/* ---------- Legend / footer ---------- */

.legend { margin-top: 16px; }
.legend-item {
    font-size: 12px;
    color: #adb5bd;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    line-height: 1.7;
}
.legend-link { color: var(--color-primary); text-decoration: none; }
.legend-link:hover { text-decoration: underline; }

.site-footer {
    text-align: center;
    color: #ced4da;
    font-size: 12px;
    margin-top: 18px;
    padding-bottom: 10px;
}

/* ---------- Dark mode ---------- */

body.dark-mode {
    --color-bg: #121212;
    --color-text: #e0e0e0;
    --color-primary: #3d8bfd;
    --color-panel: #1e1e1e;
    --color-border: #333;

    --color-normal: #102a44;
    --color-normal-border: #3d8bfd;
    --color-normal-text: #6ea8fe;

    --color-short: #0f2f12;
    --color-short-border: #46a758;
    --color-short-text: #75b798;

    --color-medium: #102a44;
    --color-medium-border: #3d8bfd;
    --color-medium-text: #6ea8fe;

    --color-long: #332b00;
    --color-long-border: #ffc107;
    --color-long-text: #ffca2c;

    --color-extra: #2a0a33;
    --color-extra-border: #c77dff;
    --color-extra-text: #d0bfff;

    --color-important: #3d1418;
    --color-important-border: #f16c75;
    --color-important-text: #ff8a93;

    --color-done: #12351d;
    --color-done-border: #46a758;
    --color-done-text: #8ce99a;

    --color-postponed: #3a3000;
    --color-postponed-border: #ffc107;
    --color-postponed-text: #ffd43b;
}

body.dark-mode h2 { color: #e9ecef; }
body.dark-mode .brand-sub { color: #6c757d; }
body.dark-mode .day-header { color: #dee2e6; }
body.dark-mode .day-header::before { background: #3d8bfd; }
body.dark-mode .day-block { background: #1e1e1e; border-color: #333; }
body.dark-mode .day-block.is-today { border-color: #b8860b; }
body.dark-mode .timeline-track {
    background-color: #232323;
    border-color: #3a3a3a;
    background-image:
        linear-gradient(to right, #3d3d3d 1px, transparent 1px),
        linear-gradient(to right, #2b2b2b 1px, transparent 1px);
}
body.dark-mode .timeline-track.pm-track {
    background-color: #1c1c1c;
    background-image:
        linear-gradient(to right, #3d3d3d 1px, transparent 1px),
        linear-gradient(to right, #2b2b2b 1px, transparent 1px);
}
body.dark-mode .track-time-label { color: #495057; }
body.dark-mode .track-time-label.hour-mark { color: #868e96; }
body.dark-mode .palette { background: #262626; }
body.dark-mode .palette span { color: #868e96; }
body.dark-mode .btn-ghost { background: #262626; color: #ced4da; border-color: #3a3a3a; }
body.dark-mode .btn-ghost:hover { background: #303030; }
body.dark-mode .user-menu-btn { border-color: #3a3a3a; color: #e0e0e0; }
body.dark-mode .user-menu-btn:hover { background: #262626; }
body.dark-mode .user-dropdown { background: #1e1e1e; border-color: #333; }
body.dark-mode .user-dropdown a { color: #dee2e6; }
body.dark-mode .user-dropdown a:hover { background: #2a2a2a; }
body.dark-mode .dropdown-divider { background: #333; }
body.dark-mode .context-menu { background: #1e1e1e; border-color: #333; }
body.dark-mode .context-menu-item { color: #dee2e6; }
body.dark-mode .context-menu-item:hover { background: #2a2a2a; }
body.dark-mode .context-menu hr { border-top-color: #333; }
body.dark-mode .modal { background: #1e1e1e; }
body.dark-mode .modal h3, body.dark-mode .section-title { color: #e9ecef; }
body.dark-mode .modal hr { border-top-color: #333; }
body.dark-mode .form-group input,
body.dark-mode .form-group textarea,
body.dark-mode .preset-add-row input,
body.dark-mode .form-group-inline input,
body.dark-mode #modalDurationNum {
    background: #262626;
    border-color: #3a3a3a;
    color: #e0e0e0;
}
body.dark-mode .form-group input:focus,
body.dark-mode .form-group textarea:focus { border-color: #3d8bfd; }
body.dark-mode .duration-btn,
body.dark-mode .importance-btn,
body.dark-mode .status-btn { background: #262626; color: #ced4da; }
body.dark-mode .duration-btn:hover,
body.dark-mode .importance-btn:hover,
body.dark-mode .status-btn:hover { background: #303030; }
body.dark-mode .status-btn.active-incomplete { background: #262626; color: #ced4da; border-color: #6c757d; }
body.dark-mode .preset-item { background: #262626; }
body.dark-mode .preset-item button { background: #1e1e1e; border-color: #5a2a2a; }
body.dark-mode .preset-tag { background: #102a44; color: #6ea8fe; }
body.dark-mode .preset-tag:hover { background: #1a3a5c; }
body.dark-mode .calendar-container { background: transparent; }
body.dark-mode .calendar-grid { background: #333; border-color: #333; }
body.dark-mode .calendar-day-header { background: #262626; color: #868e96; }
body.dark-mode .calendar-cell { background: #1e1e1e; }
body.dark-mode .calendar-cell.other-month { background: #191919; color: #495057; }
body.dark-mode .calendar-cell.today { background: #332b00; }
body.dark-mode .calendar-cell:hover { background: #262626; }
body.dark-mode .calendar-task { background: #262626; color: #ced4da; }
body.dark-mode .calendar-task.state-upcoming { background: #232323; color: #6c757d; }
body.dark-mode .calendar-task.state-running { background: #3d2200; color: #ffa94d; }
body.dark-mode .calendar-task.state-done { background: #12351d; color: #8ce99a; }
body.dark-mode .calendar-task.state-postponed { background: #3a3000; color: #ffd43b; }
body.dark-mode .calendar-task.state-incomplete { background: #2a2a2a; color: #adb5bd; }

/* 深色模式：时间盒状态 */
body.dark-mode .timebox.state-upcoming {
    opacity: 0.45;
    filter: saturate(0.4);
}
body.dark-mode .timebox.state-upcoming .timebox-content { color: #6c757d; }

body.dark-mode .timebox.state-running {
    box-shadow: 0 0 0 2px rgba(255, 145, 60, 0.6), 0 4px 16px rgba(255, 145, 60, 0.3);
}
@keyframes running-pulse-dark {
    0%, 100% { box-shadow: 0 0 0 2px rgba(255, 145, 60, 0.6), 0 4px 16px rgba(255, 145, 60, 0.3); }
    50%      { box-shadow: 0 0 0 3px rgba(255, 145, 60, 0.85), 0 4px 22px rgba(255, 145, 60, 0.45); }
}
body.dark-mode .timebox.state-running { animation-name: running-pulse-dark; }

body.dark-mode .timebox-progress { background: rgba(255, 145, 60, 0.16); }
body.dark-mode .timebox.state-running::after { color: #ffa94d; }

body.dark-mode .timebox.state-done {
    background: var(--color-done) !important;
    border-color: var(--color-done-border) !important;
    color: var(--color-done-text) !important;
}

body.dark-mode .timebox.state-postponed {
    background: var(--color-postponed) !important;
    border-color: var(--color-postponed-border) !important;
    color: var(--color-postponed-text) !important;
}

body.dark-mode .timebox.state-incomplete {
    background: #2a2a2a !important;
    border-color: #495057 !important;
    color: #adb5bd !important;
}
body.dark-mode .timebox.state-incomplete::after { color: #6c757d; }

body.dark-mode .status-btn.active-auto { background: #102a44; color: #6ea8fe; border-color: #3d8bfd; }
body.dark-mode .status-btn.active-completed { background: #12351d; color: #8ce99a; border-color: #46a758; }
body.dark-mode .status-btn.active-postponed { background: #3a3000; color: #ffd43b; border-color: #ffc107; }
body.dark-mode .status-btn.active-incomplete { background: #2a2a2a; color: #adb5bd; border-color: #6c757d; }
body.dark-mode .ctx-state-label { border-bottom-color: #333; }
body.dark-mode .calendar-month-header h4 { color: #e9ecef; }
body.dark-mode .color-option.selected { border-color: #fff; box-shadow: 0 0 0 2px #1e1e1e, 0 0 0 4px #fff; }
body.dark-mode .legend-item { color: #6c757d; }
body.dark-mode .site-footer { color: #495057; }
body.dark-mode .btn-secondary { background-color: #495057; }
body.dark-mode .btn-secondary:hover { background-color: #3d4449; }

/* ---------- Low saturation ---------- */

#lowSaturationOverlay {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9998;
    backdrop-filter: saturate(0.12);
    -webkit-backdrop-filter: saturate(0.12);
    display: none;
}

/* ---------- 竖向布局（layout-vertical） ---------- */

:root {
    --slot-height: 17px;
}

/* 竖向：day-block 变成两列网格，上午 / 下午 各占一列并排 */
body.layout-vertical .day-block {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 22px;
    align-items: start;
    padding: 14px 18px 18px;
}

body.layout-vertical .day-header {
    grid-column: 1 / -1;
    margin-bottom: 12px;
}

/* 每个 track-row：左侧留 46px 给时间刻度，右侧是轨道 */
body.layout-vertical .track-row {
    display: grid;
    grid-template-columns: 46px 1fr;
    grid-template-rows: auto auto;
    align-items: start;
    margin: 0;
    padding-left: 0;
}

body.layout-vertical .track-label {
    grid-column: 1 / -1;
    grid-row: 1;
    width: auto;
    text-align: left;
    padding: 0 0 8px 46px;
    font-size: 11px;
    font-weight: 600;
    color: #868e96;
}

body.layout-vertical .timeline-track {
    grid-column: 2;
    grid-row: 2;
    width: 100%;
    height: auto;
    min-height: 80px;
    background-image:
        linear-gradient(to bottom, #ced4da 1px, transparent 1px),
        linear-gradient(to bottom, #f1f3f5 1px, transparent 1px);
    background-size:
        100% calc(var(--slot-height) * 6),
        100% var(--slot-height);
}

body.layout-vertical .timeline-track.pm-track {
    background-image:
        linear-gradient(to bottom, #ced4da 1px, transparent 1px),
        linear-gradient(to bottom, #f1f3f5 1px, transparent 1px);
}

body.layout-vertical .track-time-label {
    top: auto;
    left: -46px;
    transform: none;
    width: 40px;
    font-size: 10px;
    white-space: nowrap;
    text-align: right;
    line-height: 1;
    margin-top: -5px;
    color: #ced4da;
}

body.layout-vertical .track-time-label.hour-mark {
    top: auto;
    font-size: 11px;
    font-weight: 700;
    color: #868e96;
}

body.layout-vertical .track-time-label.edge-start {
    transform: none;
    margin-top: 0;
}

body.layout-vertical .track-time-label.edge-end {
    transform: none;
    margin-top: 0;
    padding-bottom: 2px;
}

body.layout-vertical .timebox {
    left: 5px;
    right: 5px;
    top: auto;
    bottom: auto;
    width: auto;
    font-size: 11px;
    /* 竖向盒子的高度 = 时长 × 像素密度，通常只有 20–90px；
       上下内边距必须收紧 + 行高压到 1.15，才能让 15m 这类矮盒子完整显示一行文字
       （11px × 1.15 ≈ 12.6px，加 2px 边框 + 4px 内边距 ≈ 19px，
        与 app.js 的 TEXT_MIN_HEIGHT_PX 阈值保持一致） */
    padding: 2px 5px;
    align-items: center;
    justify-content: flex-start;
    letter-spacing: 0;
}

body.layout-vertical .timebox .timebox-content {
    white-space: normal;
    word-break: break-word;
    line-height: 1.15;
    max-height: 100%;
    overflow: hidden;
    display: block;
    width: 100%;
}

body.layout-vertical .timebox.important::before {
    top: 0;
    left: 0;
    bottom: 0;
    right: auto;
    width: 3px;
    height: auto;
    border-radius: 5px 0 0 5px;
}

body.layout-vertical .timebox .resize-handle {
    left: 0;
    right: 0;
    width: auto;
    height: 7px;
    cursor: ns-resize;
}
body.layout-vertical .timebox .resize-handle.left {
    top: 0;
    bottom: auto;
    border-left: none;
    border-top: 2px solid rgba(0, 0, 0, 0.28);
    border-radius: 6px 6px 0 0;
}
body.layout-vertical .timebox .resize-handle.right {
    top: auto;
    bottom: 0;
    border-right: none;
    border-bottom: 2px solid rgba(0, 0, 0, 0.28);
    border-radius: 0 0 6px 6px;
}

body.layout-vertical .current-time-indicator {
    left: -4px;
    right: -4px;
    top: auto;
    width: auto;
    height: 2px;
}
body.layout-vertical .current-time-indicator::before {
    top: -3px;
    left: -4px;
}

body.layout-vertical .timebox.state-done::after {
    right: 4px;
    bottom: 2px;
}
body.layout-vertical .timebox.state-postponed::after {
    right: 5px;
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
}

body.layout-vertical .timebox.too-narrow .timebox-content {
    display: none;
}

/* 竖向矮盒子（14–19px 高，如 10m）：压缩字号与内边距，仍保留可读的文字，
   而不是像以前那样直接隐藏掉 —— 那会让用户以为数据丢了 */
body.layout-vertical .timebox.compact-text {
    padding: 0 4px;
    font-size: 9px;
}
body.layout-vertical .timebox.compact-text .timebox-content {
    line-height: 1.1;
    max-height: 100%;
}

@media (max-width: 768px) {
    body.layout-vertical .day-block {
        gap: 0 12px;
        padding: 10px 12px 12px;
    }
    body.layout-vertical .track-label {
        font-size: 10px;
        padding-bottom: 5px;
    }
    body.layout-vertical .timebox {
        left: 3px;
        right: 3px;
        font-size: 10px;
        padding: 2px 3px;
    }
    body.layout-vertical .timeline-track {
        min-height: 60px;
    }
    body.layout-vertical .track-time-label {
        left: -5px;
        font-size: 9px;
    }
}

/* 窄屏竖排（<= 520px）：进一步压缩刻度与盒子留白 */
@media (max-width: 520px) {
    body.layout-vertical .track-label {
        font-size: 10px;
        padding-bottom: 4px;
    }
    body.layout-vertical .timebox {
        left: 3px;
        right: 3px;
        font-size: 10px;
    }
    body.layout-vertical .timeline-track {
        min-height: 44px;
    }
}


@media (max-width: 1100px) {
    .calendar-pair { flex-direction: column; }
}

@media (max-width: 768px) {
    body { padding: 10px; }
    .container { padding: 14px 12px; border-radius: 10px; }
    header { flex-direction: column; align-items: stretch; gap: 12px; margin-bottom: 14px; padding-bottom: 12px; }
    h2 { font-size: 17px; }
    .brand-sub { display: none; }
    .controls { gap: 8px; }
    .controls button { padding: 7px 11px; font-size: 13px; }
    .palette { padding: 6px 10px; gap: 7px; flex: 1 1 100%; }
    .palette span { display: none; }
    .user-menu-btn { padding: 7px 10px; font-size: 12px; }

    .day-block { padding: 10px; border-radius: 8px; margin-bottom: 12px; }
    .day-header { font-size: 13px; }
    .track-label { width: 34px; padding-right: 8px; font-size: 11px; }
    .track-time-label { font-size: 9px; }
    .track-time-label.hour-mark { font-size: 10px; }
    .timeline-track { height: 44px; }
    .timebox { font-size: 10px; top: 3px; bottom: 3px; }
    .timebox .resize-handle { display: none; }

    .modal { padding: 18px 16px; max-width: 100%; }
    .modal-actions button { min-width: 62px; font-size: 13px; }
    .data-grid { grid-template-columns: 1fr; }
    .calendar-cell { min-height: 62px; }
    .calendar-task { flex: 0 0 100%; max-width: 100%; }
    .context-menu { min-width: 130px; }
}