/* Axalar HR standalone admin pages — matches the legacy HR shell language. */

.axl-hr-admin-page {
  background:
    linear-gradient(180deg, var(--bg-base, #04080f) 0%, #050b17 100%);
  color: var(--text, #eaf0ff);
}

.axl-hr-admin-page .page {
  max-width: 1380px;
  padding: 22px 22px 88px;
}

.axl-hr-admin-page .page-header {
  min-height: 64px;
  margin-bottom: 18px;
  padding: 12px 14px;
  background: rgba(8, 15, 29, .86);
  border: 1px solid var(--border, rgba(255,255,255,.07));
  border-radius: 12px;
  box-shadow: var(--shadow-sm, 0 2px 12px rgba(0,0,0,.4));
}

.axl-hr-admin-page .page-logo {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  font-size: 12px;
  letter-spacing: .06em;
}

.axl-hr-admin-page .page-title {
  font-family: var(--font-display, 'Outfit', system-ui, sans-serif);
  font-size: 18px;
  letter-spacing: 0;
}

.axl-hr-admin-page .page-sub {
  color: var(--text-3, #4a5878);
}

.axl-hr-admin-page .back-btn,
.axl-hr-admin-page .btn,
.axl-hr-admin-page .btn-outline,
.axl-hr-admin-page .btn-primary,
.axl-hr-admin-page .btn-approve,
.axl-hr-admin-page .btn-lock,
.axl-hr-admin-page .btn-release,
.axl-hr-admin-page .btn-paid,
.axl-hr-admin-page .btn-reject {
  border-radius: 8px;
}

.axl-hr-admin-page .toolbar,
.axl-hr-admin-page .panel-head {
  background: rgba(255,255,255,.018);
}

.axl-hr-admin-page .toolbar {
  padding: 10px 12px;
  border: 1px solid var(--border, rgba(255,255,255,.07));
  border-radius: 12px;
}

.axl-hr-admin-page .table-wrap,
.axl-hr-admin-page .panel {
  border-radius: 12px;
  background: var(--bg-card, #0c1628);
  box-shadow: var(--shadow-sm, 0 2px 12px rgba(0,0,0,.4));
}

.axl-hr-admin-page th {
  color: var(--text-3, #4a5878);
}

.axl-hr-admin-page td,
.axl-hr-admin-page .contract-name {
  color: var(--text, #eaf0ff);
}

.axl-hr-admin-page .hr-input,
.axl-hr-admin-page .hr-select,
.axl-hr-admin-page .hr-textarea {
  background: rgba(255,255,255,.035);
  border-color: var(--border, rgba(255,255,255,.07));
  border-radius: 8px;
}

.axl-hr-admin-page .dock-warning {
  border-radius: 8px;
}

.axl-hr-admin-page .toast {
  border-radius: 12px;
}

html[data-theme="light"] .axl-hr-admin-page {
  background: #f4f7fb;
  /* Pages set --text:#eaf0ff (near-white) in their own :root; without these
     overrides header/label/table text renders light-on-light in light mode.
     Both hyphen spellings are covered (CSS uses --text-3, pages define --text3). */
  --text:   #0f172a;
  --text2:  #475569;
  --text3:  #64748b;
  --text-2: #475569;
  --text-3: #64748b;
}

html[data-theme="light"] .axl-hr-admin-page .page-header,
html[data-theme="light"] .axl-hr-admin-page .table-wrap,
html[data-theme="light"] .axl-hr-admin-page .panel {
  background: #ffffff;
  border-color: rgba(15,23,42,.08);
}

@media (max-width: 720px) {
  .axl-hr-admin-page .page {
    padding: 14px 12px 72px;
  }

  .axl-hr-admin-page .page-header {
    align-items: flex-start;
    gap: 10px;
  }

  .axl-hr-admin-page .page-title {
    font-size: 16px;
  }
}