/* ══ ActivityLog — nhật ký học, timeline DỌC (shared/activity-log.js) ══
   Dùng ở Teacher Dashboard (Nhật ký học) và trang Tài khoản.
   Chỉ dùng token màu của theme.css. */
.al { display: block; min-width: 0; }
.al-window { font-size: 13px; color: var(--text2); margin: 0 0 10px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.al-window b { color: var(--text); font-weight: 700; }
.al-busy { color: var(--dim); font-size: 12px; }

/* KPI */
.al-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0 0 12px; }
.al-kpi { background: var(--surf); border: 1px solid var(--border); border-radius: var(--r2, 12px); padding: 10px 12px; min-width: 0; }
.al-kpi .v { font-size: 22px; font-weight: 800; color: var(--text); line-height: 1.1; }
.al-kpi .v small { font-size: 13px; font-weight: 600; color: var(--dim); }
.al-kpi .v.al-kpi-sm { font-size: 15px; padding-top: 4px; }
.al-kpi .l { font-size: 12px; color: var(--text2); margin-top: 2px; }

/* Toolbox */
.al-tools { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; margin: 0 0 12px;
  background: var(--surf); border: 1px solid var(--border); border-radius: var(--r2, 12px); }
.al-trow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 0; min-width: 0; }
.al-trow[hidden] { display: none; }
.al-more-tools > summary { cursor: pointer; font-size: 12.5px; font-weight: 700; color: var(--text2); display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 2px; list-style: none; border-radius: 6px; }
.al-more-tools > summary::-webkit-details-marker { display: none; }
.al-more-tools > summary::after { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg); margin: -3px 0 0 4px; transition: transform .15s; }
.al-more-tools[open] > summary::after { transform: rotate(-135deg); margin-top: 3px; }
.al-more-tools > summary b { color: var(--accent); font-weight: 700; }
.al-more-tools > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.al-more-tools > .al-trow { margin-top: 8px; }
.al-tlbl { font-size: 12px; font-weight: 700; color: var(--text2); display: inline-flex; align-items: center; gap: 4px; min-width: 76px; }
.al-segs { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.al-seg, .al-btn, .al-chip {
  font: inherit; font-size: 12.5px; line-height: 1; cursor: pointer; border-radius: 999px;
  border: 1px solid var(--border2, var(--border)); background: transparent; color: var(--text);
  padding: 7px 11px; display: inline-flex; align-items: center; gap: 5px; min-height: 30px;
}
.al-seg.on { background: var(--accent); border-color: var(--accent); color: var(--bg); font-weight: 700; }
.al-btn { background: var(--accent); border-color: var(--accent); color: var(--bg); font-weight: 700; }
.al-btn.ghost { background: transparent; color: var(--text); font-weight: 600; border-color: var(--border2, var(--border)); }
.al-btn:disabled { opacity: .45; cursor: not-allowed; }
.al-seg:focus-visible, .al-btn:focus-visible, .al-chip:focus-visible,
.al-trow input:focus-visible, .al-card:focus-visible, .al-gap-lbl:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}
.al-trow input[type="date"] {
  font: inherit; font-size: 13px; color: var(--text); background: var(--bg);
  border: 1px solid var(--border2, var(--border)); border-radius: 8px; padding: 5px 8px; min-height: 30px; max-width: 100%;
}
.al-range label { font-size: 12.5px; color: var(--text2); display: inline-flex; align-items: center; gap: 5px; }
.al-hint { font-size: 11.5px; color: var(--dim); }
.al-chip { border-color: color-mix(in srgb, var(--al-c) 45%, transparent); }
.al-chip .lg-ic { color: var(--al-c); }
.al-chip b { font-size: 11px; color: var(--text2); font-weight: 700; }
.al-chip.on { background: color-mix(in srgb, var(--al-c) 18%, transparent); border-color: var(--al-c); font-weight: 700; }
.al-tog { font-size: 12.5px; color: var(--text); display: inline-flex; align-items: center; gap: 5px; cursor: pointer; padding: 4px 2px; }
.al-tog input { accent-color: var(--accent); width: 15px; height: 15px; }

/* Lịch thu nhỏ để nhảy nhanh */
.al-map { display: flex; flex-direction: column; gap: 4px; margin: 0 0 12px; overflow-x: auto; }
.al-map-row { display: flex; align-items: center; gap: 8px; }
.al-map-m { font-size: 11px; font-weight: 700; color: var(--dim); width: 34px; flex: none; }
.al-map-cells { display: flex; gap: 3px; flex-wrap: nowrap; }
.al-map-c, .al-map-pad { width: 11px; height: 11px; border-radius: 3px; flex: none; display: block; }
.al-map-c { background: var(--surf2, var(--surf)); border: 1px solid var(--border); cursor: pointer; }
.al-map-c.l1 { background: color-mix(in srgb, var(--teal) 30%, transparent); }
.al-map-c.l2 { background: color-mix(in srgb, var(--teal) 55%, transparent); }
.al-map-c.l3 { background: color-mix(in srgb, var(--teal) 78%, transparent); }
.al-map-c.l4 { background: var(--teal); }
.al-map-c.dim { opacity: .3; }
.al-map-c.hit { outline: 2px solid var(--accent); outline-offset: 1px; }
.al-map-c:hover { outline: 1px solid var(--text2); }

.al-status, .al-notice { font-size: 12.5px; color: var(--text2); margin: 0 0 8px; }
.al-notice { color: var(--text); background: color-mix(in srgb, var(--accent) 10%, transparent); border-radius: 8px; padding: 6px 10px; }

/* Danh sách dọc */
.al-list { list-style: none; margin: 0; padding: 0; position: relative; }
.al-list::before { content: ""; position: absolute; left: 60px; top: 4px; bottom: 4px; width: 2px; background: var(--border); border-radius: 2px; }
.al-month { position: sticky; top: 0; z-index: 2; display: flex; align-items: baseline; gap: 8px;
  padding: 8px 0 6px 72px; background: var(--bg); font-size: 13px; font-weight: 800; color: var(--text); }
.al-month small { font-size: 11.5px; font-weight: 600; color: var(--dim); }
.al-day { display: grid; grid-template-columns: 44px 22px minmax(0, 1fr); column-gap: 6px; align-items: start; margin: 0 0 8px; position: relative; }
.al-when { text-align: right; padding-top: 8px; line-height: 1.05; }
.al-when b { display: block; font-size: 17px; font-weight: 800; color: var(--text); }
.al-when span { font-size: 11px; color: var(--dim); font-weight: 700; }
.al-dot { width: 12px; height: 12px; border-radius: 50%; margin: 13px auto 0; background: var(--surf); border: 2px solid var(--teal); position: relative; z-index: 1; }
.al-day.lvl2 .al-dot { background: color-mix(in srgb, var(--teal) 45%, var(--surf)); }
.al-day.lvl3 .al-dot { background: color-mix(in srgb, var(--teal) 75%, var(--surf)); }
.al-day.lvl4 .al-dot { background: var(--teal); }
.al-day.today .al-dot { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); }
.al-card { background: var(--surf); border: 1px solid var(--border); border-radius: var(--r2, 12px); padding: 9px 12px; min-width: 0; }
.al-day.hit .al-card { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 30%, transparent); }
.al-card-hd { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0 0 5px; }
.al-date { font-size: 13px; font-weight: 700; color: var(--text); }
.al-date em { font-style: normal; font-size: 11px; font-weight: 700; color: var(--accent); margin-left: 4px; }
.al-time, .al-n { font-size: 12px; color: var(--text2); display: inline-flex; align-items: center; gap: 3px; }
.al-n { margin-left: auto; color: var(--dim); }
.al-row { display: flex; gap: 7px; align-items: flex-start; font-size: 13px; line-height: 1.45; color: var(--text2); padding: 2px 0; }
.al-row b { color: var(--text); font-weight: 700; }
.al-row-ic { color: var(--al-c); flex: none; display: inline-flex; padding-top: 2px; }
.al-row.dim { opacity: .45; }
.al-pills { display: flex; flex-wrap: wrap; gap: 4px; }
.al-pill { font-size: 11.5px; color: var(--text); display: inline-flex; align-items: center; gap: 3px; padding: 2px 7px; border-radius: 999px;
  background: color-mix(in srgb, var(--al-c) 14%, transparent); }
.al-pill .lg-ic { color: var(--al-c); }
.al-list.dense .al-day { margin-bottom: 4px; }
.al-list.dense .al-card { padding: 6px 10px; }
.al-list.dense .al-card-hd { margin-bottom: 3px; }
.al-list.dense .al-when { padding-top: 4px; }
.al-list.dense .al-dot { margin-top: 9px; }
.al-gap { padding: 2px 0 10px 72px; }
.al-gap-lbl { font-size: 12px; color: var(--dim); font-style: italic; display: inline-block; padding: 2px 8px; border: 1px dashed var(--border); border-radius: 999px; }
.al-gap-lbl small { font-style: normal; margin-left: 4px; }
.al-gap.hit .al-gap-lbl { border-color: var(--accent); color: var(--text); }
.al-more { margin: 4px 0 0 72px; }
.al-empty { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13.5px; color: var(--text2); padding: 18px 12px;
  border: 1px dashed var(--border); border-radius: var(--r2, 12px); }
.al-foot { font-size: 11.5px; color: var(--dim); margin-top: 12px; }

@media (max-width: 640px) {
  .al-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .al-tlbl { min-width: 0; width: 100%; }
  .al-list::before { left: 46px; }
  .al-day { grid-template-columns: 34px 18px minmax(0, 1fr); column-gap: 4px; }
  .al-when b { font-size: 15px; }
  .al-month, .al-gap { padding-left: 56px; }
  .al-more { margin-left: 0; }
  .al-n { margin-left: 0; }
}
/* Khung "đang tải" .lg-skel vốn định nghĩa ở shared/chrome.css — trang không
   nạp chrome.css (cổng phụ huynh /parent/) thì khung rỗng trắng. Bản dự phòng
   giới hạn trong .al, cùng hình với chrome.css. */
.al .lg-skel { display: block; min-height: 40px; }
.al .lg-skel i { display: block; height: 12px; border-radius: 6px; margin: 9px 0; background: var(--border); animation: alSkel 1.2s ease-in-out infinite; }
.al .lg-skel i:nth-child(1) { width: 45%; height: 16px; }
.al .lg-skel i:nth-child(2) { width: 82%; }
.al .lg-skel i:nth-child(3) { width: 64%; }
@keyframes alSkel { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .al * { scroll-behavior: auto !important; } .al .lg-skel i { animation: none; } }