/* ---------- Onboarding: role card selection ---------- */
.wh-role-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;}
@media (max-width: 767.98px){.wh-role-grid{grid-template-columns:1fr;}}
.wh-role-card{border:1px solid rgba(17,24,39,.12);border-radius:14px;background:#fff;padding:16px;cursor:pointer;transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;display:flex;gap:12px;align-items:flex-start;}
.wh-role-card:hover{transform:translateY(-2px);box-shadow:0 10px 25px rgba(0,0,0,.08);}
.wh-role-card .wh-role-ic{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:rgba(37,99,235,.08);color:#2563eb;flex:0 0 auto;}
.wh-role-card small{color:#6b7280;display:block;line-height:1.35;}
.wh-role-input{position:absolute;opacity:0;pointer-events:none;}
.wh-role-input:checked + .wh-role-card{border-color:#2563eb;box-shadow:0 12px 28px rgba(37,99,235,.18);}
.wh-role-input:checked + .wh-role-card .wh-role-ic{background:#2563eb;color:#fff;}
/* NHNW Jobs black/white overrides (clean) */
:root{
  --wh-black:#111;
  --wh-white:#fff;
  --wh-muted:#6b7280;
  --wh-border:rgba(0,0,0,.10);
  --wh-card:rgba(17,17,17,.02);
  --wh-radius:16px;
  --wh-radius-lg:20px;
  --wh-shadow:0 10px 30px rgba(0,0,0,.06);
  /* Typography: align headings with NHNW booking portal */
  --wh-font: "SF Pro Display","SF Pro Text","San Francisco",-apple-system,BlinkMacSystemFont,system-ui,"Segoe UI",Roboto,"Helvetica Neue",Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";
  --wh-heading: "SF Pro Display","SF Pro Text","San Francisco",-apple-system,BlinkMacSystemFont,system-ui,"Segoe UI",Roboto,"Helvetica Neue",Helvetica,Arial;
  /* Override template typography vars (template uses serif headings) */
  --heading-font: var(--wh-heading);
  --body-font: var(--wh-font);
}

html, body{height:100%;}

body{
  background:#fff;
  font-family: var(--wh-font) !important;
  color: var(--wh-black);
}

/* ------------------------------------------------------------
   Compatibility layer for legacy template classes
   (we no longer load the template CSS, but views still use these)
------------------------------------------------------------- */

/* Buttons */
.btn--base{
  background: var(--wh-black) !important;
  color: #fff !important;
  border: 1px solid var(--wh-black) !important;
  border-radius: 999px !important;
  padding: 10px 18px !important;
  font-weight: 700 !important;
  line-height: 1.2;
  box-shadow: 0 8px 18px rgba(0,0,0,.08);
}
.btn--base:hover{ background:#000 !important; border-color:#000 !important; }
.btn--base:focus{ box-shadow: 0 0 0 4px rgba(0,0,0,.18) !important; }

.btn--sm, .btn.btn--sm{ padding: 6px 12px !important; font-size: 13px !important; border-radius: 999px !important; }

.text--base{ color: var(--wh-black) !important; font-weight: 600; }
.text--base:hover{ color: #000 !important; }

/* Inputs */
.form--control{
  border-radius: 14px !important;
  border: 1px solid var(--wh-border) !important;
  padding: 12px 14px !important;
  background: #fff !important;
  color: var(--wh-black) !important;
}
.form--control:focus{
  border-color: rgba(0,0,0,.35) !important;
  box-shadow: 0 0 0 4px rgba(0,0,0,.10) !important;
}

/* Cards */
.custom--card{
  border: 1px solid var(--wh-border) !important;
  border-radius: var(--wh-radius-lg) !important;
  box-shadow: var(--wh-shadow);
  background: #fff !important;
}

/* Tables */
.table--responsive th{ font-weight: 700; color: var(--wh-black); }
.table--responsive td{ vertical-align: middle; }

/* ------------------------------------------------------------
   Auth pages (match NHNW booking portal style)
------------------------------------------------------------- */
.wh-auth-page{
  min-height: calc(100vh - 88px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 0;
}
.wh-auth-inner{ width: 100%; max-width: 520px; }
.wh-auth-logo{ height: 46px; width: auto; object-fit: contain; }
.wh-auth-title{
  font-family: var(--wh-heading) !important;
  font-size: clamp(42px, 6vw, 68px);
  line-height: 0.92;
  letter-spacing: -0.02em;
  font-weight: 500;
}
.wh-auth-sub{
  color: var(--wh-muted);
  font-size: 14px;
}
.wh-auth-divider{
  border-top: 1px solid rgba(0,0,0,.10);
  margin: 22px 0 14px;
}
.wh-auth-link{ color: var(--wh-black); font-weight: 600; text-decoration: underline; }
.wh-auth-link:hover{ color: #000; }

/* Role toggle */
.wh-role-toggle{ display:flex; gap:10px; justify-content:center; }
.wh-role-toggle input{ position:absolute; opacity:0; pointer-events:none; }
.wh-role-toggle label{
  border: 1px solid var(--wh-border);
  border-radius: 999px;
  padding: 8px 14px;
  font-weight: 700;
  cursor: pointer;
  background: #fff;
}
.wh-role-toggle input:checked + label{
  background: var(--wh-black);
  border-color: var(--wh-black);
  color: #fff;
}

html{ scroll-behavior: smooth; }

/* Brand logo sizing (avoid squashing a wide logo into a square) */
.wh-brand-logo{
  height: 40px;
  width: auto;
  max-width: 200px;
  object-fit: contain;
  border-radius: 0 !important;
}

.wh-brand-logo--footer{
  height: 34px;
  max-width: 180px;
}

/* App layout: bulletproof sticky footer */
#whApp{ min-height:100vh; display:flex; flex-direction:column; }
main{ flex:1 0 auto; }
body > main{ flex:1 0 auto !important; }

/* Template sets main { margin-bottom: 60px } which creates odd gaps; neutralize */
main{ margin-bottom: 0 !important; }

/* Footer must be a normal flow element and always sit at the end */
.wh-footer{
  background:var(--wh-black) !important;
  position: static !important;
  width:100% !important;
  flex-shrink: 0;
  margin-top: auto !important;
}

/* Kill any template footer top overlap shapes if they exist on any page */
.footer-area__top{ margin-top:0 !important; border-radius:0 !important; background:transparent !important; }
.footer-area__top::before, .footer-area__top::after{ display:none !important; content:none !important; }

/* Skip link (accessibility) */
.wh-skip-link{
  position:absolute;
  left:-9999px;
  top:auto;
  width:1px;
  height:1px;
  overflow:hidden;
}
.wh-skip-link:focus{
  left:12px;
  top:12px;
  width:auto;
  height:auto;
  z-index:2000;
  padding:10px 12px;
  background:#fff;
  border:1px solid var(--wh-border);
  border-radius:10px;
  box-shadow:0 10px 30px rgba(0,0,0,.12);
}

/* Focus styling (accessibility) */
:focus-visible{
  outline: 3px solid rgba(0,0,0,.25);
  outline-offset: 2px;
}

/* Custom scrollbars */
*{ scrollbar-color: rgba(0,0,0,.35) transparent; scrollbar-width: thin; }
*::-webkit-scrollbar{ width:10px; height:10px; }
*::-webkit-scrollbar-track{ background: transparent; }
*::-webkit-scrollbar-thumb{ background: rgba(0,0,0,.25); border-radius: 999px; border: 2px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover{ background: rgba(0,0,0,.35); border: 2px solid transparent; background-clip: content-box; }
.footer-area__top{ margin-top: 0 !important; border-radius: 0 !important; }
.footer-area__top::before, .footer-area__top::after{ display:none !important; }

.header{
  background:#fff !important;
  border-bottom:1px solid var(--wh-border);
}

.navbar .nav-link{
  color:var(--wh-black) !important;
  font-weight:600;
}

/* Dropdown reliability
   Template CSS hides ALL .dropdown-menu on desktop via visibility/transform.
   That breaks Bootstrap dropdowns for profile/notifications. Fix by scoping to navbar.
*/
.navbar .dropdown-toggle{cursor:pointer;}
.navbar .dropdown-menu{
  z-index: 1100;
  visibility: visible !important;
  opacity: 1 !important;
  transform: none !important;
}
.navbar .dropdown-menu:not(.show){
  display:none;
}

.navbar .nav-link:hover{
  color:#000 !important;
}

.btn--base{
  background:var(--wh-black) !important;
  border-color:var(--wh-black) !important;
  color:#fff !important;
  border-radius:999px !important;
}

.btn-outline-dark, .btn-outline--secondary{
  border-radius:999px !important;
}

/* Ensure outline buttons are always visible (admin quick actions etc.) */
.btn-outline-dark{
  border: 1px solid var(--wh-black) !important;
  color: var(--wh-black) !important;
  background: transparent !important;
  display: inline-flex !important;
  align-items: center;
}

.btn-outline-dark:hover, .btn-outline-dark:focus{
  background: var(--wh-black) !important;
  color: #fff !important;
}

.form--control, .form-control{
  border-radius:14px !important;
}

.custom--card{
  border:1px solid var(--wh-border) !important;
  border-radius:var(--wh-radius) !important;
}

/* ------------------------------------------------------------
   Navbar CTA (client "Post a job")
   Prevents narrow wrapping that makes it look like a circle.
------------------------------------------------------------- */
.wh-nav-cta{
  white-space: nowrap !important;
  padding: 10px 18px !important;
  line-height: 1.1 !important;
  letter-spacing: .01em;
}

/* ------------------------------------------------------------
   Admin plan editor sizing
------------------------------------------------------------- */
.wh-plan-input{
  min-height: 48px !important;
  font-size: 16px !important;
  padding: 12px 14px !important;
}
select.wh-plan-input{
  padding-right: 44px !important;
}
.wh-plan-code{
  text-transform: uppercase;
  letter-spacing: .06em;
}

/* Typography: enforce uniform headings (remove theme serif headings) */
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6{
  font-family: var(--wh-heading) !important;
  letter-spacing: -0.03em;
}

/* Navbar layout polish */
.navbar-nav .nav-link{white-space:nowrap;}
.navbar .nav-menu{gap:2px;}

@media (min-width: 992px){
  .navbar-nav .nav-item{margin-right:2px;}
}

/* two-pane cards */
.wh-card{
  border:1px solid var(--wh-border);
  border-radius:var(--wh-radius-lg);
  background: #fff;
  box-shadow: var(--wh-shadow);
}

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

/* Auth pages */
.wh-auth-wrap{
  min-height: calc(100vh - 72px);
  display:flex;
  align-items:center;
}

.wh-auth-card{
  width:100%;
  max-width:460px;
}

.wh-skill-tag{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border:1px solid var(--wh-border);
  border-radius:999px;
  font-size:13px;
  background: var(--wh-card);
}

.wh-skill-tag button{
  border:none;
  background:transparent;
  padding:0;
  line-height:1;
}


/* Pills & badges */
.wh-pill{
  display:inline-flex;
  align-items:center;
  padding:6px 10px;
  border:1px solid var(--wh-border);
  border-radius:999px;
  background: var(--wh-card);
  font-size:13px;
  color: var(--wh-black);
}

/* Avatars */
.wh-avatar-sm{width:34px;height:34px;border-radius:999px;object-fit:cover;border:1px solid rgba(0,0,0,.12);}
.wh-avatar-md{width:44px;height:44px;border-radius:999px;object-fit:cover;border:1px solid rgba(0,0,0,.12);}
.wh-avatar-lg{width:60px;height:60px;border-radius:999px;object-fit:cover;border:1px solid rgba(0,0,0,.12);}

/* Inbox layout (clean two-pane) */
.wh-inbox{
  display:grid;
  grid-template-columns: 340px 1fr;
  border:1px solid var(--wh-border);
  border-radius: var(--wh-radius-lg);
  overflow:hidden;
  background:#fff;
  box-shadow: var(--wh-shadow);
}

.wh-inbox-left{
  border-right:1px solid var(--wh-border);
  background:#fff;
  min-height: 520px;
  display:flex;
  flex-direction:column;
}

.wh-inbox-right{
  background:#fff;
  min-height: 520px;
  display:flex;
  flex-direction:column;
}

.wh-inbox-list{
  overflow:auto;
  flex:1 1 auto;
}

.wh-thread{
  display:block;
  padding:12px 12px;
  border-bottom:1px solid rgba(0,0,0,.06);
  text-decoration:none;
  color: var(--wh-black);
}

.wh-thread:hover{ background: rgba(0,0,0,.03); }
.wh-thread.active{ background: rgba(0,0,0,.05); }

.wh-inbox-empty{
  padding:22px;
  height:100%;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;
}

.wh-chat-header{
  padding:14px 16px;
  border-bottom:1px solid rgba(0,0,0,.10);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.wh-chat-body{
  flex:1 1 auto;
  overflow:auto;
  padding:18px 16px;
  background: #fafafa;
}

.wh-chat-compose{
  border-top:1px solid rgba(0,0,0,.10);
  padding:12px 16px;
  background:#fff;
}

.wh-msg{display:flex; margin-bottom:10px;}
.wh-msg.mine{justify-content:flex-end;}
.wh-msg.theirs{justify-content:flex-start;}

.wh-bubble{
  max-width: 78%;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(0,0,0,.08);
  background:#fff;
}

.wh-msg.mine .wh-bubble{
  background:#111;
  color:#fff;
  border-color:#111;
}

.wh-msg.mine .wh-bubble .wh-muted{ color: rgba(255,255,255,.75) !important; }
.wh-msg.theirs .wh-bubble .wh-muted{ color: var(--wh-muted) !important; }

/* Dropdown polish */
.wh-dropdown .dropdown-item{white-space:normal;}
.wh-notif-item{padding-top:10px;padding-bottom:10px;}

@media (max-width: 991px){
  .wh-inbox{grid-template-columns: 1fr;}
  .wh-inbox-left{min-height:auto;}
  .wh-inbox-right{min-height:420px;}
}

/* Pagination styling */
.pagination .page-link{
  border-radius:12px !important;
}
.pagination .page-item.active .page-link{
  background: var(--wh-black) !important;
  border-color: var(--wh-black) !important;
}

/* ------------------------------------------------------------
   UI enhancements (requested)
------------------------------------------------------------ */

/* Smooth card hover animations with elevation */
.custom--card, .wh-card{
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.custom--card:hover, .wh-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 45px rgba(0,0,0,.10);
  border-color: rgba(0,0,0,.16);
}

/* Notification badges */
.wh-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:20px;
  height:20px;
  padding:0 6px;
  border-radius:999px;
  background:#0f766e;
  color:#fff;
  font-size:12px;
  font-weight:700;
  line-height:1;
}
.wh-badge--dark{ background:#111; }

/* Status indicators (online/offline/busy) */
.wh-status{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:13px;
  color: var(--wh-muted);
}
.wh-status-dot{
  width:10px;
  height:10px;
  border-radius:999px;
  background:#9ca3af;
  box-shadow: 0 0 0 3px rgba(0,0,0,.03);
}
.wh-status--online .wh-status-dot{ background:#16a34a; }
.wh-status--busy .wh-status-dot{ background:#f59e0b; }
.wh-status--offline .wh-status-dot{ background:#9ca3af; }

/* Professional tag/pill system */
.wh-pill{
  transition: background .18s ease, border-color .18s ease;
}
.wh-pill:hover{ background: rgba(0,0,0,.04); border-color: rgba(0,0,0,.16); }
.wh-pill--dark{ background:#111; border-color:#111; color:#fff; }

/* Profile card component */
.wh-profile-card{
  border:1px solid var(--wh-border);
  border-radius: var(--wh-radius-lg);
  background:#fff;
  box-shadow: var(--wh-shadow);
}
.wh-profile-card__head{ padding:16px 16px 10px 16px; }
.wh-profile-card__body{ padding:0 16px 16px 16px; }

/* Enhanced empty states with icons */
.wh-empty{
  border:1px dashed rgba(0,0,0,.18);
  border-radius: var(--wh-radius-lg);
  padding:22px;
  background: rgba(0,0,0,.02);
}
.wh-empty__icon{
  width:42px;
  height:42px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#111;
  color:#fff;
  margin-bottom:12px;
}

/* ------------------------------------------------------------
   Global button icon spacing (prevents icon-text crowding)
   Applies safely without changing display model of .btn.
------------------------------------------------------------- */
.btn > i:first-child,
.btn > svg:first-child,
.btn > span:first-child > i,
.btn > span:first-child > svg,
a.btn > i:first-child,
a.btn > svg:first-child,
a.btn > span:first-child > i,
a.btn > span:first-child > svg{
  margin-right: .5rem;
}

.btn > i:last-child,
.btn > svg:last-child,
a.btn > i:last-child,
a.btn > svg:last-child{
  margin-left: .5rem;
}

/* Contracts pill button: ensure padding + icon gap */
.btn.btn-contracts,
a.btn.btn-contracts{
  padding: 10px 16px;
  border-radius: 999px;
}

/* Job cards/actions: keep View/Apply aligned and consistent */
.job-actions,
.job-card-actions,
.jobs-actions{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:10px;
}
.job-actions .btn,
.job-card-actions .btn,
.jobs-actions .btn{
  min-width: 92px;
  white-space: nowrap;
}
.wh-empty__title{ font-weight:700; margin-bottom:6px; }
.wh-empty__text{ color:var(--wh-muted); font-size:14px; }
.wh-empty-inline{ color:var(--wh-muted); font-size:13px; }

/* Professional loading skeletons */
.wh-skeleton{
  position:relative;
  overflow:hidden;
  background: rgba(0,0,0,.06);
  border-radius: 12px;
}
.wh-skeleton::after{
  content:"";
  position:absolute;
  inset:0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.65), transparent);
  animation: whShimmer 1.2s infinite;
}
@keyframes whShimmer{ to { transform: translateX(100%); } }
.wh-skel-line{ height: 12px; margin: 8px 0; }
.wh-skel-line.lg{ height: 18px; }
.wh-skel-circle{ width:44px; height:44px; border-radius:999px; }

/* Better form inputs with icons */
.wh-input-icon{ position:relative; }
.wh-input-icon > i{
  position:absolute;
  left:12px;
  top:50%;
  transform: translateY(-50%);
  color: rgba(0,0,0,.45);
  font-size:18px;
}
.wh-input{
  padding-left: 40px !important;
  border-radius: 999px !important;
}

/* Drag-and-drop feedback for uploads */
.wh-dropzone{
  border:1px dashed rgba(0,0,0,.22);
  border-radius: 16px;
  padding:14px;
  background: rgba(0,0,0,.02);
}
.wh-dropzone.is-dragover{
  background: rgba(0,0,0,.05);
  border-color: rgba(0,0,0,.35);
}
.wh-dropzone__hint{ color: var(--wh-muted); font-size:13px; }

/* Tabs, breadcrumbs, modals */
.nav-tabs .nav-link{ border-radius: 12px 12px 0 0; }
.nav-tabs .nav-link.active{ font-weight:700; }
.breadcrumb{ margin-bottom: 0; }
.modal-content{ border-radius: 18px; }

/* Responsive design enhancements */
@media (max-width: 991px){
  .wh-truncate{ max-width: 130px; }
  .wh-brand-logo{ max-width: 160px; }
}

/* Smooth reveal animations */
.wh-reveal{ opacity:0; transform: translateY(10px); transition: opacity .45s ease, transform .45s ease; }
.wh-reveal.is-visible{ opacity:1; transform:none; }

/* Print styles */
@media print{
  header, footer, .btn, .navbar, .wh-skip-link{ display:none !important; }
  main{ padding:0 !important; }
  .custom--card, .wh-card{ box-shadow:none !important; }
}


/* Footer links: remove underline only in footer */
.wh-footer a{ text-decoration:none !important; }
.wh-footer a:hover{ text-decoration:none !important; }

/* Jobs browse: keep action buttons aligned and consistent */
.job-actions{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:10px;
  flex-wrap:nowrap;
}
.job-actions .btn{
  white-space:nowrap;
  padding:.5rem 1.05rem;
  font-size:.95rem;
}

@media (min-width: 768px){
  /* Ensure the right-side column has enough room to keep View + Apply on one line */
  .job-actions-wrap{ min-width:240px; }
}
@media (max-width: 576px){
  .job-actions{ justify-content:stretch; flex-wrap:wrap; }
  .job-actions .btn{ flex:1; text-align:center; }
}

@media (max-width: 420px){
  .job-actions{ flex-direction:column; align-items:stretch; }
  .job-actions .btn{ width:100%; }
}


/* Chat bubble height fix (prevents tall/stretchy messages) */
.wh-msg{
  align-items: flex-start;              /* stop vertical stretching */
}

.wh-bubble{
  height: auto !important;
  min-height: 0 !important;
  display: inline-block !important;     /* overrides any flex causing “space-between” */
}

.wh-bubble .wh-meta{
  margin-top: 6px;
}