/* =========================================================================
   Vantage HR — shared design tokens & components
   Matches the approved UI design concept (Main.dc.html / Login.dc.html /
   ESSHome.dc.html). Kept as plain CSS (no framework) so the whole app —
   Admin console and the mobile-first ESS portal — shares one visual system.
   ========================================================================= */

:root {
  --vhr-primary: #4338CA;
  --vhr-primary-hover: #362DA8;
  --vhr-primary-tint: #EEEDFC;
  --vhr-bg: #F5F6FA;
  --vhr-surface: #FFFFFF;
  --vhr-border: #E7E9F0;
  --vhr-border-soft: #EFEFF4;
  --vhr-text: #1B1E2A;
  --vhr-text-muted: #5B6070;
  --vhr-text-faint: #9AA0B1;
  --vhr-success: #1B9C63;
  --vhr-success-tint: #E7F8EF;
  --vhr-warning: #C2790A;
  --vhr-warning-tint: #FCF1DE;
  --vhr-danger: #D5372B;
  --vhr-danger-tint: #FBE7E5;
  --vhr-radius-lg: 14px;
  --vhr-radius-md: 10px;
  --vhr-radius-sm: 8px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--vhr-bg);
  color: var(--vhr-text);
  font-family: 'Public Sans', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-size: 14px;
}

h1, h2, h3, .vhr-brand {
  font-family: 'Sora', system-ui, sans-serif;
}

a { color: var(--vhr-primary); text-decoration: none; }
a:hover { color: var(--vhr-primary-hover); }

/* ---- Layout shells ------------------------------------------------- */

.vhr-app {
  display: flex;
  min-height: 100vh;
}

.vhr-sidebar {
  width: 264px;
  min-width: 264px;
  background: var(--vhr-surface);
  border-right: 1px solid var(--vhr-border);
  display: flex;
  flex-direction: column;
  padding: 24px 16px;
}

.vhr-sidebar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 8px 28px 8px;
}

.vhr-logo-mark {
  width: 34px;
  height: 34px;
  border-radius: var(--vhr-radius-md);
  background: var(--vhr-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #fff;
}

.vhr-nav-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--vhr-text-faint);
  padding: 18px 12px 6px;
}
.vhr-nav-label:first-child { padding-top: 10px; }

.vhr-navitem {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--vhr-radius-md);
  color: var(--vhr-text-muted);
  font-weight: 500;
  font-size: 14px;
  cursor: pointer;
  transition: background-color .12s ease, color .12s ease;
  min-height: 44px;
}
.vhr-navitem:hover { background: #F1F0FC; color: var(--vhr-text); }
.vhr-navitem.active {
  background: var(--vhr-primary-tint);
  color: var(--vhr-primary);
  font-weight: 600;
}
.vhr-navitem svg { flex-shrink: 0; }

.vhr-sidebar-user {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border-radius: 12px;
  background: #FAFAFC;
  border: 1px solid var(--vhr-border-soft);
}

.vhr-avatar {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: var(--vhr-primary);
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.vhr-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.vhr-topbar {
  min-height: 76px;
  border-bottom: 1px solid var(--vhr-border);
  display: flex;
  align-items: center;
  padding: 14px 32px;
  gap: 20px;
  background: var(--vhr-surface);
  flex-wrap: wrap;
}

.vhr-topbar-title h1 {
  margin: 0;
  font-size: 19px;
  font-weight: 700;
}

.vhr-topbar-title .vhr-subtitle {
  font-size: 12.5px;
  color: var(--vhr-text-faint);
}

.vhr-topbar-spacer { flex: 1; }

.vhr-icon-btn {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: var(--vhr-bg);
  border: 1px solid var(--vhr-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--vhr-text-muted);
  position: relative;
}

.vhr-content {
  flex: 1;
  padding: 28px 32px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

/* ---- Cards & tables -------------------------------------------------- */

.vhr-card {
  background: var(--vhr-surface);
  border: 1px solid var(--vhr-border);
  border-radius: var(--vhr-radius-lg);
  padding: 22px;
}

.vhr-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.vhr-card-header h2, .vhr-card-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
}

.vhr-kpi-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 18px;
}

.vhr-kpi-icon {
  width: 38px;
  height: 38px;
  border-radius: var(--vhr-radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
}

.vhr-kpi-value {
  font-size: 28px;
  font-weight: 700;
  font-family: 'Sora', sans-serif;
}

.vhr-kpi-label {
  font-size: 13px;
  color: var(--vhr-text-muted);
  margin-top: 2px;
}

.vhr-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}

.vhr-table th {
  text-align: left;
  font-size: 12px;
  font-weight: 600;
  color: var(--vhr-text-faint);
  padding: 0 8px 10px;
  border-bottom: 1px solid var(--vhr-border-soft);
  white-space: nowrap;
}

.vhr-table td {
  padding: 14px 8px;
  border-bottom: 1px solid #F5F5F8;
  vertical-align: middle;
}

.vhr-table tbody tr:hover { background: #FAFAFC; }
.vhr-table tbody tr:last-child td { border-bottom: none; }

.vhr-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
}
.vhr-badge-success { color: var(--vhr-success); background: var(--vhr-success-tint); }
.vhr-badge-warning { color: var(--vhr-warning); background: var(--vhr-warning-tint); }
.vhr-badge-danger { color: var(--vhr-danger); background: var(--vhr-danger-tint); }
.vhr-badge-neutral { color: var(--vhr-text-muted); background: var(--vhr-bg); }

/* ---- Buttons ----------------------------------------------------------- */

.vhr-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 0 18px;
  border-radius: var(--vhr-radius-md);
  font-weight: 700;
  font-size: 14px;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  line-height: 1;
}
.vhr-btn:hover { text-decoration: none; }

.vhr-btn-primary { background: var(--vhr-primary); color: #fff; }
.vhr-btn-primary:hover { background: var(--vhr-primary-hover); color: #fff; }

.vhr-btn-ghost { background: var(--vhr-surface); color: var(--vhr-text); border-color: var(--vhr-border); }
.vhr-btn-ghost:hover { background: var(--vhr-bg); color: var(--vhr-text); }

.vhr-btn-danger { background: var(--vhr-danger); color: #fff; }
.vhr-btn-danger:hover { background: #B92E24; color: #fff; }

.vhr-btn-sm { height: 36px; padding: 0 14px; font-size: 13px; }

/* ---- Forms --------------------------------------------------------------- */

.vhr-form-row { margin-bottom: 18px; }

.vhr-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 6px;
}

.vhr-input,
.vhr-select,
textarea.vhr-input {
  width: 100%;
  min-height: 46px;
  border: 1px solid #E1E3EA;
  border-radius: var(--vhr-radius-md);
  padding: 0 14px;
  font-size: 14px;
  font-family: inherit;
  color: var(--vhr-text);
  background: var(--vhr-surface);
}

.vhr-input:focus, .vhr-select:focus, textarea.vhr-input:focus {
  outline: none;
  border-color: var(--vhr-primary);
  box-shadow: 0 0 0 3px var(--vhr-primary-tint);
}

.vhr-check-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--vhr-text-muted);
}

.vhr-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0 18px;
}

.vhr-field-error {
  color: var(--vhr-danger);
  font-size: 12.5px;
  margin-top: 4px;
}

.vhr-validation-summary {
  background: var(--vhr-danger-tint);
  color: var(--vhr-danger);
  border: 1px solid #F3C7C2;
  border-radius: var(--vhr-radius-md);
  padding: 12px 16px;
  font-size: 13.5px;
  margin-bottom: 18px;
}

.vhr-alert-success {
  background: var(--vhr-success-tint);
  color: var(--vhr-success);
  border: 1px solid #BFE9D3;
  border-radius: var(--vhr-radius-md);
  padding: 12px 16px;
  font-size: 13.5px;
  margin-bottom: 18px;
}

.vhr-alert-error {
  background: var(--vhr-danger-tint);
  color: var(--vhr-danger);
  border: 1px solid #F3C6C1;
  border-radius: var(--vhr-radius-md);
  padding: 12px 16px;
  font-size: 13.5px;
  margin-bottom: 18px;
}

/* ---- Attendance (ESS) --------------------------------------------------- */

.vhr-attendance-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 0;
  border-bottom: 1px solid var(--vhr-border-soft);
  font-size: 13.5px;
}
.vhr-attendance-row:last-child { border-bottom: none; }
.vhr-attendance-row > span { color: var(--vhr-text-muted); }

.vhr-type-options { display: flex; flex-direction: column; gap: 8px; }

.vhr-type-option {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--vhr-border);
  border-radius: var(--vhr-radius-md);
  padding: 12px 14px;
  cursor: pointer;
  background: var(--vhr-surface);
  font-size: 14px;
}
.vhr-type-option input[type="radio"] { width: 16px; height: 16px; flex-shrink: 0; }
.vhr-type-option.selected {
  border-color: var(--vhr-primary);
  background: var(--vhr-primary-tint);
  color: var(--vhr-primary);
  font-weight: 600;
}

.vhr-bottom-nav {
  position: sticky;
  bottom: 0;
  display: flex;
  background: var(--vhr-surface);
  border-top: 1px solid var(--vhr-border);
  padding: 8px 6px calc(8px + env(safe-area-inset-bottom));
}

.vhr-bottom-nav a {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 6px 4px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--vhr-text-faint);
  border-radius: var(--vhr-radius-sm);
}
.vhr-bottom-nav a.active { color: var(--vhr-primary); background: var(--vhr-primary-tint); }
.vhr-bottom-nav a.disabled { opacity: .5; pointer-events: none; }

/* Pending-count badge on a bottom-nav icon (e.g. Tasks) — same idea as an unread
   count next to an email Inbox. Positioned relative to the icon glyph, not the
   whole tab, so it doesn't shift when the label wraps on narrow phones. */
.vhr-nav-badge {
  position: absolute;
  top: 2px;
  right: calc(50% - 20px);
  min-width: 15px;
  height: 15px;
  padding: 0 3px;
  border-radius: 999px;
  background: var(--vhr-danger, #D6455D);
  color: #fff;
  font-size: 9.5px;
  font-weight: 700;
  line-height: 15px;
  text-align: center;
}

.vhr-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
  margin-bottom: 18px;
}

.vhr-filter-bar .vhr-form-row { margin-bottom: 0; min-width: 180px; }

.vhr-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.vhr-empty-state {
  text-align: center;
  padding: 48px 16px;
  color: var(--vhr-text-faint);
  font-size: 14px;
}

/* ---- Login page ------------------------------------------------------ */

.vhr-login-shell {
  display: flex;
  min-height: 100vh;
  background: #FFFFFF;
}

.vhr-login-brand-panel {
  width: 480px;
  min-width: 320px;
  background: #211B70;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 48px;
  position: relative;
  overflow: hidden;
}

.vhr-login-brand-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(600px 400px at 85% 10%, rgba(255,255,255,0.08), transparent),
    radial-gradient(500px 500px at 10% 90%, rgba(255,255,255,0.06), transparent);
}

.vhr-login-form-panel {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #FBFBFD;
  padding: 32px;
}

.vhr-login-form {
  width: 100%;
  max-width: 380px;
}

.vhr-login-feature {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13.5px;
  color: rgba(255,255,255,0.85);
}

.vhr-login-feature-icon {
  width: 30px;
  height: 30px;
  border-radius: var(--vhr-radius-sm);
  background: rgba(255,255,255,0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.vhr-login-headline {
  font-size: 32px;
}

.vhr-login-subtext {
  font-size: 15px;
}

/* Mobile-only copy of the credit line, rendered after the form panel (see
   markup in Login.cshtml) so it sits at the true bottom of the page instead
   of up near the logo inside the brand panel. Hidden on desktop, where
   .vhr-login-copyright (inside the brand panel) already shows it. */
.vhr-login-bottom-credit {
  display: none;
}

/* Below this width the two-column layout (fixed 480px brand panel + form
   panel) no longer fits a phone viewport and forces horizontal scrolling —
   stack the brand panel above the form instead, and trim its content down
   to what's still useful once it's no longer a full-height side panel. */
@media (max-width: 860px) {
  .vhr-login-shell {
    flex-direction: column;
    min-height: 0;
  }

  .vhr-login-brand-panel {
    width: 100%;
    min-width: 0;
    padding: 32px 24px;
    gap: 24px;
  }

  /* The headline + supporting paragraph ("One place for your people,
     attendance and pay." / "Location-verified attendance...") pushed the
     actual username/password fields too far down a phone screen — hidden
     on mobile so the form panel starts right after the logo row. */
  .vhr-login-headline,
  .vhr-login-subtext {
    display: none !important;
  }

  .vhr-login-feature-list {
    display: none !important;
  }

  /* The brand-panel copy of the credit line moves out of the way on mobile —
     .vhr-login-bottom-credit (below) shows the same text at the actual
     bottom of the page instead. */
  .vhr-login-copyright {
    display: none;
  }

  .vhr-login-form-panel {
    padding: 28px 20px 12px;
  }

  .vhr-login-bottom-credit {
    display: block;
    text-align: center;
    padding: 0 20px 28px;
    font-size: 12px;
    color: var(--vhr-text-faint);
    line-height: 1.7;
  }

  .vhr-login-bottom-credit a {
    color: var(--vhr-text-muted);
  }
}

/* ---- Mobile-first ESS shell -------------------------------------------- */

.vhr-ess-shell {
  max-width: 480px;
  margin: 0 auto;
  min-height: 100vh;
  background: var(--vhr-bg);
  display: flex;
  flex-direction: column;
}

.vhr-ess-header {
  background: var(--vhr-surface);
  border-bottom: 1px solid var(--vhr-border);
  padding: 18px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.vhr-ess-content {
  flex: 1;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.vhr-tap-target {
  min-height: 44px;
  min-width: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 900px) {
  .vhr-sidebar { display: none; }
  .vhr-content { padding: 20px; }
  .vhr-topbar { padding: 14px 20px; }
}

/* ---- "Developed by" credit line — login screen, Admin console, ESS portal ---- */

.vhr-credit-footer {
  text-align: center;
  font-size: 12px;
  color: var(--vhr-text-faint);
  padding: 12px 20px 16px;
}

.vhr-credit-footer a {
  color: var(--vhr-text-muted);
  font-weight: 600;
  text-decoration: none;
}

.vhr-credit-footer a:hover {
  text-decoration: underline;
}

/* ---- Custom date picker (wwwroot/js/datepicker.js) — always day/month/year,
   never the visitor's browser/OS locale --------------------------------------- */

.vhr-dp-wrap {
  display: block;
  position: relative;
}

.vhr-dp-display {
  cursor: pointer;
  padding-right: 40px;
  background: var(--vhr-surface);
}

.vhr-dp-wrap.vhr-dp-open .vhr-dp-display {
  outline: none;
  border-color: var(--vhr-primary);
  box-shadow: 0 0 0 3px var(--vhr-primary-tint);
}

.vhr-dp-icon {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--vhr-text-faint);
  cursor: pointer;
  display: flex;
  pointer-events: none;
}

.vhr-dp-popup {
  position: absolute;
  z-index: 90;
  width: 272px;
  background: var(--vhr-surface);
  border: 1px solid var(--vhr-border);
  border-radius: var(--vhr-radius-md);
  box-shadow: 0 12px 32px rgba(20, 22, 40, 0.16);
  padding: 12px;
}

.vhr-dp-header {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-bottom: 8px;
}

.vhr-dp-nav-btn {
  border: none;
  background: none;
  color: var(--vhr-text-muted);
  font-size: 15px;
  width: 28px;
  height: 28px;
  border-radius: var(--vhr-radius-sm);
  cursor: pointer;
}

.vhr-dp-nav-btn:hover {
  background: var(--vhr-bg);
  color: var(--vhr-text);
}

.vhr-dp-label {
  flex: 1;
  text-align: center;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--vhr-text);
}

.vhr-dp-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  margin-bottom: 2px;
}

.vhr-dp-weekdays span {
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--vhr-text-faint);
  padding: 4px 0;
}

.vhr-dp-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}

.vhr-dp-day {
  border: none;
  background: none;
  font-size: 13px;
  color: var(--vhr-text);
  height: 32px;
  border-radius: var(--vhr-radius-sm);
  cursor: pointer;
}

.vhr-dp-day:hover {
  background: var(--vhr-bg);
}

.vhr-dp-day.is-muted {
  color: var(--vhr-text-faint);
}

.vhr-dp-day.is-today {
  box-shadow: inset 0 0 0 1.5px var(--vhr-primary);
}

.vhr-dp-day.is-selected {
  background: var(--vhr-primary);
  color: #fff;
  font-weight: 600;
}

.vhr-dp-footer {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--vhr-border-soft);
}

.vhr-dp-footer-btn {
  border: none;
  background: none;
  color: var(--vhr-primary);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  padding: 4px 6px;
}

.vhr-dp-footer-btn:hover {
  text-decoration: underline;
}