/* Daily attendance timesheet */

#tab-my-timesheet .my-att-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem 0.85rem;
  align-items: flex-end;
  margin: 0.75rem 0 0;
}

#tab-my-timesheet .my-att-toolbar label {
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--muted, #6b7280);
  min-width: 9.5rem;
}

#tab-my-timesheet .my-att-toolbar input[type='date'],
#tab-my-timesheet .my-att-toolbar input[type='month'] {
  min-width: 10.5rem;
  width: auto;
}

#tab-my-timesheet .my-att-table-wrap {
  overflow: auto;
  margin-top: 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius, 8px);
  background: var(--panel, transparent);
  -webkit-overflow-scrolling: touch;
}

#tab-my-timesheet .my-att-table {
  width: 100%;
  min-width: 52rem;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.8125rem;
  table-layout: fixed;
}

#tab-my-timesheet .my-att-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--surface, var(--surface-2, var(--bg)));
  color: var(--muted);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  text-align: left;
  padding: 0.65rem 0.75rem;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

#tab-my-timesheet .my-att-table tbody td {
  padding: 0.75rem;
  vertical-align: top;
  text-align: left;
  border-bottom: 1px solid var(--border);
  color: var(--text);
}

#tab-my-timesheet .my-att-table tbody tr:last-child td {
  border-bottom: none;
}

#tab-my-timesheet .my-att-table tbody tr:hover td {
  background: color-mix(in srgb, var(--accent-muted, rgba(76, 117, 163, 0.12)) 70%, transparent);
}

#tab-my-timesheet .my-att-table .my-att-col-date {
  width: 11.5rem;
}

#tab-my-timesheet .my-att-table .my-att-col-punch {
  width: 8.5rem;
}

#tab-my-timesheet .my-att-table .my-att-col-total {
  width: 5.5rem;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  white-space: nowrap;
}

#tab-my-timesheet .my-att-table .my-att-col-action {
  width: 7.5rem;
  text-align: right;
}

#tab-my-timesheet .my-att-date {
  display: block;
  font-weight: 600;
  line-height: 1.35;
  white-space: normal;
}

#tab-my-timesheet .my-att-punch {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

#tab-my-timesheet .my-att-time {
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  font-size: 0.84rem;
  line-height: 1.25;
  color: var(--text);
  white-space: nowrap;
}

#tab-my-timesheet .my-att-place {
  margin: 0;
  font-size: 0.68rem;
  font-weight: 450;
  color: var(--muted, #9ca3af);
  line-height: 1.3;
  white-space: normal;
  overflow-wrap: anywhere;
  max-width: 7.5rem;
}

#tab-my-timesheet .my-att-empty-cell {
  color: var(--muted);
  font-weight: 500;
}

#tab-my-timesheet .my-att-off-badge {
  display: inline-block;
  margin-top: 0.3rem;
  margin-inline-end: 0.35rem;
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #64748b;
  background: color-mix(in srgb, var(--muted, #94a3b8) 18%, transparent);
}

#tab-my-timesheet .my-att-row--off td {
  background: color-mix(in srgb, var(--accent-muted, rgba(76, 117, 163, 0.08)) 80%, transparent);
}

#tab-my-timesheet .my-att-off-cell {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 500;
}

#tab-my-timesheet .my-att-change-req__label {
  color: #f87171;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

#tab-my-timesheet .my-att-change-req__info {
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 999px;
  border: 1px solid #f87171;
  background: transparent;
  color: #f87171;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}

@media (max-width: 720px) {
  #tab-my-timesheet .my-att-toolbar label {
    flex: 1 1 calc(50% - 0.5rem);
    min-width: 0;
  }

  #tab-my-timesheet .my-att-toolbar input[type='date'],
  #tab-my-timesheet .my-att-toolbar input[type='month'] {
    width: 100%;
    min-width: 0;
  }

  #tab-my-timesheet .my-att-table {
    min-width: 46rem;
    font-size: 0.78rem;
  }

  #tab-my-timesheet .my-att-table thead th,
  #tab-my-timesheet .my-att-table tbody td {
    padding: 0.55rem 0.55rem;
  }
}

/* Request-edit popup (portaled to body; uses .tm-modal shell) */
.my-att-edit-modal .my-att-edit-card {
  max-width: min(22.5rem, 100%);
  width: 100%;
  padding: 0.95rem 1rem 1rem;
  gap: 0;
}

.my-att-edit-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 0 0 0.35rem;
}

.my-att-edit-head__text {
  min-width: 0;
}

.my-att-edit-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 650;
  letter-spacing: -0.02em;
  color: var(--text);
  line-height: 1.25;
}

.my-att-edit-date {
  margin: 0.2rem 0 0;
  font-size: 0.78rem !important;
  line-height: 1.35;
}

.my-att-edit-close {
  flex-shrink: 0;
  min-width: 2rem;
  font-size: 1.15rem;
  line-height: 1;
  padding: 0.15rem 0.4rem;
}

.my-att-edit-hint {
  margin: 0 0 0.75rem;
  font-size: 0.72rem !important;
  line-height: 1.4;
}

.my-att-edit-fields {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.my-att-edit-field {
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
  margin: 0;
  font-size: 0.75rem;
  font-weight: 550;
  color: var(--muted);
}

.my-att-edit-field span em {
  font-style: normal;
  font-weight: 450;
  opacity: 0.85;
}

.my-att-edit-field input[type='datetime-local'],
.my-att-edit-field textarea {
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text);
}

.my-att-edit-field textarea {
  resize: vertical;
  min-height: 2.6rem;
}

.my-att-edit-err {
  margin: 0.55rem 0 0;
  font-size: 0.78rem;
}

.my-att-edit-actions {
  margin-top: 0.85rem;
  padding-top: 0.15rem;
}

/* Team Dashboard timesheet tab + My Team timesheet modal */
.td-ts__intro {
  margin: 0 0 0.85rem;
  font-size: 0.78rem;
  line-height: 1.45;
}
.td-ts__toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem 1rem;
  margin-bottom: 0.85rem;
}
.td-ts__field {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  margin: 0;
}
.td-ts__field--check {
  user-select: none;
}
.td-ts__members {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  gap: 0.4rem 0.75rem;
  max-height: 22rem;
  overflow: auto;
  padding: 0.15rem 0.1rem 0.35rem;
}
.td-ts__members--disabled {
  opacity: 0.55;
}
.td-ts__member {
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
  margin: 0;
  padding: 0.35rem 0.45rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--panel);
  font-size: 0.8rem;
  cursor: pointer;
}
.td-ts__member-name {
  font-weight: 550;
  min-width: 0;
}
.td-ts__member-meta {
  font-size: 0.72rem;
}
.my-team-timesheet-modal-card {
  max-width: min(56rem, 96vw);
  width: 100%;
  max-height: min(90vh, 52rem);
  display: flex;
  flex-direction: column;
}
.my-team-timesheet-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.35rem;
}
.my-team-timesheet-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem 0.85rem;
  margin: 0.5rem 0 0.75rem;
  font-size: 0.8rem;
}
.my-team-timesheet-modal-body {
  overflow: auto;
  flex: 1 1 auto;
  min-height: 0;
  padding-bottom: 0.35rem;
}
.mt-ts-remark--absent {
  color: #9a3412;
  font-weight: 600;
}
.mt-ts-remark--off {
  color: #64748b;
  font-weight: 600;
}
.mt-ts-table-wrap {
  margin-top: 0.15rem;
}

/* Attendance request details popup (Requests tab) */
.att-req-detail-modal .att-req-detail-card {
  max-width: min(28rem, 100%);
  width: 100%;
}
.att-req-detail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.55rem;
}
.att-req-detail-body {
  overflow: auto;
  flex: 1 1 auto;
  min-height: 0;
  margin-bottom: 0.35rem;
}
.att-req-detail-actions {
  margin-top: 0.65rem;
  flex-wrap: wrap;
}
.att-req-compare-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.att-req-compare {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8rem;
}
.att-req-compare th,
.att-req-compare td {
  padding: 0.4rem 0.55rem;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
}
.att-req-compare thead th {
  background: color-mix(in srgb, var(--panel) 88%, var(--accent-muted));
  font-weight: 600;
  font-size: 0.72rem;
}
.att-req-compare tbody th {
  font-weight: 550;
  color: var(--muted);
  white-space: nowrap;
}
.att-req-compare tbody tr:last-child th,
.att-req-compare tbody tr:last-child td {
  border-bottom: 0;
}
.att-req-compare td:last-child {
  font-weight: 600;
}

/* Timesheet approvals decide popup */
.tsa-decide-modal .tsa-decide-card {
  max-width: min(30rem, 100%);
  width: 100%;
}
.tsa-decide-form {
  margin-top: 0.35rem;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}
.tsa-field {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.tsa-field__label {
  font-size: 0.78rem;
  font-weight: 600;
}
.tsa-field__hint {
  font-size: 0.7rem;
  line-height: 1.35;
}
.tsa-textarea {
  width: 100%;
  resize: vertical;
  min-height: 4.2rem;
  padding: 0.55rem 0.65rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--panel);
  color: inherit;
  font: inherit;
  font-size: 0.82rem;
  line-height: 1.45;
}
.tsa-textarea:focus {
  outline: 2px solid color-mix(in srgb, var(--accent, #2563eb) 45%, transparent);
  outline-offset: 1px;
}

.tsa-subtabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0 0 0.85rem;
}
.tsa-subtab {
  appearance: none;
  border: 1px solid var(--border, #e2e8f0);
  background: var(--panel, #fff);
  color: inherit;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.4rem 0.75rem;
  border-radius: var(--radius-sm, 6px);
  cursor: pointer;
}
.tsa-subtab.is-active {
  background: color-mix(in srgb, var(--accent, #2563eb) 12%, var(--panel, #fff));
  border-color: color-mix(in srgb, var(--accent, #2563eb) 35%, var(--border, #e2e8f0));
  color: var(--accent, #2563eb);
}
.tsa-month-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 0.65rem;
  margin: 0 0 0.65rem;
}
.tsa-month-label {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  font-size: 0.72rem;
  font-weight: 600;
}
.tsa-month-label input[type='month'] {
  font: inherit;
  font-size: 0.85rem;
  font-weight: 500;
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: var(--radius-sm, 6px);
  background: var(--panel, #fff);
  color: inherit;
}
.tsa-month-modal {
  align-items: stretch;
  justify-content: stretch;
  padding: 0.35rem;
}
.tsa-month-modal .tsa-month-card {
  width: min(100vw - 0.7rem, 100%);
  max-width: none;
  height: calc(100dvh - 0.7rem);
  max-height: calc(100dvh - 0.7rem);
  display: flex;
  flex-direction: column;
  padding: 0.75rem 0.85rem 0.65rem;
  border-radius: var(--radius-sm, 6px);
}
.tsa-month-modal .att-req-detail-head {
  flex: 0 0 auto;
  margin-bottom: 0.4rem;
}
.tsa-month-body {
  overflow: auto;
  flex: 1 1 auto;
  min-height: 0;
}
.tsa-month-table-wrap {
  max-height: none;
  overflow: visible;
  margin-top: 0.35rem;
}

/* SmartHCM-style sheet in monthly approval */
.tsa-sheet {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.tsa-sheet__banner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.35rem 0.75rem;
  padding-bottom: 0.45rem;
  border-bottom: 1px solid var(--border, #cbd5e1);
}
.tsa-sheet__title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.45rem 0.85rem;
}
.tsa-sheet__title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #0f172a;
}
.tsa-sheet__month {
  font-size: 0.95rem;
  font-weight: 650;
  color: #334155;
}
.tsa-sheet__meta {
  margin: 0;
  grid-column: 1 / -1;
  font-size: 0.75rem;
  line-height: 1.4;
  color: #475569;
}
.tsa-sheet__status {
  align-self: start;
  justify-self: end;
}
.tsa-sheet__general {
  margin: 0;
}
.tsa-textarea--compact {
  min-height: 2.6rem;
  font-size: 0.78rem;
}
.tsa-sheet-table-wrap {
  overflow-x: auto;
  border: 1px solid #64748b;
  background: #fff;
  -webkit-overflow-scrolling: touch;
}
.tsa-sheet-table {
  width: 100%;
  min-width: 56rem;
  border-collapse: collapse;
  font-size: 0.72rem;
  color: #1e293b;
}
.tsa-sheet-table thead th {
  background: #e2e8f0;
  color: #0f172a;
  font-weight: 700;
  font-size: 0.68rem;
  text-align: left;
  padding: 0.38rem 0.4rem;
  border: 0.5px solid #64748b;
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 1;
}
.tsa-sheet-table tbody td {
  padding: 0.28rem 0.4rem;
  border: 0.5px solid #64748b;
  vertical-align: middle;
  white-space: nowrap;
}
.tsa-sheet-table td:last-child,
.tsa-sheet-table th:last-child {
  white-space: normal;
  min-width: 9rem;
}
.tsa-col-hours {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.tsa-day-row--off td {
  background: #eef2ff;
  color: #64748b;
}
.tsa-day-row--absent td {
  background: #fff7ed;
  color: #9a3412;
}
.tsa-day-row--alt td {
  background: #f8fafc;
}
.tsa-sheet__summary {
  margin: 0.15rem 0 0;
  font-size: 0.8rem;
  color: #0f172a;
}
.tsa-sheet__stages {
  margin: 0.15rem 0 0;
  font-size: 0.75rem;
  color: #475569;
}
.tsa-sheet__stages summary {
  cursor: pointer;
  font-weight: 600;
  color: #334155;
}
.tsa-sheet__stages ol {
  margin: 0.35rem 0 0;
  padding-left: 1.2rem;
  line-height: 1.45;
}

.tsa-month-modal .my-att-table {
  font-size: 0.78rem;
}
.tsa-month-modal .my-att-table th,
.tsa-month-modal .my-att-table td {
  padding: 0.35rem 0.4rem;
  white-space: nowrap;
}
.tsa-month-modal .my-att-table td:last-child,
.tsa-month-modal .my-att-table th:last-child {
  white-space: normal;
  min-width: 9rem;
}
.tsa-general-block {
  margin: 0 0 0.75rem;
}
.tsa-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.4rem;
}
.tsa-day-row.is-selected td {
  outline: 2px solid color-mix(in srgb, var(--accent, #2563eb) 55%, transparent);
  outline-offset: -2px;
}
.tsa-day-row .mt-ts-day-remark {
  width: 100%;
  min-width: 7rem;
  box-sizing: border-box;
  font: inherit;
  font-size: 0.72rem;
  border: 1px solid #cbd5e1;
  border-radius: 3px;
  padding: 0.2rem 0.35rem;
  background: #fff;
}
.tsa-confirm-modal .tsa-confirm-card {
  max-width: min(26rem, 100%);
  width: 100%;
}
.tsa-month-actions {
  flex: 0 0 auto;
  flex-wrap: wrap;
  margin-top: 0.5rem;
  padding-top: 0.45rem;
  border-top: 1px solid var(--border, #e2e8f0);
}
@media (max-width: 720px) {
  .tsa-month-modal {
    padding: 0;
  }
  .tsa-month-modal .tsa-month-card {
    width: 100%;
    height: 100dvh;
    max-height: 100dvh;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
  }
}

.my-team-timesheet-modal-card {
  max-width: min(72rem, 98vw);
}
.mt-ts-general-remark textarea {
  resize: vertical;
  min-height: 2.4rem;
}
.mt-ts-day-remark {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--panel);
  color: var(--text);
  padding: 0.2rem 0.35rem;
}