.absences-page, .absences-page * { box-sizing: border-box; }

.absences-page {
  display: flex;
  flex-direction: column;
  gap: 18px;
  color: rgba(255,255,255,.94);
  min-height: 100%;
  padding: 4px;
}

.absences-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
}

.absences-header h1 {
  margin: 0;
  font-size: 30px;
  font-weight: 800;
}

.absences-header p {
  margin: 6px 0 0;
  opacity: .72;
}

.absences-header-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

.absences-header-actions .input {
  min-width: 180px;
}

.absences-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.absence-stat-card {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  padding: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.03));
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 12px 35px rgba(0,0,0,.18);
}

.absence-stat-card::after {
  content: "";
  position: absolute;
  inset: auto -35px -35px auto;
  width: 110px;
  height: 110px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
}

.absence-stat-card.accent { border-color: rgba(74, 144, 255, .25); }
.absence-stat-card.warning { border-color: rgba(255, 193, 7, .25); }
.absence-stat-card.success { border-color: rgba(34, 197, 94, .25); }
.absence-stat-card.danger { border-color: rgba(239, 68, 68, .25); }

.absence-stat-label {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .08em;
  opacity: .7;
}

.absence-stat-value {
  font-size: 34px;
  font-weight: 800;
  margin-top: 8px;
}

.absence-stat-sub {
  font-size: 13px;
  opacity: .68;
  margin-top: 4px;
}

.absences-panels {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 14px;
}

.card-head-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px;
}

.card-head-row h3 {
  margin: 0;
}

.card-head-row p,
.muted {
  margin: 4px 0 0;
  opacity: .66;
  font-size: 13px;
}

.absence-live-list,
.absence-upcoming-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 340px;
  overflow: auto;
  padding-right: 4px;
}

.absence-live-item,
.absence-upcoming-item {
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.035);
  border-radius: 16px;
  padding: 12px 14px;
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: center;
}

.absence-live-main,
.absence-upcoming-main {
  display: flex;
  gap: 12px;
  align-items: center;
  min-width: 0;
}

.absence-mini-avatar,
.absence-avatar {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(255,255,255,.11), rgba(255,255,255,.03));
  border: 1px solid rgba(255,255,255,.08);
  background-size: cover;
  background-position: center;
  flex: 0 0 auto;
}

.absence-live-name,
.absence-upcoming-name,
.absence-view-name {
  font-size: 15px;
  font-weight: 700;
}

.absence-live-sub,
.absence-upcoming-sub,
.absence-view-role {
  font-size: 12px;
  opacity: .68;
  margin-top: 3px;
}

.absence-chip,
.absence-view-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 28px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.045);
  white-space: nowrap;
}

.absence-chip.pending,
.absence-view-badge.pending { background: rgba(245, 158, 11, .16); color: #f8c65f; border-color: rgba(245, 158, 11, .28); }
.absence-chip.approved,
.absence-view-badge.approved { background: rgba(34, 197, 94, .14); color: #7ee2a8; border-color: rgba(34, 197, 94, .28); }
.absence-chip.rejected,
.absence-view-badge.rejected { background: rgba(239, 68, 68, .14); color: #ff9f9f; border-color: rgba(239, 68, 68, .28); }
.absence-chip.cancelled,
.absence-view-badge.cancelled { background: rgba(148, 163, 184, .14); color: #d8dee8; border-color: rgba(148, 163, 184, .24); }
.absence-chip.ongoing,
.absence-view-badge.ongoing { background: rgba(59, 130, 246, .16); color: #8fbcff; border-color: rgba(59, 130, 246, .28); }
.absence-chip.upcoming,
.absence-view-badge.upcoming { background: rgba(168, 85, 247, .15); color: #d4b4ff; border-color: rgba(168, 85, 247, .28); }
.absence-chip.ended,
.absence-view-badge.ended { background: rgba(255,255,255,.08); color: rgba(255,255,255,.88); }

.absences-table-wrap {
  overflow: auto;
}

.absences-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 1120px;
}

.absences-table th,
.absences-table td {
  padding: 14px 12px;
  text-align: left;
  border-bottom: 1px solid rgba(255,255,255,.07);
  vertical-align: middle;
}

.absences-table th {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: rgba(255,255,255,.64);
}

.absence-agent-cell {
  display: flex;
  align-items: center;
  gap: 12px;
}

.absence-agent-meta strong {
  display: block;
}

.absence-agent-meta .sub,
.absence-sub,
.absence-table-sub {
  font-size: 12px;
  opacity: .66;
  margin-top: 3px;
}

.absence-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.absence-modal .modal-body,
.absence-view-modal .modal-body {
  max-height: 72vh;
  overflow: auto;
}

.absence-modal-body {
  padding-top: 6px;
}

.absence-form-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr);
  gap: 16px;
}

.absence-form-col {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.absence-section,
.absence-preview-card {
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  border-radius: 18px;
  padding: 16px;
}

.section-title {
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  opacity: .7;
  margin-bottom: 12px;
}

.absence-preview-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.preview-item {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}

.preview-item span {
  opacity: .66;
}

.absence-alert {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 14px;
  font-size: 13px;
  border: 1px solid rgba(255,255,255,.08);
}

.absence-alert.warning {
  background: rgba(245, 158, 11, .12);
  border-color: rgba(245, 158, 11, .24);
  color: #ffd687;
}

.absence-alert.success {
  background: rgba(34, 197, 94, .11);
  border-color: rgba(34, 197, 94, .22);
  color: #98f1ba;
}

.absence-policy-box {
  margin-top: 14px;
  padding: 14px;
  border-radius: 16px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
}

.policy-title {
  font-weight: 700;
  margin-bottom: 8px;
}

.absence-policy-box ul {
  margin: 0;
  padding-left: 18px;
  opacity: .76;
  display: grid;
  gap: 6px;
}

.absence-view-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}

.absence-view-identity {
  display: flex;
  gap: 14px;
  align-items: center;
}

.absence-view-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.absence-view-grid .card.mini,
.absence-note-card {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 18px;
  padding: 15px;
}

.absence-view-grid h3,
.absence-note-card h3 {
  margin: 0 0 12px;
  font-size: 15px;
}

.absence-view-notes {
  white-space: pre-wrap;
  line-height: 1.55;
  opacity: .9;
}

.view-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,.06);
}

.view-row:last-child { border-bottom: 0; }
.view-k { opacity: .62; }
.view-v { text-align: right; max-width: 60%; }

.empty-state.small {
  opacity: .7;
  padding: 18px 8px;
  text-align: center;
}

.absence-view-footer {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.left-actions,
.right-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

@media (max-width: 1280px) {
  .absences-stats,
  .absence-view-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .absences-panels,
  .absence-form-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 820px) {
  .absences-stats,
  .absence-view-grid {
    grid-template-columns: 1fr;
  }

  .absences-header-actions {
    width: 100%;
  }

  .absences-header-actions .input,
  .absences-header-actions button {
    width: 100%;
  }
}

/* scrollbar modales */
.absence-modal-body::-webkit-scrollbar {
  width: 6px;
}

.absence-modal-body::-webkit-scrollbar-track {
  background: transparent;
}

.absence-modal-body::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.15);
  border-radius: 10px;
}

.absence-modal-body::-webkit-scrollbar-thumb:hover {
  background: rgba(255,255,255,.28);
}

.absences-toolbar {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.absences-toolbar .input {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  padding: 8px 12px;
  color: #fff;
  min-width: 220px;
}

.absences-toolbar .select {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  padding: 8px 10px;
  color: #fff;
}

.status-approved { color:#22c55e; }
.status-pending { color:#f59e0b; }
.status-refused { color:#ef4444; }

.absences-toolbar {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.absences-toolbar .input,
.absences-toolbar select.input {
  min-height: 40px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.06);
  color: #fff;
  outline: none;
}

.absences-toolbar .input::placeholder {
  color: rgba(255,255,255,.48);
}

.absence-modal-body::-webkit-scrollbar,
.absence-view-body::-webkit-scrollbar {
  width: 6px;
}

.absence-modal-body::-webkit-scrollbar-track,
.absence-view-body::-webkit-scrollbar-track {
  background: transparent;
}

.absence-modal-body::-webkit-scrollbar-thumb,
.absence-view-body::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.18);
  border-radius: 999px;
}

.absence-modal-body::-webkit-scrollbar-thumb:hover,
.absence-view-body::-webkit-scrollbar-thumb:hover {
  background: rgba(255,255,255,.3);
}