/** ./src/css/intranet-time-clock.css */

/* =====================================================
   24.6 RELOJ CHECADOR / SEMÁFORO
===================================================== */
.ena-rh-time-clock-status {
  padding: 16px;
  border: 1px solid var(--border-soft-3);
  border-radius: var(--border-radius-md);
  background: var(--bg-surface-muted);
}

.ena-rh-time-clock-status__label {
  margin-bottom: 4px;
  font-size: var(--font-size-2xs);
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.ena-rh-time-clock-status__title {
  font-size: var(--font-size-xl);
  font-weight: 750;
  line-height: var(--line-height-snug);
}

.ena-rh-time-clock-status__description {
  max-width: 58ch;
  margin: 8px 0 0;
  font-size: var(--font-size-sm);
  color: var(--text-muted-strong);
}

.ena-rh-time-clock-status__meta {
  margin-top: 12px;
  font-size: var(--font-size-xs);
  font-weight: 700;
}

.ena-rh-time-clock-status--green {
  border-color: var(--status-green-border);
  background: var(--status-green-bg);
  color: var(--status-green-text);
}

.ena-rh-time-clock-status--yellow {
  border-color: var(--status-yellow-border);
  background: var(--status-yellow-bg);
  color: var(--status-yellow-text);
}

.ena-rh-time-clock-status--red {
  border-color: var(--status-red-border);
  background: var(--status-red-bg);
  color: var(--status-red-text);
}

.ena-rh-time-clock-chip {
  display: inline-flex;
  align-items: center;
  width: max-content;
  max-width: 100%;
  min-height: 26px;
  padding: 4px 10px;
  border: 1px solid var(--border-soft-3);
  border-radius: 999px;
  font-size: var(--font-size-2xs);
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
}

.ena-rh-time-clock-chip--green {
  border-color: var(--status-green-border);
  background: var(--status-green-bg);
  color: var(--status-green-text);
}

.ena-rh-time-clock-chip--yellow {
  border-color: var(--status-yellow-border);
  background: var(--status-yellow-bg);
  color: var(--status-yellow-text);
}

.ena-rh-time-clock-chip--red {
  border-color: var(--status-red-border);
  background: var(--status-red-bg);
  color: var(--status-red-text);
}

/* =====================================================
   EMPLOYEE DASHBOARD: PERIOD FILTER HEADER
===================================================== */

.ena-time-clock__filter {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px 16px;
  padding-top: 12px;
  border-top: 1px solid var(--border-soft-2);
}

.ena-time-clock__filter-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 8px 10px;
}

.ena-time-clock__filter-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ena-time-clock__filter-label {
  font-size: var(--font-size-xs);
  font-weight: 700;
  color: var(--text-muted-strong);
}

.ena-time-clock__filter-input {
  width: auto;
  min-width: 152px;
}

.ena-time-clock__filter-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.ena-time-clock__period {
  margin: 0;
  align-self: center;
  font-size: var(--font-size-xs);
}

.ena-time-clock .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 7px 13px;
  border-radius: 999px;
  border: 1px solid var(--border-soft-3);
  background: var(--bg-surface);
  color: var(--text-color);
  font-size: var(--font-size-xs);
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
  text-decoration: none;
}

.ena-time-clock .button:hover {
  border-color: var(--en-blue);
  color: var(--en-blue);
}

.ena-time-clock .button.button-primary {
  border-color: var(--en-blue);
  background: var(--en-blue);
  color: var(--en-white);
}

.ena-time-clock .button.button-primary:hover {
  border-color: var(--en-green);
  background: var(--en-green);
  color: var(--en-white);
}

@media (max-width: 640px) {
  .ena-time-clock__filter {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .ena-time-clock__filter-form {
    flex-direction: column;
    align-items: stretch;
  }

  .ena-time-clock__filter-input {
    width: 100%;
  }

  .ena-time-clock__filter-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .ena-time-clock .button {
    width: 100%;
    justify-content: center;
  }
}
/* =====================================================
   RH TIME CLOCK: DETAIL PERIOD FILTER
===================================================== */

/* RH selected employee period controls */
.ena-rh-time-clock__period-form {
  margin: 18px 0 20px;
}

.ena-rh-time-clock__period-box {
  border: 1px solid var(--enernav-border, #d9e0e8);
  border-radius: 16px;
  background: var(--enernav-surface-soft, #f7f9fb);
  padding: 18px;
}

.ena-rh-time-clock__period-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.ena-rh-time-clock__period-eyebrow,
.ena-rh-time-clock__period-label {
  display: block;
  margin-bottom: 6px;
  color: var(--enernav-muted, #667085);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.25;
  text-transform: uppercase;
}

.ena-rh-time-clock__period-title {
  margin: 0;
  color: var(--enernav-text, #111827);
  font-size: 1.05rem;
  line-height: 1.25;
}

.ena-rh-time-clock__period-note {
  max-width: 720px;
  margin: 8px 0 0;
  color: var(--enernav-muted, #667085);
  font-size: 0.92rem;
  line-height: 1.5;
}

.ena-rh-time-clock__period-main {
  display: grid;
  grid-template-columns: minmax(220px, 320px) auto;
  align-items: end;
  gap: 14px;
}

.ena-rh-time-clock__period-field {
  display: block;
  min-width: 0;
}

.ena-rh-time-clock__period-input {
  width: 100%;
  max-width: 320px;
}

.ena-rh-time-clock__period-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.ena-rh-time-clock__period-actions .button {
  min-height: 38px;
}

.ena-rh-time-clock__period-reset {
  white-space: nowrap;
}

@media (max-width: 720px) {
  .ena-rh-time-clock__period-box {
    padding: 14px;
  }

  .ena-rh-time-clock__period-main {
    grid-template-columns: 1fr;
  }

  .ena-rh-time-clock__period-input {
    max-width: none;
  }

  .ena-rh-time-clock__period-actions,
  .ena-rh-time-clock__period-actions .button {
    width: 100%;
  }

  .ena-rh-time-clock__period-actions .button {
    justify-content: center;
  }
}

/* Dashboard: employee time clock panel override.
   The outer dashboard section is now the canonical ena-panel. */
.ena-dash-main .ena-time-clock.ena-panel > .enernav-time-clock {
  width: 100%;
  max-width: none;
  margin: 18px 0 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  box-sizing: border-box;
}

.ena-dash-main .ena-time-clock.ena-panel > .enernav-time-clock .enernav-table-wrap {
  max-width: 100%;
}

@media (max-width: 760px) {
  .ena-dash-main .ena-time-clock.ena-panel > .enernav-time-clock {
    margin-top: 16px;
  }
}

/* RH Time Clock layout helpers.
   Scoped to the time clock module only. */
.ena-rh-time-clock__header,
.ena-rh-time-clock__detail-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.ena-rh-time-clock__status-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 14px;
  margin-bottom: 14px;
}

.ena-rh-time-clock__note {
  margin-top: 6px;
}

.ena-rh-time-clock__subheader {
  margin-top: 14px;
  margin-bottom: 14px;
}

.ena-rh-time-clock__view-switch {
  margin-top: 8px;
}

.ena-rh-time-clock__toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(120px, 160px) minmax(120px, 160px) auto;
  gap: 12px;
  align-items: end;
  margin-top: 14px;
  margin-bottom: 14px;
}

.ena-rh-time-clock__search,
.ena-rh-time-clock__filter {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.ena-rh-time-clock__toolbar-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.ena-rh-time-clock__meta,
.ena-rh-time-clock__info-box,
.ena-rh-time-clock__table-wrap {
  margin-bottom: 14px;
}

.ena-rh-time-clock__detail-offset {
  margin-top: 14px;
}

@media (max-width: 860px) {
  .ena-rh-time-clock__header,
  .ena-rh-time-clock__detail-header {
    align-items: stretch;
    flex-direction: column;
  }

  .ena-rh-time-clock__status-grid,
  .ena-rh-time-clock__toolbar {
    grid-template-columns: 1fr;
  }

  .ena-rh-time-clock__toolbar-actions,
  .ena-rh-time-clock__toolbar-actions .button {
    width: 100%;
  }

  .ena-rh-time-clock__toolbar-actions .button {
    justify-content: center;
  }
}

/* Time Clock module/import layout helpers.
   Scoped to time clock module components only. */
.enernav-time-clock__section-header,
.ena-rh-time-clock-import__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

@media (max-width: 860px) {
  .enernav-time-clock__section-header,
  .ena-rh-time-clock-import__header {
    align-items: stretch;
    flex-direction: column;
  }
}


/* Time Clock selected employee summary action helpers.
   Scoped to selected employee summary only. */
.enernav-time-clock .enernav-time-clock-summary__count-row,
.enernav-time-clock .enernav-time-clock-summary__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.enernav-time-clock .enernav-time-clock-summary__count-row,
.enernav-time-clock .enernav-time-clock-summary__score-note {
  margin-top: 8px;
}

.enernav-time-clock .enernav-time-clock-summary__actions {
  margin-top: 14px;
}

@media (max-width: 860px) {
  .enernav-time-clock .enernav-time-clock-summary__actions,
  .enernav-time-clock .enernav-time-clock-summary__actions .button {
    width: 100%;
  }

  .enernav-time-clock .enernav-time-clock-summary__actions .button {
    justify-content: center;
  }
}

/* Time Clock selected employee summary helpers.
   Scoped to selected employee summary only. */
.enernav-time-clock .enernav-time-clock-summary__subtitle,
.enernav-time-clock .enernav-time-clock-summary__note {
  margin-top: 6px;
}

.enernav-time-clock .enernav-time-clock-summary__source-box,
.enernav-time-clock .enernav-time-clock-summary__employee-card,
.enernav-time-clock .enernav-time-clock-summary__grid {
  margin-top: 14px;
}

.enernav-time-clock .enernav-time-clock-summary__employee-meta {
  margin-top: 4px;
}

.enernav-time-clock .enernav-time-clock-summary__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  align-items: stretch;
}

.enernav-time-clock .enernav-time-clock-summary__status-card,
.enernav-time-clock .enernav-time-clock-summary__metric-card {
  min-height: 100%;
}

.enernav-time-clock .enernav-time-clock-summary__status-card {
  display: flex;
  flex-direction: column;
}

.enernav-time-clock .enernav-time-clock-summary__label,
.enernav-time-clock .enernav-time-clock-status__label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.72;
}

.enernav-time-clock .enernav-time-clock-status__title {
  margin-top: 4px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
}

.enernav-time-clock .enernav-time-clock-status__description,
.enernav-time-clock .enernav-time-clock-status__meta {
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.45;
}

.enernav-time-clock .enernav-time-clock-summary__table-wrap {
  margin-top: 18px;
}

@media (max-width: 860px) {
  .enernav-time-clock .enernav-time-clock-summary__grid {
    grid-template-columns: 1fr;
  }
}


/* RH Time Clock import history layout helpers.
   Scoped to import history details only. */
.ena-rh-time-clock-import-history__details,
.ena-rh-time-clock-import-history__note,
.ena-rh-time-clock-import-history__list {
  margin-top: 8px;
}

/* RH Time Clock import layout helpers.
   Scoped to the import panel only. */
.ena-rh-time-clock-import__panel {
  margin-top: 14px;
  margin-bottom: 14px;
}

.ena-rh-time-clock-import__notice,
.ena-rh-time-clock-import__options-grid,
.ena-rh-time-clock-import__history-table-wrap {
  margin-top: 12px;
}

.ena-rh-time-clock-import__options-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.ena-rh-time-clock-import__option-note {
  margin-top: 10px;
}

.ena-rh-time-clock-import__form,
.ena-rh-time-clock-import__history-box {
  margin-top: 14px;
}

.ena-rh-time-clock-import__file-field {
  display: grid;
  gap: 6px;
  max-width: 820px;
}

.ena-rh-time-clock-import__form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
}

@media (max-width: 860px) {
  .ena-rh-time-clock-import__options-grid {
    grid-template-columns: 1fr;
  }

  .ena-rh-time-clock-import__form-actions,
  .ena-rh-time-clock-import__form-actions .button {
    width: 100%;
  }

  .ena-rh-time-clock-import__form-actions .button {
    justify-content: center;
  }
}

/* Time clock empty summary section.
   Scoped to the time clock module only. */
.enernav-time-clock-empty-section {
  display: grid;
  gap: 1rem;
  margin: 0 auto 1rem;
  padding: 1rem;
  border-radius: var(--border-radius-md);
  background: var(--bg-surface);
}

/* Time clock page overflow containment.
   Keeps wide report tables inside their own scroll area. */
.ena-rh .ena-rh-time-clock,
.ena-rh .ena-rh-time-clock .ena-panel,
.ena-rh .ena-rh-time-clock .enernav-time-clock,
.ena-dash-main .ena-time-clock.ena-panel,
.ena-dash-main .ena-time-clock.ena-panel > .enernav-time-clock {
  min-width: 0;
  max-width: 100%;
}