/* 研究紀錄簿管理系統 主樣式（Bootstrap 5.3 之上） */
:root {
  --rb-sidebar-w: 260px;
  --rb-sidebar-bg: #14213d;
  --rb-sidebar-fg: #c9d3e6;
  --rb-sidebar-active: #fca311;
  --rb-bg: #f4f6fb;
  --bs-primary: #1f4e8c;
  --bs-primary-rgb: 31, 78, 140;
  --bs-link-color: #1f4e8c;
  --bs-link-color-rgb: 31, 78, 140;
  --bs-link-hover-color: #163a69;
  --bs-font-sans-serif: "Noto Sans TC", "Microsoft JhengHei", "PingFang TC", "Heiti TC", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

body { font-family: var(--bs-font-sans-serif); }
.btn-primary {
  --bs-btn-bg: #1f4e8c; --bs-btn-border-color: #1f4e8c;
  --bs-btn-hover-bg: #183f72; --bs-btn-hover-border-color: #183f72;
  --bs-btn-active-bg: #143560; --bs-btn-active-border-color: #143560;
  --bs-btn-disabled-bg: #1f4e8c; --bs-btn-disabled-border-color: #1f4e8c;
}
.btn-outline-primary {
  --bs-btn-color: #1f4e8c; --bs-btn-border-color: #1f4e8c;
  --bs-btn-hover-bg: #1f4e8c; --bs-btn-hover-border-color: #1f4e8c;
  --bs-btn-active-bg: #1f4e8c; --bs-btn-active-border-color: #1f4e8c;
}
.text-primary { color: #1f4e8c !important; }
.bg-primary { background-color: #1f4e8c !important; }
.min-w-0 { min-width: 0; }

/* ---------- 版面 ---------- */
.app-body { background: var(--rb-bg); }
.app-shell { display: flex; min-height: 100vh; }
.app-sidebar {
  width: var(--rb-sidebar-w); flex: 0 0 var(--rb-sidebar-w);
  background: var(--rb-sidebar-bg); color: var(--rb-sidebar-fg);
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
  display: flex; flex-direction: column; z-index: 1040;
}
.sidebar-brand { padding: 1.1rem 1.1rem 0.9rem; border-bottom: 1px solid rgba(255,255,255,.08); }
.sidebar-brand a { color: #fff; }
.brand-icon {
  width: 40px; height: 40px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--rb-sidebar-active); color: #14213d; font-size: 1.3rem; flex: 0 0 40px;
}
.brand-text { line-height: 1.25; font-size: .95rem; }
.sidebar-nav { padding: .5rem .6rem 1rem; flex: 1; }
.nav-section-label {
  font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: #7f8db0;
  padding: 1rem .75rem .35rem;
}
.sidebar-link {
  display: flex; align-items: center; gap: .7rem; padding: .55rem .75rem; border-radius: .5rem;
  color: var(--rb-sidebar-fg); text-decoration: none; font-size: .93rem; margin-bottom: 2px;
}
.sidebar-link i { font-size: 1.05rem; width: 1.2rem; text-align: center; }
.sidebar-link:hover { background: rgba(255,255,255,.07); color: #fff; }
.sidebar-link.active { background: rgba(252,163,17,.16); color: #fff; box-shadow: inset 3px 0 0 var(--rb-sidebar-active); }
.sidebar-link.active i { color: var(--rb-sidebar-active); }
.sidebar-footer { padding: .75rem 1.2rem; color: #6c7a9c; border-top: 1px solid rgba(255,255,255,.06); }
.sidebar-backdrop { display: none; }

.app-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.app-topbar {
  height: 62px; background: #fff; border-bottom: 1px solid #e3e8f2; display: flex; align-items: center;
  padding: 0 1.25rem; position: sticky; top: 0; z-index: 1030;
}
.app-content { padding: 1.5rem; flex: 1; max-width: 1600px; width: 100%; }
.app-footer { padding: 1rem 1.5rem; }
.avatar-circle {
  width: 32px; height: 32px; border-radius: 50%; background: #1f4e8c; color: #fff; display: inline-flex;
  align-items: center; justify-content: center; font-weight: 600; font-size: .9rem; flex: 0 0 32px;
}

@media (max-width: 991.98px) {
  .app-sidebar { position: fixed; left: 0; top: 0; transform: translateX(-100%); transition: transform .2s ease; }
  body.sidebar-open .app-sidebar { transform: translateX(0); }
  body.sidebar-open .sidebar-backdrop { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 1035; }
  .app-content { padding: 1rem; }
}

/* ---------- 元件 ---------- */
.card { border-color: #e3e8f2; }
.card-header { background: #fff; border-bottom-color: #e9edf5; font-weight: 600; }
.stat-card .stat-icon {
  width: 52px; height: 52px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.5rem; flex: 0 0 52px;
}
a .stat-card { transition: transform .12s ease, box-shadow .12s ease; }
a:hover .stat-card { transform: translateY(-2px); box-shadow: 0 .5rem 1rem rgba(20,33,61,.08) !important; }
.table > :not(caption) > * > * { padding: .65rem .75rem; }
.table thead th { font-size: .82rem; color: #5b6784; font-weight: 600; background: #f8fafd; white-space: nowrap; }
.table-card { margin-bottom: 0; }
.status-badge { font-weight: 500; font-size: .78rem; }
.filter-bar { background: #fff; border: 1px solid #e3e8f2; border-radius: .75rem; padding: .9rem 1rem; margin-bottom: 1rem; }
.form-label { font-weight: 500; font-size: .9rem; }
.required::after { content: " *"; color: #dc3545; }
.empty-state { color: #8a94ad; }
.text-mono, .hash { font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace; }
.hash { font-size: .75rem; word-break: break-all; color: #6c757d; }
.cursor-pointer { cursor: pointer; }

/* ---------- 時間軸 ---------- */
.timeline { position: relative; padding-left: 1.75rem; margin: 0; list-style: none; }
.timeline::before { content: ""; position: absolute; left: .55rem; top: .25rem; bottom: .25rem; width: 2px; background: #dfe5f0; }
.timeline-item { position: relative; padding-bottom: 1.1rem; }
.timeline-item:last-child { padding-bottom: 0; }
.timeline-dot {
  position: absolute; left: -1.75rem; top: .1rem; width: 1.15rem; height: 1.15rem; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: .65rem; color: #fff; box-shadow: 0 0 0 3px #fff;
}
.timeline-time { font-size: .78rem; color: #8a94ad; }
.timeline-comment { background: #f6f8fc; border-radius: .5rem; padding: .5rem .75rem; margin-top: .35rem; white-space: pre-wrap; font-size: .9rem; }

/* ---------- 簽核步驟條 ---------- */
.flow-steps { display: flex; gap: 0; counter-reset: step; flex-wrap: wrap; }
.flow-step { flex: 1; min-width: 110px; text-align: center; position: relative; padding-top: 2.2rem; font-size: .85rem; color: #8a94ad; }
.flow-step::before {
  content: ""; position: absolute; top: .9rem; left: 0; right: 0; height: 3px; background: #dfe5f0;
}
.flow-step:first-child::before { left: 50%; }
.flow-step:last-child::before { right: 50%; }
.flow-step .dot {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 2rem; height: 2rem; border-radius: 50%;
  background: #fff; border: 3px solid #dfe5f0; display: flex; align-items: center; justify-content: center; z-index: 1; font-size: .9rem;
}
.flow-step.done { color: #198754; }
.flow-step.done .dot { background: #198754; border-color: #198754; color: #fff; }
.flow-step.done::before { background: #198754; }
.flow-step.current { color: #1f4e8c; font-weight: 600; }
.flow-step.current .dot { border-color: #1f4e8c; color: #1f4e8c; box-shadow: 0 0 0 4px rgba(31,78,140,.15); }
.flow-step.rejected { color: #dc3545; }
.flow-step.rejected .dot { border-color: #dc3545; color: #dc3545; }

/* ---------- 研究紀錄內容 ---------- */
.record-content { font-size: 1rem; line-height: 1.8; word-wrap: break-word; overflow-wrap: anywhere; }
.record-content img { max-width: 100%; height: auto; border-radius: .25rem; }
.record-content table { border-collapse: collapse; margin: .5rem 0; max-width: 100%; }
.record-content table td, .record-content table th { border: 1px solid #ced4da; padding: .35rem .6rem; }
.record-content blockquote { border-left: 4px solid #dfe5f0; padding-left: 1rem; color: #555; }
.record-content pre { background: #f6f8fc; padding: .75rem; border-radius: .5rem; white-space: pre-wrap; }
.record-content h1, .record-content h2, .record-content h3 { font-size: 1.2rem; font-weight: 700; margin-top: 1rem; }
.record-content h4, .record-content h5, .record-content h6 { font-size: 1.05rem; font-weight: 700; margin-top: .75rem; }
.watermark-void { position: relative; }
.watermark-void::after {
  content: "作廢"; position: absolute; top: 40%; left: 50%; transform: translate(-50%, -50%) rotate(-20deg);
  font-size: 7rem; font-weight: 900; color: rgba(220,53,69,.12); pointer-events: none;
}

/* ---------- 統計矩陣 ---------- */
.matrix-table td, .matrix-table th { text-align: center; white-space: nowrap; font-size: .85rem; }
.matrix-table td.warn { background: #fff3cd; }
.matrix-table td.ok { background: #e8f5ee; }
.matrix-table td.none { color: #c0c7d6; }
.matrix-table .sticky-col { position: sticky; left: 0; background: #fff; z-index: 1; text-align: left; }

/* ---------- 訪客（登入）頁 ---------- */
.guest-body { min-height: 100vh; background: linear-gradient(135deg, #14213d 0%, #1f4e8c 60%, #2d6cb5 100%); }
.guest-wrap { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 1.5rem; }
.guest-card { width: 100%; max-width: 420px; background: #fff; border-radius: 1rem; padding: 2.25rem 2rem; box-shadow: 0 1.5rem 3rem rgba(0,0,0,.25); }
.guest-logo {
  width: 64px; height: 64px; border-radius: 18px; margin: 0 auto; display: flex; align-items: center; justify-content: center;
  background: #fca311; color: #14213d; font-size: 2rem;
}

/* ---------- 編輯器 ---------- */
.jodit-container:not(.jodit_inline) { border-radius: .5rem; }
.editor-wrap .jodit-workplace { min-height: 420px; }
.attachment-list .list-group-item { font-size: .9rem; }
.dropzone {
  border: 2px dashed #c6d0e1; border-radius: .75rem; padding: 1rem; text-align: center; color: #6c7a9c; background: #fafbfe;
  cursor: pointer; transition: background .15s ease, border-color .15s ease;
}
.dropzone.dragover { background: #eef3fb; border-color: #1f4e8c; }

@media print {
  .app-sidebar, .app-topbar, .app-footer, .no-print, .btn { display: none !important; }
  .app-content { padding: 0; }
  .app-body { background: #fff; }
}