:root {
  --xdy-attendance-deep-blue: #173B63;
  --xdy-attendance-light-green: #78C9A2;
  --xdy-attendance-light-blue: #6FB7E9;
  --xdy-attendance-red: #D92F32;
  --xdy-attendance-bg: #F4F7FA;
  --xdy-attendance-border: #DDE6EF;
  --xdy-attendance-text: #233548;
}

.xdy-attendance-page {
  min-height: calc(100vh - 150px);
  color: var(--xdy-attendance-text);
}

.xdy-attendance-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 26px;
  margin-bottom: 18px;
  color: #fff;
  border-radius: 16px;
  background: linear-gradient(120deg, var(--xdy-attendance-deep-blue), #24598C 58%, var(--xdy-attendance-light-blue));
  box-shadow: 0 14px 34px rgba(23, 59, 99, .18);
}

.xdy-attendance-hero h2 { margin: 0 0 6px; font-size: 24px; }
.xdy-attendance-hero p { margin: 0; opacity: .88; font-size: 13px; }
.xdy-attendance-date { text-align: right; font-size: 13px; }
.xdy-attendance-clock { font-size: 27px; font-weight: 700; letter-spacing: 1px; }

.xdy-attendance-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}

.xdy-attendance-kpi,
.xdy-attendance-card {
  background: #fff;
  border: 1px solid var(--xdy-attendance-border);
  border-radius: 14px;
  box-shadow: 0 8px 22px rgba(23, 59, 99, .07);
}

.xdy-attendance-kpi { padding: 16px; border-top: 3px solid var(--xdy-attendance-light-blue); }
.xdy-attendance-kpi:nth-child(2) { border-top-color: var(--xdy-attendance-light-green); }
.xdy-attendance-kpi:nth-child(3) { border-top-color: var(--xdy-attendance-deep-blue); }
.xdy-attendance-kpi:nth-child(4) { border-top-color: var(--xdy-attendance-red); }
.xdy-attendance-kpi-label { color: #718197; font-size: 12px; }
.xdy-attendance-kpi-value { margin-top: 8px; color: var(--xdy-attendance-deep-blue); font-size: 24px; font-weight: 700; }

.xdy-attendance-tabs { margin-bottom: 14px; }
.xdy-attendance-tabs .el-tabs__item.is-active { color: var(--xdy-attendance-deep-blue); font-weight: 700; }
.xdy-attendance-tabs .el-tabs__active-bar { background: var(--xdy-attendance-light-green); height: 3px; }

.xdy-attendance-card { padding: 18px; margin-bottom: 14px; }
.xdy-attendance-card-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.xdy-attendance-card-title h3 { margin: 0; color: var(--xdy-attendance-deep-blue); font-size: 17px; }
.xdy-attendance-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.xdy-attendance-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.xdy-attendance-config-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }

.xdy-attendance-punch-panel { display: grid; grid-template-columns: minmax(360px, 1.05fr) 1fr; gap: 18px; align-items: stretch; }
.xdy-attendance-punch-actions { min-height: 270px; position: relative; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 14px; padding: 26px; border: 1px solid #DDE7F0; border-radius: 18px; background: #F8FBFD; }
.xdy-attendance-punch-stage { position: absolute; top: 16px; left: 18px; display: inline-flex; align-items: center; gap: 7px; color: #62758A; font-size: 12px; font-weight: 700; }
.xdy-attendance-punch-stage span { width: 8px; height: 8px; border-radius: 50%; background: var(--xdy-attendance-light-green); box-shadow: 0 0 0 4px rgba(120, 201, 162, .16); }
.xdy-attendance-punch-main { width: 168px; height: 168px; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 5px; padding: 16px; border: 0; border-radius: 50%; color: #fff; font-family: inherit; cursor: pointer; box-shadow: 0 14px 30px rgba(23, 59, 99, .24), inset 0 0 0 7px rgba(255,255,255,.1); transition: transform .18s ease, box-shadow .18s ease; }
.xdy-attendance-punch-main:hover:not(:disabled) { transform: translateY(-3px) scale(1.015); box-shadow: 0 18px 34px rgba(23, 59, 99, .28), inset 0 0 0 7px rgba(255,255,255,.14); }
.xdy-attendance-punch-main:active:not(:disabled) { transform: scale(.985); }
.xdy-attendance-punch-main:disabled { cursor: not-allowed; opacity: .58; }
.xdy-attendance-punch-main.clock-in { background: var(--xdy-attendance-deep-blue); }
.xdy-attendance-punch-main.clock-out { background: #3E9F74; }
.xdy-attendance-punch-main.field-return { background: #397EAD; }
.xdy-attendance-punch-time { margin-top: 1px; font-size: 24px; font-weight: 800; letter-spacing: .5px; line-height: 1; }
.xdy-attendance-punch-main strong { font-size: 17px; line-height: 1.25; }
.xdy-attendance-punch-main small { font-size: 11px; opacity: .8; }
.xdy-attendance-punch-secondary { min-width: 132px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 9px 16px; border: 1px solid #C5E3F5; border-radius: 999px; background: #EFF7FC; color: var(--xdy-attendance-deep-blue); font-family: inherit; cursor: pointer; }
.xdy-attendance-punch-secondary > span { display: flex; flex-direction: column; text-align: left; }
.xdy-attendance-punch-secondary strong { font-size: 13px; }
.xdy-attendance-punch-secondary small { color: #6A7B8D; font-size: 11px; }
.xdy-attendance-punch-complete { width: 168px; height: 168px; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 7px; border: 7px solid #DCEFE5; border-radius: 50%; background: #F1F9F5; color: #2E8B62; }
.xdy-attendance-punch-complete strong { font-size: 16px; }
.xdy-attendance-punch-complete small { color: #6A7B8D; font-size: 11px; }

.xdy-attendance-proof { padding: 14px; background: var(--xdy-attendance-bg); border-radius: 12px; }
.xdy-attendance-proof-row { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px dashed var(--xdy-attendance-border); font-size: 13px; }
.xdy-attendance-proof-row:last-child { border-bottom: 0; }
.xdy-attendance-ok { color: #2E8B62; font-weight: 700; }
.xdy-attendance-warn { color: var(--xdy-attendance-red); font-weight: 700; }
.xdy-attendance-network-ip { font-family: Consolas, "SFMono-Regular", monospace; color: var(--xdy-attendance-deep-blue); }
.xdy-attendance-network-detector { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 13px 14px; margin-bottom: 8px; border: 1px solid #C5E3F5; border-radius: 12px; background: #F4F9FD; }
.xdy-attendance-network-detector > div { display: flex; min-width: 0; flex-direction: column; gap: 3px; }
.xdy-attendance-network-detector span { color: #6A7B8D; font-size: 12px; }
.xdy-attendance-network-detector strong { color: var(--xdy-attendance-deep-blue); font-family: Consolas, "SFMono-Regular", monospace; font-size: 16px; word-break: break-all; }
.xdy-attendance-network-help { margin: 0 0 9px; color: #6A7B8D; font-size: 12px; line-height: 1.6; }

.xdy-attendance-empty { padding: 30px; text-align: center; color: #8492A6; background: var(--xdy-attendance-bg); border-radius: 12px; }
.xdy-attendance-status { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.xdy-attendance-status.normal, .xdy-attendance-status.accepted, .xdy-attendance-status.approved { color: #176643; background: #E6F6EE; }
.xdy-attendance-status.pending { color: #805B00; background: #FFF4D5; }
.xdy-attendance-status.exception, .xdy-attendance-status.absent, .xdy-attendance-status.rejected, .xdy-attendance-status.missing_punch { color: #A12025; background: #FDEBEC; }
.xdy-attendance-status.rest, .xdy-attendance-status.withdrawn { color: #546579; background: #EDF1F5; }

.xdy-attendance-form-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.xdy-attendance-form-grid .wide { grid-column: span 2; }
.xdy-attendance-form-grid .full { grid-column: 1 / -1; }

@media (max-width: 900px) {
  .xdy-attendance-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .xdy-attendance-punch-panel, .xdy-attendance-grid, .xdy-attendance-config-grid { grid-template-columns: 1fr; }
  .xdy-attendance-form-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
  .xdy-attendance-hero { align-items: flex-start; padding: 18px; }
  .xdy-attendance-hero h2 { font-size: 20px; }
  .xdy-attendance-clock { font-size: 20px; }
  .xdy-attendance-kpis { grid-template-columns: 1fr 1fr; }
  .xdy-attendance-kpi-value { font-size: 19px; }
  .xdy-attendance-form-grid { grid-template-columns: 1fr; }
  .xdy-attendance-punch-actions { min-height: 250px; padding: 24px 14px; }
  .xdy-attendance-punch-main, .xdy-attendance-punch-complete { width: 154px; height: 154px; }
  .xdy-attendance-network-detector { align-items: stretch; flex-direction: column; }
  .xdy-attendance-form-grid .wide, .xdy-attendance-form-grid .full { grid-column: auto; }
  .xdy-attendance-card { padding: 13px; }
}