/* =====================================================================
   HR Portal theme — modern indigo/violet, glassy navbar, 3D icon tiles.
   Self-contained: no external fonts/CDNs (demo must work offline).
   ===================================================================== */

:root {
  --hr-primary: #6366f1;          /* indigo 500 */
  --hr-primary-2: #8b5cf6;        /* violet 500 */
  --hr-accent: #06b6d4;           /* cyan 500 */
  --hr-ink: #1e293b;              /* slate 800 */
  --hr-grad: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  --hr-nav-grad: linear-gradient(120deg, #1e1b4b 0%, #312e81 45%, #4338ca 100%);
  /* sidebar: the Employees-card cyan, dark (left) -> light (right) */
  --hr-side-grad: linear-gradient(90deg, #06657f 0%, #0891b2 50%, #4ed3ef 100%);
  --hr-card-shadow: 0 4px 14px rgba(30, 27, 75, .08), 0 1px 3px rgba(30, 27, 75, .06);
  --hr-card-shadow-lg: 0 14px 34px rgba(79, 70, 229, .22), 0 4px 10px rgba(30, 27, 75, .10);
}

html { font-size: 14px; }
@media (min-width: 768px) { html { font-size: 16px; } }

html { position: relative; min-height: 100%; }

body {
  margin-bottom: 60px;
  color: var(--hr-ink);
  background:
    radial-gradient(900px 420px at 85% -10%, rgba(139, 92, 246, .12), transparent 60%),
    radial-gradient(800px 420px at -10% 0%, rgba(6, 182, 212, .10), transparent 55%),
    #f4f6fb;
  background-attachment: fixed;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 .1rem #fff, 0 0 0 .25rem var(--hr-primary);
}

/* ---------- top navigation: dark glassy gradient ---------- */
.hr-topnav {
  background: var(--hr-nav-grad);
  box-shadow: 0 6px 22px rgba(30, 27, 75, .35);
  border: 0 !important;
  padding-top: .55rem;
  padding-bottom: .55rem;
}
.hr-topnav .navbar-brand {
  color: #fff;
  font-weight: 700;
  letter-spacing: .03em;
  display: flex;
  align-items: center;
  gap: .55rem;
}
.hr-brand-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: .7rem;
  background: linear-gradient(145deg, #22d3ee, #6366f1 60%, #a855f7);
  box-shadow: inset 0 2px 3px rgba(255, 255, 255, .45), inset 0 -3px 5px rgba(0, 0, 0, .25), 0 4px 10px rgba(0, 0, 0, .35);
  font-size: 1.15rem;
}
.hr-topnav .nav-link {
  color: rgba(255, 255, 255, .88) !important;
  font-weight: 500;
  border-radius: .6rem;
  padding: .45rem .8rem !important;
  transition: background .15s ease, transform .15s ease;
}
.hr-topnav .nav-link:hover, .hr-topnav .nav-link:focus,
.hr-topnav .nav-item.show > .nav-link {
  color: #fff !important;
  background: rgba(255, 255, 255, .14);
}
.hr-topnav .nav-link:hover { transform: translateY(-1px); }
.hr-topnav .navbar-toggler { border-color: rgba(255, 255, 255, .35); }
.hr-topnav .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255,255,255,.9)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
.hr-topnav .text-muted { color: rgba(255, 255, 255, .65) !important; }

/* menu icon (colourful emoji) */
.mi {
  display: inline-block;
  margin-right: .35rem;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .25));
  font-size: 1.05em;
}

/* ---------- dropdown menus ---------- */
.hr-topnav .dropdown-menu {
  border: 0;
  border-radius: .9rem;
  margin-top: .5rem;
  padding: .5rem;
  box-shadow: 0 18px 40px rgba(30, 27, 75, .22), 0 4px 12px rgba(30, 27, 75, .14);
  animation: hrDropIn .16s ease-out;
}
@keyframes hrDropIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.dropdown-item {
  border-radius: .6rem;
  padding: .5rem .75rem;
  font-weight: 500;
  transition: background .12s ease, transform .12s ease;
}
.dropdown-item:hover {
  background: linear-gradient(90deg, rgba(99, 102, 241, .12), rgba(139, 92, 246, .12));
  transform: translateX(3px);
}

/* ---------- cards ---------- */
.card {
  border: 0;
  border-radius: 1rem;
  box-shadow: var(--hr-card-shadow);
}
.card-header {
  background: linear-gradient(90deg, rgba(99, 102, 241, .08), rgba(139, 92, 246, .05));
  border-bottom: 1px solid rgba(99, 102, 241, .12);
  border-radius: 1rem 1rem 0 0 !important;
}

/* ---------- buttons ---------- */
.btn-primary {
  background: var(--hr-grad);
  border: 0;
  box-shadow: 0 4px 12px rgba(99, 102, 241, .35);
}
.btn-primary:hover, .btn-primary:focus {
  background: linear-gradient(135deg, #4f46e5, #7c3aed);
  box-shadow: 0 6px 16px rgba(99, 102, 241, .45);
}
.btn-success { box-shadow: 0 4px 12px rgba(25, 135, 84, .3); }
.btn-danger  { box-shadow: 0 4px 12px rgba(220, 53, 69, .3); }

/* ---------- tables ---------- */
.table thead th {
  background: linear-gradient(90deg, #eef0ff, #f3eeff);
  color: #3730a3;
  border-bottom: 2px solid rgba(99, 102, 241, .25);
  white-space: nowrap;
}
.table-hover tbody tr { transition: background .12s ease, box-shadow .12s ease; }
.table-hover tbody tr:hover {
  background: linear-gradient(90deg, rgba(99, 102, 241, .12), rgba(6, 182, 212, .08)) !important;
  box-shadow: inset 3px 0 0 var(--hr-primary);
}
/* the flagship detail grid gets a touch more emphasis on hover */
#detailGrid tbody tr:hover td { color: var(--hr-ink); font-weight: 500; }

/* ---------- dashboard tiles (Home) ---------- */
.hr-hero {
  border-radius: 1.2rem;
  padding: 1.6rem 1.8rem;
  color: #fff;
  background: var(--hr-nav-grad);
  box-shadow: var(--hr-card-shadow-lg);
  position: relative;
  overflow: hidden;
}
.hr-hero::after {
  content: "";
  position: absolute;
  right: -60px; top: -60px;
  width: 220px; height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(34, 211, 238, .35), transparent 70%);
}
.hr-tile {
  display: block;
  position: relative;
  overflow: hidden;
  text-decoration: none;
  color: var(--hr-ink);
  background: #fff;
  border-radius: 1.1rem;
  padding: 1.1rem 1rem;
  height: 100%;
  box-shadow: var(--hr-card-shadow);
  transition: transform .18s ease, box-shadow .18s ease;
}
/* light sheen that sweeps across on hover */
.hr-tile::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 34%, rgba(99, 102, 241, .10) 50%, transparent 66%);
  transform: translateX(-120%);
  transition: transform .6s ease;
  pointer-events: none;
}
.hr-tile:hover {
  color: var(--hr-ink);
  transform: translateY(-7px) scale(1.02);
  box-shadow: var(--hr-card-shadow-lg);
}
.hr-tile:hover::before { transform: translateX(120%); }
.hr-tile:hover .hr-tile-icon { transform: translateY(-2px) scale(1.08) rotate(-4deg); }
.hr-tile:active { transform: translateY(-2px) scale(1.0); }
.hr-tile-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.4rem;
  height: 3.4rem;
  font-size: 1.7rem;
  border-radius: 1rem;
  margin-bottom: .65rem;
  box-shadow: inset 0 3px 5px rgba(255, 255, 255, .5), inset 0 -4px 7px rgba(0, 0, 0, .22), 0 6px 14px rgba(30, 27, 75, .22);
  filter: saturate(1.1);
  transition: transform .18s ease;
}
.hr-tile-icon > span { filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .3)); }
.hr-tile h6, .hr-tile small { position: relative; }
.hr-tile h6 { font-weight: 700; margin-bottom: .15rem; }
.hr-tile small { color: #64748b; }

/* ---------- KPI cards (analytics dashboard) ---------- */
.kpi {
  border-radius: .95rem;
  color: #fff;
  padding: .8rem 1rem;
  position: relative;
  overflow: hidden;
  min-height: 92px;
  cursor: default;
  box-shadow: inset 0 2px 3px rgba(255, 255, 255, .28), inset 0 -3px 6px rgba(0, 0, 0, .18), 0 6px 16px rgba(30, 27, 75, .18);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
/* moving sheen that sweeps across on hover */
.kpi::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .28) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform .55s ease;
  pointer-events: none;
}
.kpi:hover {
  transform: translateY(-6px) scale(1.02);
  filter: saturate(1.12) brightness(1.04);
  box-shadow: inset 0 2px 3px rgba(255, 255, 255, .35), inset 0 -3px 6px rgba(0, 0, 0, .2), 0 16px 30px rgba(30, 27, 75, .32);
}
.kpi:hover::before { transform: translateX(120%); }
.kpi:hover .kpi-emoji { transform: scale(1.18) rotate(-6deg); }
.kpi:active { transform: translateY(-2px) scale(1.0); }
.kpi .kpi-label { font-size: .7rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; opacity: .88; }
.kpi .kpi-value { font-size: 1.35rem; font-weight: 800; line-height: 1.25; text-shadow: 0 1px 2px rgba(0,0,0,.25); position: relative; }
.kpi .kpi-sub   { font-size: .72rem; opacity: .82; position: relative; }
.kpi .kpi-emoji { position: absolute; right: .65rem; top: .5rem; font-size: 1.45rem; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .35)); transition: transform .18s ease; }

.hr-section-label {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #64748b;
}

.chart-box { position: relative; height: 280px; }
#dashTabs { scroll-margin-top: 72px; }   /* land below the sticky topbar on scroll-through tab switches */

/* tile gradient palette */
.tg-blue    { background: linear-gradient(145deg, #93c5fd, #2563eb); }
.tg-indigo  { background: linear-gradient(145deg, #818cf8, #4f46e5); }
.tg-violet  { background: linear-gradient(145deg, #c084fc, #7c3aed); }
.tg-cyan    { background: linear-gradient(145deg, #67e8f9, #0891b2); }
.tg-emerald { background: linear-gradient(145deg, #6ee7b7, #059669); }
.tg-amber   { background: linear-gradient(145deg, #fcd34d, #d97706); }
.tg-rose    { background: linear-gradient(145deg, #fda4af, #e11d48); }
.tg-sky     { background: linear-gradient(145deg, #7dd3fc, #0284c7); }
.tg-lime    { background: linear-gradient(145deg, #bef264, #65a30d); }
.tg-fuchsia { background: linear-gradient(145deg, #f0abfc, #c026d3); }
.tg-teal    { background: linear-gradient(145deg, #5eead4, #0d9488); }
.tg-orange  { background: linear-gradient(145deg, #fdba74, #ea580c); }
.tg-slate   { background: linear-gradient(145deg, #cbd5e1, #475569); }

/* ---------- login hero ---------- */
.hr-login-wrap {
  min-height: calc(100vh - 140px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.hr-login-card {
  width: 100%;
  max-width: 420px;
  border-radius: 1.25rem;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(8px);
  box-shadow: var(--hr-card-shadow-lg);
}
.hr-login-logo {
  width: 4rem; height: 4rem;
  font-size: 2rem;
  border-radius: 1.2rem;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(145deg, #22d3ee, #6366f1 60%, #a855f7);
  box-shadow: inset 0 3px 5px rgba(255, 255, 255, .5), inset 0 -4px 7px rgba(0, 0, 0, .25), 0 10px 24px rgba(79, 70, 229, .4);
}

/* ---------- badges / alerts polish ---------- */
.badge { border-radius: .55rem; }
.alert { border: 0; border-radius: .9rem; box-shadow: var(--hr-card-shadow); }

/* ---------- footer (simple layout: employee / login) ---------- */
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  white-space: nowrap;
  line-height: 60px;
  background: transparent;
  border-top: 1px solid rgba(99, 102, 241, .15) !important;
}

/* ---------- admin shell: dark sidebar + topbar ---------- */
body.hr-with-sidebar { margin-bottom: 0; }

.hr-sidebar {
  position: fixed;
  top: 0; bottom: 0; left: 0;
  width: 252px;
  z-index: 1040;
  display: flex;
  flex-direction: column;
  color: #fff;
  background: var(--hr-side-grad);
  box-shadow: 4px 0 24px rgba(8, 145, 178, .35);
  transition: transform .2s ease;
}
.hr-sidebar .sb-brand {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: 1rem 1.1rem .8rem;
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  font-size: 1.02rem;
  line-height: 1.15;
}
.hr-sidebar .sb-user {
  margin: 0 .8rem .4rem;
  padding: .55rem .8rem;
  border-radius: .8rem;
  background: rgba(255, 255, 255, .09);
  font-size: .8rem;
}
.hr-sidebar nav {
  flex: 1;
  overflow-y: auto;
  padding: .2rem .8rem 1rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, .25) transparent;
}
.hr-sidebar .sb-section {
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .62);
  text-shadow: 0 1px 2px rgba(8, 51, 68, .35);
  margin: .95rem .45rem .3rem;
}
.hr-sidebar .sb-link {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .42rem .65rem;
  border-radius: .6rem;
  color: #fff;
  text-shadow: 0 1px 2px rgba(8, 51, 68, .45);   /* keeps labels crisp on the light right edge */
  text-decoration: none;
  font-size: .9rem;
  font-weight: 500;
  transition: background .12s ease;
}
.hr-sidebar .sb-link .mi { margin-right: 0; }
.hr-sidebar .sb-link:hover { background: rgba(255, 255, 255, .18); color: #fff; }
.hr-sidebar .sb-link.active {
  background: linear-gradient(90deg, rgba(8, 51, 68, .38), rgba(8, 51, 68, .18));
  color: #fff;
  box-shadow: inset 3px 0 0 #fff;
}

.hr-main {
  margin-left: 252px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.hr-main main { flex: 1; }
.hr-topbar {
  position: sticky;
  top: 0;
  z-index: 1030;
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: .6rem 1.2rem;
  margin-bottom: 1rem;
  background: rgba(255, 255, 255, .82);
  backdrop-filter: blur(10px);
  box-shadow: 0 2px 12px rgba(30, 27, 75, .07);
}
.hr-topbar .tb-title { font-weight: 700; font-size: 1.05rem; }
.hr-burger {
  border: 0;
  background: transparent;
  font-size: 1.35rem;
  line-height: 1;
  display: none;
  color: var(--hr-ink);
}
.hr-main-footer { padding: .8rem 1.2rem; border-top: 1px solid rgba(99, 102, 241, .15); }
.hr-sidebar-backdrop { display: none; }

@media (max-width: 991.98px) {
  .hr-sidebar { transform: translateX(-100%); }
  .hr-sidebar.show { transform: translateX(0); }
  .hr-main { margin-left: 0; }
  .hr-burger { display: inline-block; }
  .hr-sidebar-backdrop.show {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 1035;
    background: rgba(15, 23, 42, .5);
  }
}