:root {
  --science-900: #081425;
  --science-800: #0b1f37;
  --science-700: #0f2a4a;
  --accent-cyan: #38bdf8;
  --accent-indigo: #6366f1;
  --surface: rgba(255, 255, 255, 0.78);
  --stroke: rgba(12, 35, 60, 0.10);
  --shadow: 0 14px 40px rgba(7, 18, 33, 0.10);
}

.app-body {
  background: radial-gradient(1000px 600px at 15% 0%, rgba(56, 189, 248, 0.14), transparent 60%),
    radial-gradient(900px 500px at 85% 15%, rgba(99, 102, 241, 0.12), transparent 55%),
    #f7f9fc;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans", "Liberation Sans",
    sans-serif;
}

.card,
.btn,
.form-control,
.form-select,
.alert {
  border-radius: 16px;
}

.nav-science {
  background: linear-gradient(90deg, var(--science-900), var(--science-700));
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.hero-science {
  color: #eef5ff;
  background: linear-gradient(120deg, rgba(11, 31, 55, 0.95), rgba(15, 42, 74, 0.92));
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 14px 40px rgba(7, 18, 33, 0.14);
}

.card-module {
  border-radius: 18px;
  border: 1px solid var(--stroke);
  transition: transform 120ms ease, box-shadow 120ms ease;
}
.card-module:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 40px rgba(7, 18, 33, 0.12);
}

.module-badge {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  padding: 0.35rem 0.55rem;
  border-radius: 999px;
  color: #0b1f37;
  background: linear-gradient(90deg, rgba(56, 189, 248, 0.6), rgba(99, 102, 241, 0.55));
}

.card-soft {
  background: var(--surface);
  box-shadow: 0 10px 28px rgba(7, 18, 33, 0.08);
}

.timeline-shell {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.84), rgba(255, 255, 255, 0.68));
  box-shadow: var(--shadow);
}

.timeline-board {
  overflow-x: auto;
  padding-bottom: 8px;
  border-radius: 16px;
  /* Cạnh trái cột ngày đầu = viền 1px + padding 6px (khớp JS vạch hôm nay) */
  --tl-track-inset: 7px;
}

.timeline-canvas {
  position: relative;
  width: max-content;
  min-width: 100%;
  box-sizing: border-box;
}

.timeline-today-line {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  margin-left: 0;
  background: linear-gradient(
    180deg,
    rgba(220, 38, 38, 0.15),
    rgba(220, 38, 38, 0.92) 12%,
    rgba(220, 38, 38, 0.92) 88%,
    rgba(220, 38, 38, 0.15)
  );
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.75);
  z-index: 6;
  pointer-events: none;
}

.timeline-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--tl-cols), var(--tl-unit));
  gap: 0;
  padding: 10px 6px;
  border-radius: 16px;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(12, 35, 60, 0.06) 0px,
      rgba(12, 35, 60, 0.06) 1px,
      transparent 1px,
      transparent var(--tl-unit)
    ),
    rgba(255, 255, 255, 0.55);
  background-position: var(--tl-track-inset) 0;
  border: 1px solid rgba(12, 35, 60, 0.07);
}

/* Không dùng ô placeholder theo từng cột: để thanh công việc dùng auto-placement,
   các khoảng không chồng thời gian có thể nằm cùng một hàng lưới. */
.timeline-grid.timeline-lane {
  row-gap: 8px;
  align-content: start;
}

.timeline-lane-empty {
  grid-column: 1 / -1;
  padding: 0.35rem 0.25rem;
}

.timeline-tick-layer {
  position: absolute;
  left: 6px;
  right: 6px;
  top: 6px;
  height: 38px;
  display: grid;
  grid-template-columns: repeat(var(--tl-cols), var(--tl-unit));
  gap: 0;
  z-index: 3;
  pointer-events: none;
  align-items: end;
}

/* Zoom cả năm: trục cao hơn, căn giữa theo chiều dọc cho dải tháng */
.timeline-tick-layer--months {
  height: 40px;
  align-items: center;
}

.timeline-tick-js {
  font-size: 0.72rem;
  font-weight: 600;
  color: rgba(11, 31, 55, 0.68);
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: calc(var(--tl-unit) * 1.2);
  justify-self: start;
}

.timeline-board[data-zoom="xhigh"] .timeline-tick-js {
  max-width: none;
  font-size: 0.74rem;
}

/* Một ngày đầu tháng (zoom trung bình): tên tháng + vạch */
.timeline-tick-month-point {
  max-width: none;
  justify-self: start;
  align-self: center;
  font-size: 0.72rem;
  font-weight: 700;
  color: rgba(11, 31, 55, 0.86);
  border-left: 2px solid rgba(99, 102, 241, 0.55);
  padding-left: 5px;
  line-height: 1.2;
}

/* Zoom nhỏ: dải cả tháng — vạch trái + nền nhạt phân tách */
.timeline-tick-month-band {
  max-width: none;
  justify-self: stretch;
  align-self: stretch;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: rgba(11, 31, 55, 0.9);
  border-left: 2px solid rgba(11, 31, 55, 0.38);
  padding-left: 6px;
  line-height: 1.2;
  background: linear-gradient(
    90deg,
    rgba(11, 31, 55, 0.1) 0px,
    rgba(11, 31, 55, 0.03) min(100%, 36px),
    transparent min(100%, 120px)
  );
}

.timeline-board[data-month-axis="1"] .timeline-divider {
  height: 84px;
}

.timeline-board[data-month-axis="1"] .timeline-axis-line {
  top: 52px;
}

.timeline-board[data-month-axis="1"] .timeline-axis-arrow {
  top: 45px;
}

.timeline-board[data-month-axis="1"] .timeline-axis-caption {
  top: 56px;
}

.timeline-hint {
  color: rgba(11, 31, 55, 0.55);
}
.timeline-board:focus-within {
  outline: 2px solid rgba(99, 102, 241, 0.18);
  outline-offset: 4px;
}

.timeline-section--top {
  margin-bottom: 4px;
}

.timeline-section--bottom {
  margin-top: 4px;
}

.timeline-divider {
  position: relative;
  height: 76px;
  margin: 10px 0 14px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(12, 35, 60, 0.07);
  overflow: hidden;
}

.timeline-divider--between {
  margin: 14px 0;
  flex-shrink: 0;
}

.timeline-divider-grid {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(var(--tl-cols), var(--tl-unit));
  gap: 0;
  padding: 10px 6px 8px;
  /* Giữ đúng bề ngang trục khi không còn ô placeholder */
  min-width: calc(var(--tl-cols) * var(--tl-unit));
  box-sizing: content-box;
  background:
    /* vertical gridlines for time ticks */
    repeating-linear-gradient(
      90deg,
      rgba(12, 35, 60, 0.08) 0px,
      rgba(12, 35, 60, 0.08) 1px,
      transparent 1px,
      transparent var(--tl-unit)
    );
  /* Lưới nằm trong khối không viền: chỉ lệch padding 6px; viền 1px thuộc .timeline-divider */
  background-position: 6px 0;
}

.timeline-axis-line {
  position: absolute;
  left: 0;
  right: 28px;
  top: 46px;
  height: 2px;
  background: rgba(11, 31, 55, 0.18);
}
.timeline-axis-arrow {
  position: absolute;
  right: 10px;
  top: 39px;
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 14px solid rgba(11, 31, 55, 0.28);
}
.timeline-axis-caption {
  position: absolute;
  top: 50px;
  left: 0;
  font-size: 0.82rem;
  color: rgba(11, 31, 55, 0.55);
}

.timeline-section-title {
  margin: 6px 0 8px;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  border: 1px solid rgba(12, 35, 60, 0.10);
  background: rgba(255, 255, 255, 0.70);
}
.pill-room {
  color: #0b3a5a;
  border-color: rgba(56, 189, 248, 0.30);
  background: rgba(56, 189, 248, 0.10);
}
.pill-me {
  color: #2b2f9a;
  border-color: rgba(99, 102, 241, 0.25);
  background: rgba(99, 102, 241, 0.10);
}

.timeline-lane {
  min-height: 88px;
}

.timeline-lane--room,
.timeline-lane--personal {
  min-height: 100px;
}

.tl-bar {
  align-self: center;
  justify-self: stretch;
  box-sizing: border-box;
  min-width: 0;
  height: 44px;
  min-height: 44px;
  max-height: 44px;
  border-radius: 12px;
  padding: 6px 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-shadow: 0 8px 22px rgba(7, 18, 33, 0.08);
  border: 1px solid rgba(12, 35, 60, 0.10);
  overflow: hidden;
}

.tl-bar-personal {
  /* Cố định chiều cao: công việc ngắn (ô lưới hẹp) không được kéo dọc theo chữ */
  min-height: 56px;
  height: 56px;
  max-height: 56px;
  padding: 4px 6px;
  justify-content: center;
  gap: 0;
}
.tl-bar-title {
  font-weight: 700;
  font-size: 0.82rem;
  color: rgba(11, 31, 55, 0.90);
  line-height: 1.15;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tl-bar-sub {
  font-size: 0.72rem;
  color: rgba(11, 31, 55, 0.58);
  margin-top: 1px;
  min-width: 0;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  line-height: 1.15;
}

.tl-bar-room {
  background: linear-gradient(90deg, rgba(56, 189, 248, 0.22), rgba(56, 189, 248, 0.10));
  border-color: rgba(56, 189, 248, 0.35);
}

.tl-bar-room-click {
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.tl-bar-room-click:hover {
  box-shadow: 0 10px 26px rgba(7, 18, 33, 0.12);
  transform: translateY(-1px);
}
.tl-bar-room-click:focus-visible {
  outline: 2px solid rgba(56, 189, 248, 0.55);
  outline-offset: 2px;
}

/* Cá nhân: mỗi nhân viên một hue (--tl-user-h từ server) */
.tl-bar-me.tl-bar-personal {
  cursor: pointer;
  background: linear-gradient(
    90deg,
    hsla(var(--tl-user-h, 250), 58%, 86%, 0.95),
    hsla(var(--tl-user-h, 250), 48%, 92%, 0.78)
  );
  border-color: hsla(var(--tl-user-h, 250), 42%, 48%, 0.5);
  transition: transform 0.12s ease, box-shadow 0.12s ease, opacity 0.15s ease;
}
.tl-bar-me.tl-bar-personal:hover {
  box-shadow: 0 10px 26px rgba(7, 18, 33, 0.11);
  transform: translateY(-1px);
}
.tl-bar-me.tl-bar-personal:focus-visible {
  outline: 2px solid hsla(var(--tl-user-h, 250), 55%, 55%, 0.65);
  outline-offset: 2px;
}

.tl-bar-pending {
  font-size: 0.62rem;
  font-weight: 800;
  color: #dc2626;
  letter-spacing: 0.02em;
  line-height: 1.1;
  text-transform: uppercase;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tl-bar-me.tl-bar-personal.tl-pending {
  box-shadow: inset 0 0 0 1px rgba(220, 38, 38, 0.22);
}

/* Đã hoàn thành: nền nhạt ~một nửa + gạch ngang chữ */
.tl-bar-me.tl-bar-personal.tl-done {
  background: linear-gradient(
    90deg,
    hsla(var(--tl-user-h, 250), 28%, 96%, 0.4),
    hsla(var(--tl-user-h, 250), 22%, 97%, 0.28)
  );
  border-color: hsla(var(--tl-user-h, 250), 18%, 78%, 0.35);
  opacity: 0.92;
}
.tl-bar-me.tl-bar-personal.tl-done .tl-bar-title,
.tl-bar-me.tl-bar-personal.tl-done .tl-bar-sub,
.tl-bar-me.tl-bar-personal.tl-done .tl-bar-pending {
  text-decoration: line-through;
  text-decoration-color: rgba(11, 31, 55, 0.35);
  color: rgba(11, 31, 55, 0.45);
}

.tl-bar-me.tl-bar-personal.tl-rejected {
  background: linear-gradient(
    90deg,
    hsla(var(--tl-user-h, 250), 40%, 90%, 0.55),
    hsla(var(--tl-user-h, 250), 35%, 94%, 0.4)
  );
  border-color: rgba(220, 38, 38, 0.35);
  opacity: 0.96;
}

.completion-summary-text {
  white-space: pre-wrap;
}

/* Tiêu đề công việc phòng: mở biểu mẫu đăng ký kế hoạch cá nhân */
.room-task-register-toggle:hover,
.room-task-register-toggle:focus-visible {
  text-decoration: underline !important;
}
.room-task-register-toggle:focus-visible {
  box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.45);
  border-radius: 4px;
}