/* ============================================================
   SPECTRUM HR – Warm Institutional Editorial
   Typography: Headland One + DM Sans
   Palette: Deep navy, warm slate, amber gold accent
   ============================================================ */
@font-face {
  font-family: "Headland One";
  font-style: normal;
  font-weight: 400;
  src:
    local("Headland One"),
    url("../font/headland-one-latin-400-normal.woff2") format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Headland One";
  font-style: normal;
  font-weight: 400;
  src:
    local("Headland One"),
    url("../font/headland-one-latin-ext-400-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 100;
  src:
    local("DM Sans"),
    url("../font/dm-sans-latin-100-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 100;
  src:
    local("DM Sans"),
    url("../font/dm-sans-latin-ext-100-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 300;
  src:
    local("DM Sans"),
    url("../font/dm-sans-latin-300-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 300;
  src:
    local("DM Sans"),
    url("../font/dm-sans-latin-ext-300-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 600;
  src:
    local("DM Sans"),
    url("../font/dm-sans-latin-600-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 600;
  src:
    local("DM Sans"),
    url("../font/dm-sans-latin-ext-600-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

:root {
  --hr-navy: #1b2a4a;
  --hr-navy-light: #2d3f63;
  --hr-slate: #475569;
  --hr-slate-light: #64748b;
  --hr-gold: #d4a937;
  --hr-gold-light: #f5e6b8;
  --hr-gold-muted: #c9a227;
  --hr-warm-white: #faf9f7;
  --hr-warm-gray: #f3f1ed;
  --hr-warm-gray-2: #e8e5df;
  --hr-warm-gray-3: #d4d0c8;
  --hr-text: #2c3345;
  --hr-text-muted: #6b7280;
  --hr-success: #16a34a;
  --hr-danger: #dc2626;
  --hr-info: #1b2a4a;
  --hr-radius: 10px;
  --hr-radius-sm: 6px;
  --hr-shadow-sm: 0 1px 3px rgba(27, 42, 74, .06), 0 1px 2px rgba(27, 42, 74, .04);
  --hr-shadow: 0 4px 16px rgba(27, 42, 74, .07), 0 1px 4px rgba(27, 42, 74, .04);
  --hr-shadow-lg: 0 12px 40px rgba(27, 42, 74, .1), 0 2px 8px rgba(27, 42, 74, .05);
  --hr-transition: .2s cubic-bezier(.4, 0, .2, 1);
}

/* ---- BASE ---- */
html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  color: var(--hr-text);
  background: var(--hr-warm-white);
  letter-spacing: -.01em;
}

/* ---- TYPOGRAPHY ---- */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Headland One', Georgia, serif;
  color: var(--hr-navy) !important;
  font-weight: 600;
  letter-spacing: -.02em;
}

body, .form-control, .form-check-label, .btn {
  font-family: 'DM Sans', system-ui, sans-serif;
}

a {
  color: var(--hr-navy-light);
  text-decoration-color: var(--hr-gold);
  text-underline-offset: 3px;
  transition: color var(--hr-transition), text-decoration-color var(--hr-transition);
}

a:hover {
  color: var(--hr-gold-muted);
  text-decoration-color: var(--hr-gold-muted);
}

dialog small {
  font-size: .75rem;
}

::selection {
  background-color: var(--hr-gold-light);
  color: var(--hr-navy);
}

/* ---- LAYOUT ---- */
.main-wrapper {
  min-height: calc(100vh - 4rem);
}

/* ---- NAVBAR ---- */
.site-navbar {
  background: var(--hr-navy);
  border-bottom: 3px solid var(--hr-gold);
  box-shadow: var(--hr-shadow);
  padding: .65rem 0;
}

.site-navbar .navbar-brand {
  font-family: 'Headland One', Georgia, serif;
  font-size: 1.4rem;
  font-weight: 700;
  color: #fff !important;
  letter-spacing: -.02em;
  display: flex;
  align-items: center;
  gap: .6rem;
  transition: opacity var(--hr-transition);
}

.site-navbar .navbar-brand:hover {
  opacity: .85;
}

.navbar-brand-logo {
  height: 2.1rem;
  vertical-align: middle;
  filter: brightness(0) invert(1);
  opacity: .9;
}

.site-navbar .nav-link {
  color: rgba(255, 255, 255, .8) !important;
  font-size: .9rem;
  font-weight: 500;
  transition: color var(--hr-transition);
}

.site-navbar .nav-link:hover {
  color: var(--hr-gold-light) !important;
}

.site-navbar .navbar-toggler {
  border-color: rgba(255, 255, 255, .25);
}

.site-navbar .navbar-toggler-icon {
  filter: brightness(0) invert(1);
}

/* User badge in navbar */
.user-badge {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 50px;
  padding: .3rem .85rem .3rem .65rem;
  color: rgba(255, 255, 255, .9) !important;
  font-size: .82rem;
  font-weight: 500;
  text-decoration: none;
  transition: all var(--hr-transition);
  letter-spacing: 0;
}

.user-badge:hover {
  background: rgba(255, 255, 255, .14);
  color: var(--hr-gold-light) !important;
  text-decoration: none;
}

.user-badge-icon {
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  background: var(--hr-gold);
  color: var(--hr-navy);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .7rem;
  font-weight: 700;
}

/* ---- FOOTER ---- */
.site-footer {
  background: var(--hr-warm-gray);
  border-top: 1px solid var(--hr-warm-gray-2);
  padding: 1.25rem 0;
  color: var(--hr-text-muted);
}

.site-footer small {
  font-size: .78rem;
  letter-spacing: .01em;
}

.site-footer a {
  color: var(--hr-slate);
  font-weight: 500;
}

.site-footer a:hover {
  color: var(--hr-navy);
}

.footer-divider {
  display: inline-block;
  width: 1px;
  height: .8rem;
  background: var(--hr-warm-gray-3);
  margin: 0 .75rem;
  vertical-align: middle;
}

/* ---- CARDS ---- */
.card-elevated {
  background: #fff;
  border: 1px solid var(--hr-warm-gray-2);
  border-radius: var(--hr-radius);
  box-shadow: var(--hr-shadow-sm);
  transition: box-shadow var(--hr-transition);
}

.card-elevated:hover {
  box-shadow: var(--hr-shadow);
}

/* ---- SEARCH HERO ---- */
.search-hero {
  text-align: center;
  padding: 3rem 0 2rem;
}

.search-hero h1 {
  font-size: 2rem;
  margin-bottom: .4rem;
}

.search-hero .search-subtitle {
  color: var(--hr-text-muted);
  font-size: 1rem;
  margin-bottom: 2rem;
  font-weight: 400;
}

.search-box {
  max-width: 560px;
  margin: 0 auto;
  position: relative;
}

.search-box .search-icon {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--hr-slate-light);
  font-size: 1.1rem;
  pointer-events: none;
  z-index: 2;
}

.search-box input[type="search"] {
  width: 100%;
  padding: .85rem 1rem .85rem 2.85rem;
  border: 2px solid var(--hr-warm-gray-2);
  border-radius: 50px;
  background: #fff;
  font-size: 1rem;
  font-family: 'DM Sans', system-ui, sans-serif;
  color: var(--hr-text);
  box-shadow: var(--hr-shadow-sm);
  transition: all var(--hr-transition);
  outline: none;
}

.search-box input[type="search"]:focus {
  border-color: var(--hr-navy-light);
  box-shadow: var(--hr-shadow), 0 0 0 3px rgba(27, 42, 74, .08);
}

.search-box input[type="search"]::placeholder {
  color: var(--hr-warm-gray-3);
}

/* ---- RESULTS TABLE ---- */
.results-card {
  background: #fff;
  border: 1px solid var(--hr-warm-gray-2);
  border-radius: var(--hr-radius);
  box-shadow: var(--hr-shadow-sm);
  overflow: hidden;
  animation: fadeSlideUp .4s ease both;
}

.results-card .table {
  margin: 0;
  font-size: .92rem;
}

.results-card .table thead th {
  background: var(--hr-warm-gray);
  border-bottom: 2px solid var(--hr-warm-gray-2);
  color: var(--hr-slate);
  font-weight: 600;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: .7rem .85rem;
  white-space: nowrap;
}

.results-card .table tbody td {
  padding: .7rem .85rem;
  vertical-align: middle;
  border-bottom-color: var(--hr-warm-gray);
}

.results-card .table tbody tr {
  transition: background var(--hr-transition);
}

.results-card .table-hover tbody tr:hover {
  background: rgba(212, 169, 55, .05);
}

.results-footer {
  padding: .6rem 1rem;
  background: var(--hr-warm-gray);
  border-top: 1px solid var(--hr-warm-gray-2);
  font-size: .78rem;
  color: var(--hr-text-muted);
}

.badge-terminated {
  display: inline-block;
  background: #fef2f2;
  color: var(--hr-danger) !important;
  font-size: .72rem;
  font-weight: 600;
  padding: .15rem .5rem;
  border-radius: 50px;
  letter-spacing: .02em;
}

.action-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--hr-radius-sm);
  text-decoration: none;
  font-size: 1rem;
  transition: all var(--hr-transition);
  background: var(--hr-warm-gray);
}

.action-link:hover {
  background: var(--hr-navy);
  transform: translateY(-1px);
  box-shadow: var(--hr-shadow-sm);
}

.action-link:hover .action-icon {
  filter: brightness(0) invert(1);
}

/* ---- PAGE HEADER (staff pages) ---- */
.page-header {
  padding: 1.5rem 0 1rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--hr-warm-gray-2);
}

.page-header h1 {
  font-size: 1.75rem;
  margin-bottom: .25rem;
}

.page-header .page-subtitle {
  color: var(--hr-text-muted);
  font-size: .95rem;
  font-weight: 400;
}

.breadcrumb-nav {
  margin-bottom: .5rem;
}

.breadcrumb-nav a {
  font-size: .82rem;
  color: var(--hr-slate-light);
  text-decoration: none;
  font-weight: 500;
}

.breadcrumb-nav a:hover {
  color: var(--hr-navy);
}

.breadcrumb-nav .separator {
  margin: 0 .4rem;
  color: var(--hr-warm-gray-3);
}

/* ---- DETAIL ROWS ---- */
.detail-row {
  display: flex;
  flex-direction: column;
  justify-content: start;
  padding: .45rem 0;
  border-bottom: 1px dashed var(--hr-warm-gray-2);
}

.detail-row:last-child {
  border-bottom: 0;
}

.detail-label {
  font-weight: 600;
  font-size: .88rem;
  color: var(--hr-slate);
}

.detail-value {
  flex: 1;
  color: var(--hr-text);
}

/* ---- SECTION CARD ---- */
.section-card {
  background: #fff;
  border: 1px solid var(--hr-warm-gray-2);
  border-radius: var(--hr-radius);
  box-shadow: var(--hr-shadow-sm);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}

.section-card h4 {
  font-size: 1.15rem;
  margin-bottom: .25rem;
}

.section-card .section-desc {
  color: var(--hr-text-muted);
  font-size: .88rem;
  margin-bottom: 1rem;
}

/* ---- FORM STYLES ---- */
.form-control, .form-select {
  border: 1.5px solid var(--hr-warm-gray-2);
  border-radius: var(--hr-radius-sm);
  padding: .55rem .8rem;
  font-size: .92rem;
  transition: all var(--hr-transition);
  background: #fff;
  color: var(--hr-text);
}

.form-control:focus, .form-select:focus {
  border-color: var(--hr-navy-light) !important;
  box-shadow: 0 0 0 3px rgba(27, 42, 74, .08) !important;
  outline: 0 !important;
}

.form-label {
  font-weight: 600;
  font-size: .88rem;
  color: var(--hr-slate);
  margin-bottom: .3rem;
}

.form-check-input {
  border-color: var(--hr-warm-gray-3);
  transition: all var(--hr-transition);
}

.form-check-input:checked {
  background-color: var(--hr-navy);
  border-color: var(--hr-navy);
}

.form-check-input:focus {
  box-shadow: 0 0 0 3px rgba(27, 42, 74, .12);
  border-color: var(--hr-navy-light);
}

/* ---- BUTTONS ---- */
.btn { transition: all var(--hr-transition); }

.btn-primary {
  background: var(--hr-navy);
  border-color: var(--hr-navy);
  border-radius: var(--hr-radius-sm);
  font-weight: 600;
  font-size: .88rem;
  padding: .55rem 1.4rem;
  letter-spacing: .01em;
}

.btn-primary:hover {
  background: var(--hr-navy-light);
  border-color: var(--hr-navy-light);
  box-shadow: var(--hr-shadow-sm);
  transform: translateY(-1px);
}

.btn-primary:active {
  transform: translateY(0);
}

.btn-secondary {
  background: var(--hr-warm-gray);
  border-color: var(--hr-warm-gray-2);
  color: var(--hr-text);
  border-radius: var(--hr-radius-sm);
  font-weight: 600;
  font-size: .88rem;
  padding: .55rem 1.2rem;
}

.btn-secondary:hover {
  background: var(--hr-warm-gray-2);
  border-color: var(--hr-warm-gray-3);
  color: var(--hr-text);
  box-shadow: var(--hr-shadow-sm);
}

.btn-link {
  color: var(--hr-slate-light);
  font-weight: 500;
  text-decoration: none;
}

.btn-link:hover {
  color: var(--hr-navy);
}

/* ---- ALERTS ---- */
.alert {
  border-radius: var(--hr-radius-sm);
  font-size: .9rem;
  border: 1px solid;
}

.alert-primary {
  background: #f0f4fa;
  border-color: #d0dbed;
  color: var(--hr-navy);
}

.alert-success {
  background: #f0fdf4;
  border-color: #bbf7d0;
  color: #166534;
}

.alert-danger {
  background: #fef2f2;
  border-color: #fecaca;
  color: #991b1b;
}

/* ---- DIALOG ---- */
dialog {
  border: 1px solid var(--hr-warm-gray-2);
  border-radius: var(--hr-radius);
  box-shadow: var(--hr-shadow-lg);
  padding: 1.5rem;
  max-width: 420px;
  width: 90%;
  font-family: 'DM Sans', system-ui, sans-serif;
}

dialog::backdrop {
  background: rgba(27, 42, 74, .35);
  backdrop-filter: blur(3px);
}

/* ---- UTILITIES ---- */
.fw-semi {
  font-weight: 600;
}

.mt-n1 {
  margin-top: -0.125rem;
}

.text-terminated {
  color: var(--hr-danger) !important;
}

/* ---- DROPDOWN ---- */
.dropdown-menu {
  border: 1px solid var(--hr-warm-gray-2);
  border-radius: var(--hr-radius-sm);
  box-shadow: var(--hr-shadow);
  padding: .35rem;
  font-size: .88rem;
}

.dropdown-item {
  border-radius: 4px;
  padding: .45rem .75rem;
  transition: background var(--hr-transition);
}

.dropdown-item:hover {
  background: var(--hr-warm-gray);
}

/* ---- TABLE (generic) ---- */
.table {
  font-size: .92rem;
}

.table thead th {
  font-weight: 600;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--hr-slate);
  border-bottom-width: 2px;
}

.table-hover tbody tr {
  transition: background var(--hr-transition);
}

/* ---- STATUS DOT ---- */
.status-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 50%;
  background: #dcfce7;
  color: var(--hr-success);
  font-size: .7rem;
  font-weight: 700;
}

/* ---- ANIMATIONS ---- */
@keyframes fadeSlideUp {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.animate-in {
  animation: fadeSlideUp .4s ease both;
}

.animate-in-delay-1 { animation-delay: .1s; }
.animate-in-delay-2 { animation-delay: .2s; }
.animate-in-delay-3 { animation-delay: .3s; }

/* ---- EQUIPMENT LIST STYLING ---- */
.equipment-list .equipment-list_item {
  padding: .5rem .75rem;
  border-bottom: 1px solid var(--hr-warm-gray);
  transition: background var(--hr-transition);
}

.equipment-list .equipment-list_item:hover {
  background: var(--hr-warm-gray);
  border-radius: var(--hr-radius-sm);
}

.equipment-list .equipment-list_item:last-child {
  border-bottom: 0;
}

/* ---- SAVE BAR ---- */
.save-bar {
  border-top: 2px solid var(--hr-warm-gray-2);
  padding: 1rem 0;
  margin-top: 2rem;
  display: flex;
  align-items: center;
  gap: .75rem;
}

/* ---- BOOTSTRAP OVERRIDES ---- */
.bg-light {
  background-color: var(--hr-warm-gray) !important;
}

.bg-primary {
  background-color: var(--hr-navy) !important;
}

.bg-secondary {
  background-color: var(--hr-slate) !important;
}

.text-dark {
  color: var(--hr-text) !important;
}

.text-light {
  color: var(--hr-warm-white) !important;
}

.text-primary {
  color: var(--hr-navy) !important;
}

.text-secondary {
  color: var(--hr-slate) !important;
}

.text-muted {
  color: var(--hr-text-muted) !important;
}

.text-success {
  color: var(--hr-success) !important;
}

.text-danger {
  color: var(--hr-danger) !important;
}

/* ---- RESPONSIVE ---- */
@media (min-width: 768px) {
  html {
    font-size: 17px;
  }

  .navbar-brand-logo {
    height: 2.25rem;
  }

  .search-hero h1 {
    font-size: 2.3rem;
  }
}

@media (min-width: 1000px) {
  .detail-row {
  align-items: center;
    flex-direction: row;
  }

  .detail-label {
    flex: 0 0 9rem;
  }

  .navbar-brand-logo {
    height: 2.5rem;
  }

  .search-hero {
    padding: 4rem 0 2.5rem;
  }
}

@media (min-width: 1400px) {
  html {
    font-size: 18px;
  }
}

@media (min-width: 1900px) {
  .container {
    max-width: 1600px;
  }
}