/* Monthly Attendance v2 - isolated from legacy HR tables and cards. */
.attendance-month-picker {
  position: relative;
  display: flex;
  min-width: 210px;
  align-items: center;
}

.attendance-month-picker .hr-input {
  width: 100%;
  min-width: 210px;
  padding-right: 42px;
}

.attendance-month-picker .hr-input::-webkit-calendar-picker-indicator {
  opacity: 0;
  pointer-events: none;
}

.attendance-calendar-button {
  position: absolute;
  top: 50%;
  right: 4px;
  display: grid;
  width: 32px;
  height: 30px;
  transform: translateY(-50%);
  place-items: center;
  border: 0;
  border-left: 1px solid var(--border);
  color: var(--text-2);
  background: transparent;
  cursor: pointer;
}

.attendance-calendar-button:hover { color: var(--gold); }
.attendance-calendar-button:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }

.amr-root {
  --amr-panel: #0c1829;
  --amr-panel-2: #101e31;
  --amr-soft: #14243a;
  --amr-line: rgba(164, 185, 215, .14);
  --amr-line-strong: rgba(164, 185, 215, .24);
  --amr-text: #edf4ff;
  --amr-muted: #96a8c2;
  --amr-faint: #687b97;
  --amr-green: #55c2a5;
  --amr-green-soft: rgba(85, 194, 165, .12);
  --amr-blue: #6fa6ff;
  --amr-blue-soft: rgba(111, 166, 255, .12);
  --amr-amber: #f5bd62;
  --amr-amber-soft: rgba(245, 189, 98, .12);
  --amr-red: #ff7c83;
  --amr-red-soft: rgba(255, 124, 131, .12);
  max-width: 1640px;
  color: var(--amr-text);
  font-family: "DM Sans", system-ui, sans-serif;
}

html[data-theme="light"] .amr-root {
  --amr-panel: #fff;
  --amr-panel-2: #f8fafc;
  --amr-soft: #eef3f8;
  --amr-line: rgba(35, 57, 84, .11);
  --amr-line-strong: rgba(35, 57, 84, .2);
  --amr-text: #102033;
  --amr-muted: #53677f;
  --amr-faint: #788a9e;
  --amr-green: #14866f;
  --amr-green-soft: rgba(20, 134, 111, .09);
  --amr-blue: #326dcc;
  --amr-blue-soft: rgba(50, 109, 204, .09);
  --amr-amber: #a96812;
  --amr-amber-soft: rgba(169, 104, 18, .09);
  --amr-red: #c73c49;
  --amr-red-soft: rgba(199, 60, 73, .09);
}

.amr-root *, .amr-root *::before, .amr-root *::after { box-sizing: border-box; }
.amr-root h1, .amr-root h2, .amr-root p { margin: 0; }

.amr-hero {
  display: flex;
  gap: 24px;
  align-items: flex-end;
  justify-content: space-between;
  padding: 8px 0 24px;
}

.amr-eyebrow,
.amr-report-kicker {
  display: block;
  margin-bottom: 7px;
  color: var(--amr-green);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .14em;
  line-height: 1.2;
  text-transform: uppercase;
}

.amr-hero h1 {
  color: var(--amr-text);
  font-family: "Outfit", system-ui, sans-serif;
  font-size: clamp(28px, 3vw, 42px);
  font-weight: 760;
  letter-spacing: -.035em;
  line-height: 1;
}

.amr-hero p { max-width: 760px; margin-top: 11px; color: var(--amr-muted); font-size: 14px; line-height: 1.55; }
.amr-policy-chip { display: inline-flex; gap: 7px; min-height: 36px; padding: 0 12px; align-items: center; border: 1px solid rgba(85, 194, 165, .25); border-radius: 99px; color: var(--amr-green); background: var(--amr-green-soft); font-size: 10px; font-weight: 800; white-space: nowrap; }
.amr-policy-chip svg, .amr-button svg, .amr-month-control svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }

.amr-toolbar {
  display: grid;
  grid-template-columns: minmax(230px, 1.5fr) minmax(190px, .8fr) auto auto;
  gap: 10px;
  align-items: end;
  margin-bottom: 16px;
  padding: 16px;
  border: 1px solid var(--amr-line);
  border-radius: 16px;
  background: var(--amr-panel);
  box-shadow: 0 12px 42px rgba(0, 0, 0, .1);
}

.amr-field { display: grid; gap: 6px; min-width: 0; }
.amr-field > span:first-child { color: var(--amr-muted); font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.amr-control { width: 100%; height: 42px; min-width: 0; padding: 0 12px; border: 1px solid var(--amr-line-strong); border-radius: 10px; outline: none; color: var(--amr-text); background: var(--amr-panel-2); font: 650 12px/1 "DM Sans", system-ui, sans-serif; color-scheme: dark; }
html[data-theme="light"] .amr-control { color-scheme: light; }
.amr-control:focus { border-color: var(--amr-green); box-shadow: 0 0 0 3px var(--amr-green-soft); }
.amr-month-control { position: relative; display: block; }
.amr-month-control .amr-control { padding-right: 44px; }
.amr-month-control button { position: absolute; top: 4px; right: 4px; display: grid; width: 34px; height: 34px; place-items: center; border: 0; border-radius: 8px; color: var(--amr-muted); background: var(--amr-soft); cursor: pointer; }
.amr-month-control button:hover { color: var(--amr-green); }

.amr-button { display: inline-flex; gap: 7px; min-height: 42px; padding: 0 15px; align-items: center; justify-content: center; border: 1px solid var(--amr-line-strong); border-radius: 10px; color: var(--amr-text); background: var(--amr-panel-2); font: 750 12px/1 "DM Sans", system-ui, sans-serif; cursor: pointer; white-space: nowrap; }
.amr-button:hover { border-color: var(--amr-green); background: var(--amr-soft); }
.amr-button:focus-visible { outline: 3px solid var(--amr-green-soft); outline-offset: 2px; }
.amr-button:disabled { cursor: wait; opacity: .55; }
.amr-button-primary { border-color: transparent; color: #05130f; background: var(--amr-green); }
.amr-button-primary:hover { border-color: transparent; color: #05130f; background: #72d1b8; }

.amr-report { min-height: 300px; overflow: hidden; border: 1px solid var(--amr-line); border-radius: 18px; background: var(--amr-panel); box-shadow: 0 14px 46px rgba(0, 0, 0, .12); }
.amr-report-head { display: flex; gap: 20px; min-height: 82px; padding: 18px 20px; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--amr-line); }
.amr-report-head h2 { color: var(--amr-text); font-family: "Outfit", system-ui, sans-serif; font-size: 21px; line-height: 1.15; }
.amr-report-head p { margin-top: 5px; color: var(--amr-muted); font-size: 11px; }
.amr-period-chip { padding: 6px 10px; border: 1px solid var(--amr-line); border-radius: 8px; color: var(--amr-muted); background: var(--amr-soft); font-size: 10px; font-weight: 800; white-space: nowrap; }

.amr-review-alert { display: flex; gap: 12px; margin: 16px 16px 0; padding: 13px 14px; align-items: flex-start; border: 1px solid rgba(245, 189, 98, .25); border-radius: 12px; color: var(--amr-amber); background: var(--amr-amber-soft); }
.amr-review-alert strong, .amr-review-alert span { display: block; }
.amr-review-alert strong { font-size: 11px; }
.amr-review-alert span { margin-top: 3px; color: var(--amr-muted); font-size: 10px; line-height: 1.45; }
.amr-review-alert > i { width: 8px; height: 8px; flex: 0 0 auto; margin-top: 4px; border-radius: 50%; background: var(--amr-amber); }

.amr-kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; padding: 16px; }
.amr-kpi { position: relative; min-height: 105px; overflow: hidden; padding: 14px; border: 1px solid var(--amr-line); border-radius: 13px; background: var(--amr-panel-2); }
.amr-kpi::after { content: ""; position: absolute; inset: auto 0 0; height: 3px; background: var(--amr-faint); opacity: .8; }
.amr-kpi.green::after { background: var(--amr-green); }
.amr-kpi.red::after { background: var(--amr-red); }
.amr-kpi.amber::after { background: var(--amr-amber); }
.amr-kpi.blue::after { background: var(--amr-blue); }
.amr-kpi span { display: block; color: var(--amr-muted); font-size: 9px; font-weight: 800; letter-spacing: .035em; text-transform: uppercase; }
.amr-kpi strong { display: block; overflow: hidden; margin-top: 9px; color: var(--amr-text); font-family: "Outfit", system-ui, sans-serif; font-size: clamp(17px, 1.6vw, 24px); line-height: 1.1; text-overflow: ellipsis; white-space: nowrap; }
.amr-kpi small { display: block; margin-top: 5px; color: var(--amr-faint); font-size: 9px; line-height: 1.25; }

.amr-table-wrap { overflow: auto; border-top: 1px solid var(--amr-line); }
.amr-table { width: 100%; min-width: 1020px; border-collapse: separate; border-spacing: 0; }
.amr-table th { position: sticky; top: 0; z-index: 2; padding: 11px 13px; border-bottom: 1px solid var(--amr-line); color: var(--amr-faint); background: var(--amr-panel-2); font-size: 9px; font-weight: 850; letter-spacing: .06em; text-align: left; text-transform: uppercase; white-space: nowrap; }
.amr-table td { padding: 13px; border-bottom: 1px solid var(--amr-line); color: var(--amr-muted); font-size: 11px; vertical-align: top; }
.amr-table tbody tr:last-child td { border-bottom: 0; }
.amr-table tbody tr:hover td { background: var(--amr-soft); }
.amr-date strong, .amr-time strong { display: block; color: var(--amr-text); font-size: 11px; font-variant-numeric: tabular-nums; }
.amr-date span, .amr-time span, .amr-hours small { display: block; margin-top: 3px; color: var(--amr-faint); font-size: 9px; }
.amr-hours strong { display: block; color: var(--amr-text); font-size: 11px; font-variant-numeric: tabular-nums; }
.amr-balance { color: var(--amr-text); font-weight: 800; font-variant-numeric: tabular-nums; }
.amr-balance.negative { color: var(--amr-red); }
.amr-balance.positive { color: var(--amr-green); }
.amr-status { display: inline-flex; min-height: 25px; padding: 4px 8px; align-items: center; border: 1px solid var(--amr-line); border-radius: 7px; color: var(--amr-muted); background: var(--amr-soft); font-size: 9px; font-weight: 800; white-space: nowrap; }
.amr-status.completed, .amr-status.rest-day-work { border-color: rgba(85, 194, 165, .25); color: var(--amr-green); background: var(--amr-green-soft); }
.amr-status.absent, .amr-status.missing-checkout { border-color: rgba(255, 124, 131, .25); color: var(--amr-red); background: var(--amr-red-soft); }
.amr-status.leave, .amr-status.weekend, .amr-status.future { color: var(--amr-faint); }
.amr-status.estimated-checkout, .amr-status.pending-review { border-color: rgba(245, 189, 98, .25); color: var(--amr-amber); background: var(--amr-amber-soft); }

.amr-validation { min-width: 210px; }
.amr-validation-clear { color: var(--amr-faint); font-size: 10px; }
.amr-attempt { display: grid; gap: 3px; padding: 8px 9px; border: 1px solid rgba(245, 189, 98, .22); border-radius: 8px; background: var(--amr-amber-soft); }
.amr-attempt + .amr-attempt { margin-top: 6px; }
.amr-attempt strong { color: var(--amr-amber); font-size: 9px; }
.amr-attempt span { color: var(--amr-muted); font-size: 9px; line-height: 1.35; }

.amr-empty { display: grid; min-height: 300px; padding: 30px; place-content: center; color: var(--amr-muted); text-align: center; }
.amr-empty strong { color: var(--amr-text); font: 750 17px/1.2 "Outfit", system-ui, sans-serif; }
.amr-empty span { margin-top: 7px; font-size: 11px; }
.amr-empty.error strong, .amr-empty.error span { color: var(--amr-red); }
.amr-loading { display: grid; gap: 10px; padding: 18px; }
.amr-loading i { display: block; height: 74px; border: 1px solid var(--amr-line); border-radius: 13px; background: var(--amr-panel-2); opacity: .7; }

@media (max-width: 1250px) {
  .amr-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
  .amr-root { padding-right: 14px !important; padding-left: 14px !important; }
  .amr-hero { display: grid; gap: 16px; padding-top: 0; }
  .amr-policy-chip { justify-self: start; }
  .amr-toolbar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .amr-employee-field { grid-column: 1 / -1; }
  .amr-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  .amr-toolbar { grid-template-columns: 1fr; padding: 13px; }
  .amr-employee-field { grid-column: auto; }
  .amr-button { width: 100%; }
  .amr-report-head { align-items: flex-start; }
  .amr-period-chip { display: none; }
  .amr-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 12px; }
  .amr-kpi { min-height: 96px; }
  .amr-review-alert { margin: 12px 12px 0; }
  .amr-table-wrap { overflow: visible; padding: 0 10px 10px; border-top: 1px solid var(--amr-line); }
  .amr-table { min-width: 0; border-collapse: separate; border-spacing: 0 9px; }
  .amr-table thead { display: none; }
  .amr-table tbody, .amr-table tr, .amr-table td { display: block; width: 100%; }
  .amr-table tr { overflow: hidden; border: 1px solid var(--amr-line); border-radius: 12px; background: var(--amr-panel-2); }
  .amr-table td { display: grid; grid-template-columns: minmax(100px, .8fr) minmax(0, 1.2fr); gap: 12px; padding: 9px 11px; border-bottom: 1px solid var(--amr-line); }
  .amr-table td::before { content: attr(data-label); color: var(--amr-faint); font-size: 8px; font-weight: 850; letter-spacing: .055em; text-transform: uppercase; }
  .amr-table td:last-child { border-bottom: 0; }
  .amr-table tbody tr:hover td { background: transparent; }
  .amr-validation { min-width: 0; }
}

@media (max-width: 400px) {
  .amr-kpis { grid-template-columns: 1fr 1fr; }
  .amr-kpi { padding: 12px; }
  .amr-kpi strong { font-size: 18px; }
  .amr-table td { grid-template-columns: 88px minmax(0, 1fr); }
}