/*
 * hr-dashboard.css — HR Dashboard front-end SPA
 * Overrides and additions to admin.css for the /hr/ page.
 * Uses DM Sans + DM Mono instead of Inter/Open Sans.
 * Deep dark theme — no WordPress admin-bar chrome.
 */

/* ── Full-screen shell ──────────────────────────────────────────────────── */
#bc-hr-root    { min-height: 100vh; background: #0A1628; }
.bc-layout     { height: 100vh; }
.bc-main       { background: #F8FAFF; }

/* ── Login card ─────────────────────────────────────────────────────────── */
.hr-login-wrap {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: 24px 16px;
  background: linear-gradient(135deg, #0A1628 0%, #0D1F3F 50%, #0A1628 100%);
  position: relative; overflow: hidden;
}
.hr-login-wrap::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 80% 50% at 30% 20%, rgba(30,58,138,.45), transparent 60%),
    radial-gradient(ellipse 60% 40% at 80% 80%, rgba(16,185,129,.12), transparent 50%);
}
.hr-login-grid {
  position: relative; z-index: 1; display: grid;
  grid-template-columns: 1fr 1fr; gap: 48px; max-width: 960px; width: 100%;
  align-items: center;
}
@media(max-width:720px) { .hr-login-grid { grid-template-columns: 1fr; gap: 32px; } .hr-login-hero { display:none; } }

/* Hero side */
.hr-login-hero { color: #fff; }
.hr-hero-logo  { display: flex; align-items: center; gap: 14px; margin-bottom: 32px; }
.hr-hero-name  { font-size: 26px; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; }
.hr-hero-tag   { font-size: 12px; color: #7FB69B; font-weight: 600; text-transform: uppercase;
                  letter-spacing: .1em; margin-top: 4px; }
.hr-hero-features { list-style: none; display: flex; flex-direction: column; gap: 14px; margin-top: 40px; }
.hr-hero-features li {
  display: flex; align-items: flex-start; gap: 12px;
  font-size: 14px; color: rgba(255,255,255,.7); line-height: 1.5;
}
.hr-hero-features li::before {
  content: '✓'; width: 22px; height: 22px; border-radius: 50%;
  background: rgba(16,185,129,.2); border: 1px solid rgba(16,185,129,.4);
  color: #7FB69B; font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px;
}

/* Form card */
.hr-login-card {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.1);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  border-radius: 20px; padding: 40px 36px;
  box-shadow: 0 32px 80px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.07);
}
.hr-card-title { font-size: 22px; font-weight: 800; color: #fff; margin-bottom: 6px; letter-spacing: -.02em; }
.hr-card-sub   { font-size: 13px; color: rgba(255,255,255,.45); margin-bottom: 28px; }

.hr-field       { display: flex; flex-direction: column; gap: 7px; margin-bottom: 18px; }
.hr-field label { font-size: 11.5px; font-weight: 700; color: rgba(255,255,255,.55);
                   text-transform: uppercase; letter-spacing: .06em; }
.hr-field input {
  height: 46px; background: rgba(255,255,255,.06); border: 1.5px solid rgba(255,255,255,.12);
  border-radius: 12px; padding: 0 14px; font-size: 14px; color: #fff;
  font-family: inherit; outline: none; transition: border-color .15s, background .15s;
}
.hr-field input::placeholder { color: rgba(255,255,255,.25); }
.hr-field input:focus {
  border-color: rgba(16,185,129,.5); background: rgba(255,255,255,.09);
  box-shadow: 0 0 0 3px rgba(16,185,129,.1);
}
.hr-remember {
  display: flex; align-items: center; gap: 8px; margin-bottom: 22px;
  font-size: 13px; color: rgba(255,255,255,.45); cursor: pointer; user-select: none;
}
.hr-remember input { width: 16px; height: 16px; accent-color: #7FB69B; cursor: pointer; }
.hr-btn-signin {
  width: 100%; height: 50px; background: linear-gradient(135deg, #7FB69B, #5A8F77);
  border: none; border-radius: 12px; font-size: 15px; font-weight: 700; color: #fff;
  cursor: pointer; font-family: inherit; letter-spacing: -.01em;
  transition: opacity .15s, transform .12s; display: flex; align-items: center;
  justify-content: center; gap: 8px;
}
.hr-btn-signin:hover  { opacity: .9; transform: translateY(-1px); }
.hr-btn-signin:active { transform: scale(.98); }
.hr-btn-signin:disabled { opacity: .45; cursor: not-allowed; transform: none; }

.hr-login-footer {
  margin-top: 22px; text-align: center; font-size: 12px; color: rgba(255,255,255,.25); line-height: 1.8;
}
.hr-login-footer a { color: rgba(16,185,129,.8); text-decoration: none; font-weight: 600; }
.hr-login-footer a:hover { color: #7FB69B; }
.hr-divider { height: 1px; background: rgba(255,255,255,.07); margin: 20px 0; }
.hr-other-app a {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 13px; color: rgba(255,255,255,.35); text-decoration: none;
  transition: color .14s;
}
.hr-other-app a:hover { color: rgba(255,255,255,.7); }

.hr-error {
  background: rgba(220,38,38,.15); border: 1px solid rgba(220,38,38,.35);
  border-radius: 10px; padding: 12px 14px; font-size: 13px; color: #FCA5A5;
  margin-bottom: 18px; text-align: center;
}

/* ── Topbar overrides (no WP admin-bar above it) ────────────────────────── */
.bc-layout     { height: 100vh; overflow: hidden; }
.bc-topbar     { height: 56px; }
.bc-topbar-title { font-size: 15px; font-weight: 800; }

/* ── Sign out button in topbar ──────────────────────────────────────────── */
.hr-signout {
  background: linear-gradient(180deg, #EF4444 0%, #DC2626 100%);
  border: 2px solid #B91C1C;
  border-radius: 10px;
  color: #FFFFFF;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .3px;
  padding: 9px 18px;
  cursor: pointer;
  font-family: inherit;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
  box-shadow: 0 4px 14px rgba(220,38,38,0.35), 0 1px 3px rgba(0,0,0,0.1);
  text-shadow: 0 1px 1px rgba(0,0,0,0.15);
}
.hr-signout:hover {
  background: linear-gradient(180deg, #DC2626 0%, #B91C1C 100%);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(220,38,38,0.45), 0 1px 3px rgba(0,0,0,0.12);
}
.hr-signout:active {
  transform: translateY(1px);
}

/* ── Session expired banner ─────────────────────────────────────────────── */
.hr-expired-banner {
  position: fixed; top: 0; left: 0; right: 0; z-index: 999999;
  background: #DC2626; color: #fff; text-align: center; padding: 12px 16px;
  font-family: var(--font); font-size: 14px; font-weight: 600;
  display: flex; align-items: center; justify-content: center; gap: 16px;
}
.hr-expired-banner button {
  background: #fff; color: #DC2626; border: none; padding: 6px 16px;
  border-radius: 6px; font-weight: 700; cursor: pointer; font-family: inherit;
}