/* ══════════════════════════════════════════════════════════════════════
   ATTENDANCE — lưới chấm công theo tháng.
   Cell dùng một biến duy nhất để thay đổi kích thước theo breakpoint.
══════════════════════════════════════════════════════════════════════ */

.att {
  --att-cell: 24px;
  --att-member-w: calc(var(--sidebar-w) - var(--space-8));
  --att-summary-w: calc(var(--space-16) + var(--space-3));

  min-height: 100dvh;
  padding: var(--space-4);
  background: var(--bg);
  color: var(--text);
  overflow-x: hidden;
}

.att__icon {
  width: var(--space-4);
  height: var(--space-4);
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: calc(var(--space-1) / 2);
  stroke-linecap: round;
  stroke-linejoin: round;
}

.att__touch-button {
  min-width: var(--row-h);
  min-height: var(--row-h);
}

/* ══ HEADER ═══════════════════════════════════════════════════════════ */

.att__header {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

.att__title {
  font-size: clamp(var(--fs-md), 5vw, var(--fs-lg));
}

.att__subtitle {
  margin-top: var(--space-1);
  color: var(--text-muted);
  font-size: var(--fs-sm);
}

.att__month-picker {
  display: grid;
  grid-template-columns: var(--row-h) minmax(0, 1fr) var(--row-h);
  align-items: center;
  gap: var(--space-2);
}

.att__month-label {
  text-align: center;
  font-size: var(--fs-base);
}

.att__header-actions {
  display: flex;
  gap: var(--space-2);
}

.att__export {
  flex: 1;
  min-height: var(--row-h);
}

/* ══ KPI ══════════════════════════════════════════════════════════════ */

.att__stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

.att__stat {
  min-width: 0;
}

.att__stat .stat__value {
  font-size: clamp(var(--fs-lg), 6vw, var(--fs-xl));
}

.att__stat--warn .stat__value {
  color: var(--due-today);
}

.att__stat--info .stat__value {
  color: var(--info);
}

/* ══ TOOLBAR ══════════════════════════════════════════════════════════ */

.att__toolbar {
  display: none;
  margin-bottom: var(--space-4);
}

.att__search {
  min-width: 0;
}

.att__select,
.att__page-size {
  position: relative;
}

.att__select-trigger,
.att__page-size-trigger,
.att__mobile-filter-trigger {
  list-style: none;
}

.att__select-trigger::-webkit-details-marker,
.att__page-size-trigger::-webkit-details-marker,
.att__mobile-filter-trigger::-webkit-details-marker {
  display: none;
}

.att__select-trigger {
  display: flex;
  align-items: center;
}

.att__select-menu {
  position: absolute;
  top: calc(100% + var(--space-1));
  left: 0;
  right: 0;
  z-index: var(--z-dropdown);
}

.att__legend {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.att__legend-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--text-muted);
  font-size: var(--fs-xs);
  white-space: nowrap;
}

.att__legend-swatch {
  width: var(--space-3);
  height: var(--space-3);
  flex: none;
  border-radius: var(--radius-sm);
}

.att__legend-swatch--ontime {
  background: var(--success-soft);
  border: calc(var(--space-1) / 4) solid var(--success-border);
}

.att__legend-swatch--late {
  background:
    linear-gradient(
      135deg,
      var(--warn) 0 50%,
      var(--success-soft) 50% 100%
    );
}

.att__legend-swatch--early {
  background:
    linear-gradient(
      135deg,
      var(--success-soft) 0 50%,
      var(--warn) 50% 100%
    );
}

.att__legend-swatch--leave {
  background: var(--info-soft);
  border: calc(var(--space-1) / 4) solid var(--info-border);
}

.att__legend-swatch--absent {
  background: var(--danger-soft);
  border: calc(var(--space-1) / 4) solid var(--danger-border);
}

.att__legend-swatch--remote {
  background: var(--primary-soft);
  border: calc(var(--space-1) / 4) solid var(--primary-border);
}

/* ══ MOBILE FILTER SHEET ═════════════════════════════════════════════ */

.att__mobile-filters {
  margin-bottom: var(--space-4);
}

.att__mobile-filter-trigger {
  min-height: var(--row-h);
}

.att__mobile-filter-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  background: var(--overlay);
  opacity: 0;
  visibility: hidden;
}

.att__mobile-filter-sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: calc(var(--z-modal) + 1);
  max-height: 88vh;
  background: var(--surface);
  border-top: calc(var(--space-1) / 4) solid var(--border);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  box-shadow: var(--shadow-lg);
  transform: translateY(100%);
  transition: transform var(--t-slow);
}

.att__mobile-filters[open] .att__mobile-filter-backdrop {
  opacity: 1;
  visibility: visible;
}

.att__mobile-filters[open] .att__mobile-filter-sheet {
  transform: translateY(0);
}

.att__mobile-filter-header {
  padding: var(--space-5);
  border-bottom: calc(var(--space-1) / 4) solid var(--border);
}

.att__mobile-filter-body {
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  overflow-y: auto;
}

/* ══ DESKTOP/TABLET GRID ═════════════════════════════════════════════
   Hidden trên mobile. Trang không cuộn ngang; chỉ vùng scroll-x này cuộn.
══════════════════════════════════════════════════════════════════════ */

.att__grid-card {
  display: none;
  margin-bottom: var(--space-5);
  overflow: hidden;
}

.att__grid-scroll {
  position: relative;
}

.att__table {
  width: max-content;
  min-width: 100%;
}

.att__table th,
.att__table td {
  padding: var(--space-1);
  text-align: center;
  white-space: nowrap;
}

.att__member-head,
.att__member-cell {
  position: sticky;
  left: 0;
  width: var(--att-member-w);
  min-width: var(--att-member-w);
  max-width: var(--att-member-w);
  text-align: left !important;
  background: var(--surface);
}

.att__member-head {
  z-index: calc(var(--z-sticky) + 3);
}

.att__member-cell {
  z-index: calc(var(--z-sticky) + 1);
}

.att__member {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.att__member-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-1);
}

.att__member-name {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.att__role--dev {
  color: var(--role-dev);
}

.att__role--art {
  color: var(--role-art);
}

.att__role--gd {
  color: var(--role-gamedesign);
}

.att__role--qa {
  color: var(--role-qa);
}

.att__day-head,
.att__weekday,
.att__day-slot {
  width: calc(var(--att-cell) + var(--space-2));
  min-width: calc(var(--att-cell) + var(--space-2));
  max-width: calc(var(--att-cell) + var(--space-2));
}

.att__day-head,
.att__weekday {
  color: var(--text-muted);
  font-size: var(--fs-xs);
}

.att__day-head--off,
.att__weekday--off,
.att__day-slot--off {
  background:
    repeating-linear-gradient(
      135deg,
      var(--surface-2),
      var(--surface-2) var(--space-1),
      var(--border) var(--space-1),
      var(--border) calc(var(--space-1) + calc(var(--space-1) / 4))
    );
}

.att__day-head--void,
.att__weekday--void,
.att__day-slot--void {
  background: transparent;
}

.att__day-head.is-today,
.att__weekday.is-today,
.att__day-slot.is-today {
  border-left: calc(var(--space-1) / 2) solid var(--primary);
  border-right: calc(var(--space-1) / 2) solid var(--primary);
}

/* ══ ATTENDANCE CELL ═════════════════════════════════════════════════
   Default = đúng giờ. Hai tam giác cho late/early cho phép biểu diễn
   độc lập hai chiều check-in/check-out.
══════════════════════════════════════════════════════════════════════ */

.att__cell {
  position: relative;
  width: var(--att-cell);
  height: var(--att-cell);
  min-width: var(--att-cell);
  min-height: var(--att-cell);
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--success-soft);
  color: var(--success);
  display: grid;
  place-items: center;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  cursor: pointer;
}

.att__cell::before {
  content: "";
  width: calc(var(--att-cell) / 2);
  height: calc(var(--att-cell) / 4);
  border-left: calc(var(--space-1) / 2) solid var(--success);
  border-bottom: calc(var(--space-1) / 2) solid var(--success);
  transform: translateY(calc(var(--space-1) * -0.5)) rotate(-45deg);
}

.att__cell::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--row-h);
  height: var(--row-h);
  transform: translate(-50%, -50%);
}

.att__cell--late {
  background:
    linear-gradient(
      135deg,
      var(--warn) 0 50%,
      var(--success-soft) 50% 100%
    );
}

.att__cell--early {
  background:
    linear-gradient(
      135deg,
      var(--success-soft) 0 50%,
      var(--warn) 50% 100%
    );
}

.att__cell--late::before,
.att__cell--early::before,
.att__cell--both::before,
.att__cell--leave::before,
.att__cell--absent::before,
.att__cell--remote::before,
.att__cell--off::before,
.att__cell--void::before {
  display: none;
}

.att__cell--both {
  background: var(--warn);
  color: var(--text-inverse);
}

.att__cell--leave {
  background: var(--info-soft);
  color: var(--info);
}

.att__cell--absent {
  background: var(--danger-soft);
  color: var(--danger);
}

.att__cell--remote {
  background: var(--primary-soft);
  color: var(--primary);
}

.att__cell--off {
  background:
    repeating-linear-gradient(
      135deg,
      var(--surface-2),
      var(--surface-2) var(--space-1),
      var(--border) var(--space-1),
      var(--border) calc(var(--space-1) + calc(var(--space-1) / 4))
    );
  color: var(--text-faint);
  cursor: default;
}

.att__cell--void {
  background: transparent;
  cursor: default;
}

.att__cell.is-selected {
  box-shadow: var(--shadow-focus);
}

.att__member-row--readonly .att__cell {
  cursor: default;
}

/* ══ REPEATED ROW PLACEHOLDER ════════════════════════════════════════ */

.att__repeat-days {
  min-width: calc((var(--att-cell) + var(--space-2)) * 31);
  background:
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent calc(var(--att-cell) + var(--space-1)),
      var(--border) calc(var(--att-cell) + var(--space-1)),
      var(--border) calc(var(--att-cell) + var(--space-2))
    );
}

/* ══ STICKY SUMMARY COLUMNS ═════════════════════════════════════════ */

.att__summary-head,
.att__summary-cell {
  position: sticky;
  width: var(--att-summary-w);
  min-width: var(--att-summary-w);
  max-width: var(--att-summary-w);
  background: var(--surface);
}

.att__summary-head {
  z-index: calc(var(--z-sticky) + 3);
}

.att__summary-cell {
  z-index: calc(var(--z-sticky) + 1);
}

.att__summary-head--rate,
.att__summary-cell--rate {
  right: 0;
}

.att__summary-head--leave,
.att__summary-cell--leave {
  right: var(--att-summary-w);
}

.att__summary-head--early,
.att__summary-cell--early {
  right: calc(var(--att-summary-w) * 2);
}

.att__summary-head--late,
.att__summary-cell--late {
  right: calc(var(--att-summary-w) * 3);
}

.att__summary-cell--rate {
  font-weight: var(--fw-bold);
}

.att__summary-cell--danger {
  color: var(--danger);
}

/* ══ POPOVER EDITOR ══════════════════════════════════════════════════ */

.att__popover {
  position: fixed;
  left: var(--space-4);
  right: var(--space-4);
  bottom: var(--space-4);
  z-index: var(--z-modal);
  width: auto;
  max-height: 88vh;
  overflow-y: auto;
}

.att__popover-header {
  padding-bottom: var(--space-3);
  border-bottom: calc(var(--space-1) / 4) solid var(--border);
}

.att__popover-body {
  padding: var(--space-4) 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.att__popover-check {
  min-height: var(--row-h);
}

.att__early-control {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.att__minutes {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.att__minutes-input {
  width: calc(var(--space-16) + var(--space-8));
}

.att__minutes-suffix {
  color: var(--text-muted);
  font-size: var(--fs-sm);
}

.att__popover-actions {
  padding-top: var(--space-3);
  border-top: calc(var(--space-1) / 4) solid var(--border);
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
}

/* ══ PAGINATION ══════════════════════════════════════════════════════ */

.att__pagination {
  padding: var(--space-4);
  border-top: calc(var(--space-1) / 4) solid var(--border);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.att__pagination-summary {
  color: var(--text-muted);
  font-size: var(--fs-sm);
}

.att__pagination-controls {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.att__page-size-trigger {
  display: flex;
  align-items: center;
}

.att__page-size-menu {
  position: absolute;
  left: 0;
  bottom: calc(100% + var(--space-1));
  width: 100%;
  z-index: var(--z-dropdown);
}

.att__pages {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  overflow-x: auto;
}

.att__pages .btn {
  min-width: var(--row-h);
  min-height: var(--row-h);
  flex: none;
}

/* ══ MOBILE LIST ≤480px ══════════════════════════════════════════════ */

.att__mobile-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

.att__mobile-member {
  min-width: 0;
  padding: var(--space-4);
  cursor: pointer;
}

.att__mobile-member--alert {
  box-shadow:
    inset calc(var(--space-1) * .75) 0 0 var(--danger),
    var(--shadow-sm);
}

.att__mobile-member-top {
  min-width: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
}

.att__mobile-rate {
  flex: none;
  color: var(--text);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
}

.att__mobile-rate--danger {
  color: var(--danger);
}

.att__dot-scroll {
  margin-top: var(--space-4);
}

.att__dots {
  width: max-content;
  min-height: var(--space-6);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0 var(--space-1);
}

.att__dot {
  width: var(--space-2);
  height: var(--space-2);
  flex: none;
  border-radius: var(--radius-full);
  background: var(--success);
}

.att__dot--late,
.att__dot--early,
.att__dot--both {
  background: var(--warn);
}

.att__dot--leave {
  background: var(--info);
}

.att__dot--absent {
  background: var(--danger);
}

.att__dot--remote {
  background: var(--primary);
}

.att__dot--off {
  background: var(--border-strong);
}

.att__dot--void {
  background: var(--surface-2);
}

.att__mobile-dots-placeholder {
  margin-top: var(--space-4);
  min-height: var(--space-6);
  display: flex;
  align-items: center;
  color: var(--text-muted);
  font-size: var(--fs-xs);
}

/* ══ MOBILE ABNORMAL-DAY SHEET ═══════════════════════════════════════ */

.att__mobile-detail-sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-drawer);
  max-height: 88vh;
  background: var(--surface);
  border-top: calc(var(--space-1) / 4) solid var(--border);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  box-shadow: var(--shadow-lg);
  transform: translateY(100%);
  transition: transform var(--t-slow);
}

.att__mobile-detail-sheet.is-open {
  transform: translateY(0);
}

.att__mobile-detail-header {
  padding: var(--space-4);
  border-bottom: calc(var(--space-1) / 4) solid var(--border);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
}

.att__mobile-detail-body {
  padding: var(--space-3);
  overflow-y: auto;
}

.att__exception-row {
  width: 100%;
  min-height: var(--row-h);
  padding: var(--space-2);
  border: 0;
  border-bottom: calc(var(--space-1) / 4) solid var(--border);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.att__exception-date {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
}

/* ══ EMPTY + SKELETON ════════════════════════════════════════════════ */

.att__empty-icon {
  fill: none;
  stroke: currentColor;
  stroke-width: calc(var(--space-1) / 2);
}

.att__skeleton-grid {
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-3);
}

.att__skeleton-avatar {
  width: var(--space-8);
  height: var(--space-8);
  border-radius: var(--radius-full);
}

.att__skeleton-name,
.att__skeleton-days {
  height: var(--space-3);
}

.att__skeleton-name--short {
  width: 65%;
}

/* ══ HOVER ════════════════════════════════════════════════════════════
   Hover chỉ tồn tại trên thiết bị thực sự hỗ trợ hover.
══════════════════════════════════════════════════════════════════════ */

@media (hover: hover) {
  .att__mobile-member:hover {
    background: var(--surface-hover);
  }

  .att__member-row:not(.att__member-row--readonly) .att__cell:not([disabled]):hover {
    transform: scale(1.08);
    box-shadow: var(--shadow-focus);
  }

  .att__exception-row:hover {
    background: var(--surface-hover);
  }
}

/* ══ ≤480px ══════════════════════════════════════════════════════════ */

@media (max-width: 480px) {
  .att .input,
  .att .select,
  .att .textarea {
    font-size: var(--fs-md);
  }

  .att__mobile-detail-sheet {
    display: block;
  }
}

/* ══ 481–768px ════════════════════════════════════════════════════════
   Lưới thật xuất hiện; cell 18px, weekday ẩn, chỉ giữ Late + On-time %.
══════════════════════════════════════════════════════════════════════ */

@media (min-width: 481px) {
  .att {
    --att-cell: 18px;
    padding: var(--space-5);
  }

  .att__header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }

  .att__month-picker {
    grid-column: 1 / -1;
    max-width: calc(var(--drawer-w) - var(--space-5));
  }

  .att__header-actions {
    justify-self: end;
  }

  .att__export {
    flex: none;
  }

  .att__grid-card {
    display: block;
  }

  .att__mobile-list,
  .att__mobile-detail-sheet {
    display: none;
  }

  .att__weekday-row {
    display: none;
  }

  .att__summary-head--early,
  .att__summary-cell--early,
  .att__summary-head--leave,
  .att__summary-cell--leave {
    display: none;
  }

  .att__summary-head--rate,
  .att__summary-cell--rate {
    right: 0;
  }

  .att__summary-head--late,
  .att__summary-cell--late {
    right: var(--att-summary-w);
  }

  .att__pagination {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  .att__pagination-controls {
    flex-direction: row;
    align-items: center;
  }

  .att__page-size {
    min-width: calc(var(--space-16) + var(--space-16));
  }

      .att__popover {
    left: auto;
    right: var(--space-5);
    bottom: var(--space-5);
    width: var(--drawer-w);
  }
}

/* ══ 769–1279px ═══════════════════════════════════════════════════════
   Khôi phục weekday và đủ 4 summary; cell tăng lên 22px.
══════════════════════════════════════════════════════════════════════ */

@media (min-width: 769px) {
  .att {
    --att-cell: 22px;
    padding: var(--space-6);
  }

  .att__header {
    grid-template-columns: minmax(0, 1fr) auto auto;
  }

  .att__month-picker {
    grid-column: auto;
    max-width: none;
  }

  .att__stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .att__mobile-filters {
    display: none;
  }

  .att__toolbar {
    display: grid;
    grid-template-columns:
      minmax(0, 2fr)
      minmax(0, 1fr)
      minmax(0, 1fr);
    gap: var(--space-3);
    align-items: center;
  }

  .att__legend {
    grid-column: 1 / -1;
  }

  .att__weekday-row {
    display: table-row;
  }

  .att__summary-head--early,
  .att__summary-cell--early,
  .att__summary-head--leave,
  .att__summary-cell--leave {
    display: table-cell;
  }

  .att__summary-head--rate,
  .att__summary-cell--rate {
    right: 0;
  }

  .att__summary-head--leave,
  .att__summary-cell--leave {
    right: var(--att-summary-w);
  }

  .att__summary-head--early,
  .att__summary-cell--early {
    right: calc(var(--att-summary-w) * 2);
  }

  .att__summary-head--late,
  .att__summary-cell--late {
    right: calc(var(--att-summary-w) * 3);
  }

  .att__popover {
    position: absolute;
    left: calc(
      var(--att-member-w) +
      ((var(--att-cell) + var(--space-2)) * 13)
    );
    right: auto;
    bottom: auto;
    top: calc(var(--topbar-h) * 3);
    width: var(--drawer-w);
  }
}

/* ══ ≥1280px ═════════════════════════════════════════════════════════
   Cell đạt kích thước desktop chuẩn 24px và toolbar trở thành một hàng.
══════════════════════════════════════════════════════════════════════ */

@media (min-width: 1280px) {
  .att {
    --att-cell: 24px;
  }

  .att__toolbar {
    grid-template-columns:
      minmax(0, 2fr)
      minmax(0, 1fr)
      minmax(0, 1fr)
      auto;
  }

  .att__legend {
    grid-column: auto;
    justify-content: flex-end;
  }
}

/*
  Đề xuất thêm token:
  Không cần token màu/spacing mới.

  --att-cell là biến cục bộ bắt buộc của màn Attendance:
  18px ở tablet dọc, 22px ở tablet/laptop và 24px ở desktop,
  đúng theo đặc tả responsive của màn này.
*/
/* ══════════════════════════════════════════════════════════════════════
   PHAN NOI VAO APP THAT
══════════════════════════════════════════════════════════════════════ */

.att__panel {
  min-width: 0;
  overflow: hidden;
  margin-bottom: var(--space-5);
}

/* Chu viet tat trong o (P / A / R). O "dung gio" co tinh de trong:
   luoi 31 cot ma o nao cung co chu thi khong nhin ra ngay bat thuong. */
.att__cell-mark {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  line-height: 1;
}

/* Chu cai dau cua thu, nam duoi so ngay */
.att__day-weekday {
  display: block;
  font-size: var(--fs-xs);
  font-weight: var(--fw-regular);
  color: var(--text-faint);
}

/* Bon cot tong ket cuoi moi dong */
.att__summary-head,
.att__summary-cell {
  text-align: right;
  white-space: nowrap;
}

/* Nhan chuyen mon — cung bang mau voi man Performance */
.att__role-badge--dev { background: var(--primary-soft); color: var(--role-dev); border-color: var(--primary-border); }
.att__role-badge--art { background: var(--neutral-soft); color: var(--role-art); border-color: var(--neutral-border); }
.att__role-badge--game_design { background: var(--warn-soft); color: var(--role-gamedesign); border-color: var(--warn-border); }
.att__role-badge--qa { background: var(--success-soft); color: var(--role-qa); border-color: var(--success-border); }
.att__role-badge--pm { background: var(--info-soft); color: var(--role-pm); border-color: var(--info-border); }
.att__role-badge--none { display: none; }

/* ── O sua: popover that thi phai co nen mo va vi tri co dinh ────────
   Ban ve dat popover trong luong tai lieu de nhin thay ca hai trang thai.
   Chay that thi no phai noi len tren, khong day luoi xuong. */
.att__popover {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: var(--z-modal);
  width: min(var(--drawer-w), calc(100vw - var(--space-8)));
  max-height: 90dvh;
  overflow-y: auto;
}

.att__editor-backdrop {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-modal) - 1);
  background: var(--overlay);
}

.att__page-current {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  padding: 0 var(--space-2);
}

/* Cot ngay hom nay: vien doc de do mat theo cot */
.att__day-head.is-today,
.att__day-slot.is-today {
  background: var(--primary-soft);
}

/* ── Bo loc o man nho — cung ly do nhu man Performance:
   giu MOT bo dieu khien, duoi 769px xep doc thanh cot. ────────────── */
.att__toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
}

.att__legend {
  flex-wrap: wrap;
}

@media (min-width: 481px) {
  .att__toolbar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .att__search,
  .att__legend {
    grid-column: 1 / -1;
  }
}

/* ── 360px: tha bon cot tong ket ra khoi sticky ──────────────────────
   Cot "Member" sticky trai + bon cot tong ket sticky phai cong lai da
   het 360px, khong con mot pixel nao cho o ngay — luoi cham cong ma
   khong nhin thay ngay nao thi vo dung.
   Duoi 481px chi giu cot Member dinh lai (de biet dang xem dong cua ai),
   bon cot tong ket troi theo luoi va nam o cuoi. */
@media (max-width: 480px) {
  .att__summary-head,
  .att__summary-cell {
    position: static;
  }
}

/* ── 360px: thu hep cot "Member" ─────────────────────────────────────
   208px cho ten + nhan chuyen mon la hop ly tren desktop, nhung o be
   ngang 360 no an mat hon nua man hinh. Thu con 128px va bo nhan
   chuyen mon — chuyen mon da co bo loc rieng, con o ngay thi khong. */
@media (max-width: 480px) {
  .att {
    --att-member-w: calc(var(--space-16) * 2);
  }

  .att__member-cell .att__role-badge {
    display: none;
  }

  .att__member-name {
    font-size: var(--fs-sm);
  }
}