/* Somali Fix Jobs - custom styles on top of Tailwind CDN */

:root { --brand: #2563eb; }

html { -webkit-tap-highlight-color: transparent; }

/* Nicer focus ring */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

/* Custom scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 8px; }
.dark ::-webkit-scrollbar-thumb { background: #334155; }
::-webkit-scrollbar-track { background: transparent; }

/* Reusable component classes */
.btn, .btn-primary, .btn-outline {
  position: relative; overflow: hidden;
  transition: transform .15s cubic-bezier(.34,1.56,.64,1), box-shadow .2s ease, background-color .2s ease, border-color .2s ease, color .2s ease;
}
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .625rem 1.25rem; border-radius: .625rem; font-weight: 600; font-size: .875rem;
  cursor: pointer; border: 1px solid transparent; user-select: none;
}
.btn:active, .btn.is-pressed { transform: scale(.97); }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(37,99,235,.28); }
.btn:disabled, .btn.disabled { opacity: .55; cursor: not-allowed; transform: none; }
.btn-primary {
  background: var(--brand); color: #fff;
  box-shadow: 0 1px 2px rgba(15,23,42,.05), 0 8px 16px -8px color-mix(in srgb, var(--brand) 55%, transparent);
}
.btn-primary:hover { background: #1e3a8a; box-shadow: 0 4px 10px -2px color-mix(in srgb, var(--brand) 60%, transparent); transform: translateY(-1px); }
.btn-primary:active, .btn-primary.is-pressed { background: #1e3a8a; transform: translateY(0) scale(.96); }
.btn-outline { border-color: #cbd5e1; color: #334155; background: #fff; }
.dark .btn-outline { border-color: #334155; color: #e2e8f0; background: transparent; }
.btn-outline:hover, .btn-outline:active, .btn-outline.is-pressed {
  background: var(--brand); border-color: var(--brand); color: #fff;
}
.dark .btn-outline:hover, .dark .btn-outline:active, .dark .btn-outline.is-pressed {
  background: var(--brand); border-color: var(--brand); color: #fff;
}
.btn-outline:hover { transform: translateY(-1px); }
.btn-outline:active, .btn-outline.is-pressed { transform: translateY(0) scale(.96); }

/* Press ripple — a soft radial flash that expands and fades on release.
   `:active` alone is unreliable on touch devices unless a JS listener is
   bound somewhere on the page (a well-known mobile Safari/Chrome quirk),
   so main.js also toggles the identical `.is-pressed` class via pointer
   events — this guarantees the animation is visible on every device. */
.btn::after, .btn-primary::after, .btn-outline::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(circle, rgba(255,255,255,.55) 0%, transparent 72%);
  opacity: 0; transform: scale(.5);
  transition: opacity .55s ease, transform .55s ease;
}
.btn-outline::after { background: radial-gradient(circle, color-mix(in srgb, var(--brand) 35%, transparent) 0%, transparent 72%); }
.btn:active::after, .btn-primary:active::after, .btn-outline:active::after,
.btn.is-pressed::after, .btn-primary.is-pressed::after, .btn-outline.is-pressed::after {
  opacity: 1; transform: scale(1.3); transition: opacity 0s, transform 0s;
}

.card {
  position: relative;
  background: #fff; border: 1px solid #e2e8f0; border-radius: 1rem;
  box-shadow: 0 1px 3px rgba(0,0,0,.05);
  transition: box-shadow .32s cubic-bezier(.22,1,.36,1), border-color .32s ease;
}
.dark .card { background: #1e293b; border-color: #334155; }
.card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  border-radius: 1rem 1rem 0 0; pointer-events: none;
  background: linear-gradient(90deg, var(--brand), color-mix(in srgb, var(--brand) 25%, #fff));
  transform: scaleX(0); transform-origin: left center;
  transition: transform .45s cubic-bezier(.22,1,.36,1);
}
.card:hover::before { transform: scaleX(1); }
/* The lift/scale-on-hover ("bounce") is reserved for actual clickable browse
   cards (<a class="card">, e.g. companies/jobs/internships listings) — a
   <form>/<div> used as a settings or profile panel isn't something you
   "click through", so the whole box lifting under your cursor while filling
   it in just reads as unwanted movement. Scoped narrowly to a.card only. */
a.card { transition: transform .32s cubic-bezier(.22,1,.36,1), box-shadow .32s cubic-bezier(.22,1,.36,1), border-color .32s ease; will-change: transform; }
a.card:hover {
  transform: translateY(-5px) scale(1.008);
  border-color: color-mix(in srgb, var(--brand) 40%, #e2e8f0);
  box-shadow: 0 20px 34px -16px color-mix(in srgb, var(--brand) 40%, transparent), 0 4px 10px rgba(15,23,42,.06);
}
.dark a.card:hover { border-color: color-mix(in srgb, var(--brand) 45%, #334155); }
a.card:active { transform: translateY(-2px) scale(1); transition-duration: .12s; }

/* =====================================================================
   PORTAL SIDEBAR LINKS (admin/company/jobseeker — all share #adminSidebar)
   Calm hover feedback only — no slide/scale/bounce motion (user found the
   springy translateX+icon-scale hover distracting/unprofessional, esp. on
   Account Settings / Career profile menu items).
===================================================================== */
#adminSidebar nav a, #adminSidebar > div:last-child a {
  position: relative; overflow: hidden;
  transition: background-color .2s ease, color .2s ease, box-shadow .2s ease;
}
#adminSidebar nav a::before, #adminSidebar > div:last-child a::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(var(--brand), var(--brand-darker, var(--brand)));
  transform: scaleY(0); transition: transform .2s ease;
}
#adminSidebar nav a:hover::before, #adminSidebar > div:last-child a:hover::before { transform: scaleY(1); }

/* =====================================================================
   GLOBAL SUBMIT LOADER — small spinner swapped into a button's own label
   the moment a form is actually sent (login, register, create/edit
   modals, search, everything). Uses currentColor so it automatically
   matches btn-primary (white) and btn-outline (dark/brand) alike.
===================================================================== */
.btn-spinner {
  display: inline-block; width: 1.05em; height: 1.05em; margin-right: .55em;
  border-radius: 50%; border: 2.5px solid currentColor; border-top-color: transparent;
  animation: btnSpin .65s linear infinite; vertical-align: -0.2em; opacity: .9;
}
@keyframes btnSpin { to { transform: rotate(360deg); } }
.btn.btn-loading, .btn-primary.btn-loading, .btn-outline.btn-loading {
  opacity: 1 !important; cursor: wait !important; transform: none !important;
}
.btn.btn-loading::after, .btn-primary.btn-loading::after, .btn-outline.btn-loading::after { display: none; }

/* Staggered scroll-reveal for card grids (activated by main.js) */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s cubic-bezier(.22,1,.36,1); }
.reveal.in-view { opacity: 1; transform: none; }

.form-input {
  width: 100%; padding: .625rem .875rem; border-radius: .625rem;
  border: 1px solid #cbd5e1; background: #fff; color: #0f172a; font-size: .9rem;
  transition: border-color .15s, box-shadow .15s;
}
.form-input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(37,99,235,.15); outline: none; }
.dark .form-input { background: #0f172a; border-color: #334155; color: #f1f5f9; }
.form-input:-webkit-autofill, .form-input:-webkit-autofill:hover, .form-input:-webkit-autofill:focus {
  -webkit-text-fill-color: #0f172a; -webkit-box-shadow: 0 0 0 1000px #fff inset; box-shadow: 0 0 0 1000px #fff inset;
  transition: background-color 9999s ease-in-out 0s;
}
.dark .form-input:-webkit-autofill, .dark .form-input:-webkit-autofill:hover, .dark .form-input:-webkit-autofill:focus {
  -webkit-text-fill-color: #f1f5f9; -webkit-box-shadow: 0 0 0 1000px #0f172a inset; box-shadow: 0 0 0 1000px #0f172a inset;
}

.form-label { display:block; font-size:.78rem; font-weight:600; margin-bottom:.15rem; color:#475569; }
.dark .form-label { color:#cbd5e1; }

/* Fade-in animation for cards / sections */
@keyframes fadeInUp { from { opacity:0; transform: translateY(12px);} to {opacity:1; transform:none;} }
.animate-in { animation: fadeInUp .4s ease both; }

/* Line clamp helpers */
.clamp-2 { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.clamp-3 { display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }

/* =====================================================================
   ICON INPUT FIELDS  (icon + placeholder inside every text box)
   Usage:
   <div class="field">
     <i class="fa-solid fa-envelope field-icon"></i>
     <input class="field-input" placeholder="Email">
   </div>
===================================================================== */
.field { position: relative; }

.field-input {
  width: 100%;
  padding: .3rem .7rem .3rem 2.2rem;         /* room for the left icon */
  border-radius: .6rem;
  border: 1.5px solid #e2e8f0;
  background: #fff;
  color: #0f172a;
  font-size: .85rem;
  box-shadow: 0 1px 2px rgba(15,23,42,.04);
  transition: border-color .18s, box-shadow .18s, background .18s;
}
.field-input::placeholder { color: #94a3b8; }
.field-input:hover { border-color: #cbd5e1; }
.field-input:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 4px rgba(37,99,235,.12), 0 1px 2px rgba(15,23,42,.04);
  outline: none;
  background: #fff;
}
.dark .field-input {
  background: #0f172a;
  border-color: #334155;
  color: #f1f5f9;
  box-shadow: none;
}
.dark .field-input:hover { border-color: #475569; }
.dark .field-input:focus { background: #0b1220; }

/* Desktop Chrome/Edge paint autofilled inputs with their own white/yellow
   background at a priority normal `background` can't override — force it
   back to match the field's real (light or dark) background via the
   inset-box-shadow trick, so an autofilled password field doesn't turn
   white on a dark page (mobile browsers don't do this override as often,
   which is why it only showed up on desktop). */
.field-input:-webkit-autofill,
.field-input:-webkit-autofill:hover,
.field-input:-webkit-autofill:focus {
  -webkit-text-fill-color: #0f172a;
  -webkit-box-shadow: 0 0 0 1000px #fff inset;
  box-shadow: 0 0 0 1000px #fff inset;
  transition: background-color 9999s ease-in-out 0s;
}
.dark .field-input:-webkit-autofill,
.dark .field-input:-webkit-autofill:hover,
.dark .field-input:-webkit-autofill:focus {
  -webkit-text-fill-color: #f1f5f9;
  -webkit-box-shadow: 0 0 0 1000px #0f172a inset;
  box-shadow: 0 0 0 1000px #0f172a inset;
}

/* left icon */
.field-icon {
  position: absolute;
  left: .7rem;
  top: 50%;
  transform: translateY(-50%);
  color: #94a3b8;
  font-size: .82rem;
  pointer-events: none;
  transition: color .18s;
}
.field:focus-within .field-icon { color: var(--brand); }

/* right-side toggle/action button (e.g. show password) */
.field-action {
  position: absolute;
  right: .4rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1.7rem; height: 1.7rem;
  display: inline-flex; align-items: center; justify-content: center;
  color: #94a3b8; border-radius: .5rem; cursor: pointer;
}
.field-action:hover { color: var(--brand); background: rgba(37,99,235,.08); }
/* Reserve room on the right so typed text/placeholder never sits under the
   show-password button (e.g. narrow password fields on mobile). */
.field:has(.field-action) .field-input { padding-right: 2.3rem; }

/* when a select is used inside .field */
select.field-input { appearance: none; padding-right: 2.5rem; }
.field .select-caret {
  position:absolute; right:1rem; top:50%; transform:translateY(-50%);
  color:#94a3b8; pointer-events:none; font-size:.8rem;
}

/* Validation state */
.field-input.is-invalid { border-color:#ef4444; box-shadow:0 0 0 4px rgba(239,68,68,.12); }

/* =====================================================================
   OTP / VERIFICATION CODE BOXES
===================================================================== */
.otp-group { display:flex; gap:.6rem; justify-content:center; }
.otp-box {
  width: 3.1rem; height: 3.6rem;
  text-align: center;
  font-size: 1.5rem; font-weight: 700;
  border-radius: .85rem;
  border: 1.5px solid #e2e8f0;
  background: #fff; color:#0f172a;
  transition: border-color .18s, box-shadow .18s, transform .1s;
}
.otp-box:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 4px rgba(37,99,235,.14);
  outline: none; transform: translateY(-2px);
}
.otp-box.filled { border-color: var(--brand); background: rgba(37,99,235,.04); }
.dark .otp-box { background:#0f172a; border-color:#334155; color:#f1f5f9; }
@media (max-width:400px){ .otp-box { width:2.6rem; height:3.1rem; font-size:1.25rem; } }

/* =====================================================================
   AUTH SPLIT LAYOUT
===================================================================== */
.auth-wrap { min-height: 100vh; display: grid; grid-template-columns: 1fr; }
@media (min-width: 1024px){ .auth-wrap { grid-template-columns: 1.05fr 1fr; } }

.auth-brand {
  display: none;
  position: relative;
  color: #fff;
  background: linear-gradient(150deg, #1d4ed8 0%, #2563eb 45%, #4f46e5 100%);
  overflow: hidden;
  padding: 3.5rem;
}
@media (min-width: 1024px){ .auth-brand { display: flex; flex-direction: column; justify-content: space-between; } }
.auth-brand::before {
  content:""; position:absolute; inset:0;
  background-image: radial-gradient(circle at 15% 20%, rgba(255,255,255,.14) 1.5px, transparent 1.6px);
  background-size: 26px 26px; opacity:.6;
}

.auth-panel { display:flex; align-items:center; justify-content:center; padding: 2rem 1.25rem; background:#f8fafc; }
.dark .auth-panel { background:#0b1220; }
.auth-card { width:100%; max-width: 26rem; }

.auth-social {
  display:flex; align-items:center; justify-content:center; gap:.6rem;
  width:100%; padding:.65rem 1rem; border-radius:.75rem;
  border:1.5px solid #e2e8f0; background:#fff; font-weight:600; font-size:.88rem;
  color:#334155; box-shadow: 0 1px 2px rgba(15,23,42,.04);
  transition: all .15s;
}
.auth-social:hover { background:#f8fafc; border-color:#cbd5e1; box-shadow: 0 4px 10px -4px rgba(15,23,42,.1); transform: translateY(-1px); }
.auth-social:active { transform: translateY(0); }
.dark .auth-social { background:#0f172a; border-color:#334155; color:#e2e8f0; box-shadow:none; }
.dark .auth-social:hover { background:#0b1220; }

/* =====================================================================
   MODAL POPUPS (for CRUD forms)
===================================================================== */
.modal-overlay {
  position: fixed; inset: 0; z-index: 60;
  display: flex; align-items: center; justify-content: center;
  padding: 1rem;
  background: rgba(15,23,42,.55);
  backdrop-filter: blur(3px);
  opacity: 0; visibility: hidden;
  transition: opacity .2s ease, visibility .2s ease;
}
.modal-overlay.open { opacity: 1; visibility: visible; }
.modal-box {
  width: 100%; max-width: 34rem;
  max-height: 92vh; overflow-y: auto;
  background: #fff; border-radius: 1.25rem;
  box-shadow: 0 25px 50px -12px rgba(0,0,0,.35);
  transform: translateY(16px) scale(.98);
  transition: transform .22s cubic-bezier(.2,.8,.2,1);
}
.modal-overlay.open .modal-box { transform: translateY(0) scale(1); }
.dark .modal-box { background: #1e293b; }
.modal-head {
  position: sticky; top: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.1rem 1.4rem; border-bottom: 1px solid #e2e8f0;
  background: inherit; border-radius: 1.25rem 1.25rem 0 0;
}
.dark .modal-head { border-color: #334155; }
.modal-body { padding: 1.4rem; }
.modal-x {
  width: 2rem; height: 2rem; border-radius: .6rem;
  display: inline-flex; align-items: center; justify-content: center;
  color: #94a3b8; cursor: pointer;
}
.modal-x:hover { background: rgba(148,163,184,.15); color: #ef4444; }
body.modal-open { overflow: hidden; }

/* =====================================================================
   STAT / KPI RINGS (circular statistics)
===================================================================== */
.stat-ring { position: relative; width: 84px; height: 84px; }
.stat-ring svg { transform: rotate(-90deg); }
.stat-ring .stat-ring-val {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: .95rem;
}

/* Google button logo sizing */
.g-logo { width: 18px; height: 18px; flex-shrink: 0; }

/* =====================================================================
   CONFIRM MODAL (replaces native browser confirm())
===================================================================== */
.confirm-icon {
  width: 3.25rem; height: 3.25rem; border-radius: 1rem;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.35rem; margin: 0 auto;
}
.confirm-icon.danger  { background: rgba(239,68,68,.12); color: #ef4444; }
.confirm-icon.warning { background: rgba(245,158,11,.12); color: #d97706; }
.confirm-icon.info    { background: color-mix(in srgb, var(--brand) 12%, transparent); color: var(--brand); }

/* =====================================================================
   TOAST POPUPS (beautiful action notifications)
===================================================================== */
#toastWrap {
  position: fixed; top: 1rem; right: 1rem; z-index: 90;
  display: flex; flex-direction: column; gap: .65rem;
  width: min(92vw, 23rem); pointer-events: none;
}
.toast {
  pointer-events: auto; position: relative; overflow: hidden;
  display: flex; align-items: flex-start; gap: .8rem;
  padding: .85rem .95rem; border-radius: 1.1rem;
  background: #fff; color: #0f172a;
  border: 1px solid rgba(226,232,240,.9);
  box-shadow: 0 18px 40px -12px rgba(15,23,42,.28);
  transform: translateX(120%); opacity: 0;
  animation: toastIn .45s cubic-bezier(.2,.9,.25,1) forwards;
}
.dark .toast { background: #1e293b; color: #f1f5f9; border-color: rgba(51,65,85,.9); }
.toast.hide { animation: toastOut .35s ease forwards; }
.toast-clickable { cursor: pointer; }
.toast-clickable:hover { box-shadow: 0 20px 44px -10px rgba(15,23,42,.32); }
.toast-clickable:hover .toast-title { text-decoration: underline; }
@keyframes toastIn  { to { transform: none; opacity: 1; } }
@keyframes toastOut { to { transform: translateX(120%); opacity: 0; } }

.toast-icon {
  width: 2.3rem; height: 2.3rem; border-radius: .8rem; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: .95rem;
}
.toast-success .toast-icon { background: linear-gradient(135deg,#22c55e,#16a34a); }
.toast-error   .toast-icon { background: linear-gradient(135deg,#ef4444,#dc2626); }
.toast-warning .toast-icon { background: linear-gradient(135deg,#f59e0b,#d97706); }
.toast-info    .toast-icon { background: linear-gradient(135deg, var(--brand), var(--brand-darker, var(--brand))); }

.toast-body { flex: 1; min-width: 0; padding-top: .1rem; }
.toast-title { font-weight: 700; font-size: .8rem; line-height: 1.1; }
.toast-success .toast-title { color:#16a34a; } .dark .toast-success .toast-title{color:#4ade80;}
.toast-error   .toast-title { color:#dc2626; } .dark .toast-error .toast-title{color:#f87171;}
.toast-warning .toast-title { color:#d97706; } .dark .toast-warning .toast-title{color:#fbbf24;}
.toast-info    .toast-title { color:var(--brand); } .dark .toast-info .toast-title{color:var(--brand);}
.toast-msg { font-size: .85rem; margin-top: .12rem; color: #475569; word-wrap: break-word; }
.dark .toast-msg { color: #cbd5e1; }
.toast-brand { display:flex; align-items:center; gap:.3rem; margin-top:.4rem; font-size:.62rem; font-weight:600; color:#94a3b8; letter-spacing:.02em; }
.toast-brand .tb-logo { width:13px; height:13px; border-radius:4px; background:var(--brand); color:#fff; display:inline-flex; align-items:center; justify-content:center; font-size:7px; }
.toast-x { color:#cbd5e1; cursor:pointer; padding:.15rem; border-radius:.4rem; flex-shrink:0; }
.toast-x:hover { color:#ef4444; background:rgba(148,163,184,.15); }
.toast-bar { position:absolute; left:0; bottom:0; height:3px; width:100%; border-radius:0 0 0 1.1rem; transform-origin:left; }
.toast-success .toast-bar { background:#22c55e; } .toast-error .toast-bar{background:#ef4444;}
.toast-warning .toast-bar { background:#f59e0b; } .toast-info .toast-bar{background:var(--brand);}
.toast-bar.run { animation: toastBar var(--toast-life,5s) linear forwards; }
@keyframes toastBar { from { transform: scaleX(1); } to { transform: scaleX(0); } }

/* =====================================================================
   SHARED HERO GLOW — the same ambient dark-mode atmosphere used on the
   homepage hero, auth pages and portals. Drop the .hero-glow class on
   any section to give it the same "one system" premium feel.
===================================================================== */
.hero-glow { position: relative; overflow: hidden; }
.hero-glow::before, .hero-glow::after {
  content: ''; position: absolute; width: 26rem; height: 26rem; border-radius: 9999px;
  background: var(--brand); opacity: .07; filter: blur(90px); pointer-events: none; z-index: 0;
}
.hero-glow::before { top: -9rem; right: -7rem; }
.hero-glow::after  { bottom: -9rem; left: -7rem; background: #6366f1; opacity: .06; }
.dark .hero-glow { background-color: #0b1120 !important; }
.dark .hero-glow::before { opacity: .22; }
.dark .hero-glow::after  { opacity: .18; }
.hero-glow > * { position: relative; z-index: 1; }

/* =====================================================================
   MODERN CENTERED AUTH (glass card on animated mesh)
===================================================================== */
.auth-mesh {
  position: fixed; inset: 0; overflow: hidden;
  background: #eef2ff;
  display: flex; align-items: safe center; justify-content: center; padding: 1.25rem;
}
.dark .auth-mesh { background: #070b18; }
.auth-mesh .blob {
  position: absolute; border-radius: 9999px; filter: blur(70px); opacity: .55;
  animation: floaty 14s ease-in-out infinite;
}
.dark .auth-mesh .blob { opacity: .32; }
.auth-mesh .blob-1 { width: 460px; height: 460px; background: #3b82f6; top: -120px; left: -100px; }
.auth-mesh .blob-2 { width: 420px; height: 420px; background: #6366f1; bottom: -140px; right: -80px; animation-delay: -4s; }
.auth-mesh .blob-3 { width: 320px; height: 320px; background: #22d3ee; bottom: 40px; left: 12%; animation-delay: -8s; }
@keyframes floaty {
  0%,100% { transform: translate(0,0) scale(1); }
  33%     { transform: translate(30px,-40px) scale(1.08); }
  66%     { transform: translate(-25px,25px) scale(.95); }
}

.glass-card {
  position: relative; z-index: 10; width: 100%; max-width: 25rem;
  background: rgba(255,255,255,.82);
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  border: 1px solid rgba(255,255,255,.6);
  border-radius: 1.75rem;
  box-shadow: 0 30px 60px -12px rgba(30,58,138,.28);
  padding: 1.75rem 2rem;
  animation: cardIn .5s cubic-bezier(.2,.8,.2,1) both;
}
.dark .glass-card {
  background: rgba(17,24,39,.72);
  border-color: rgba(148,163,184,.14);
  box-shadow: 0 30px 60px -12px rgba(0,0,0,.55);
}
@keyframes cardIn { from { opacity:0; transform: translateY(22px) scale(.97); } to { opacity:1; transform:none; } }
.glass-card-wide { max-width: 34rem; padding: 1.25rem 2rem; }
/* allow tall cards (register) to scroll fully without clipping the top */
.auth-mesh { overflow-y: auto; padding-top: 4.5rem; padding-bottom: 2rem; }

.auth-badge {
  width: 56px; height: 56px; border-radius: 1.1rem;
  display:flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg, var(--brand), var(--brand-darker, var(--brand)));
  color:#fff; font-size:1.35rem;
  box-shadow: 0 10px 25px -6px color-mix(in srgb, var(--brand) 60%, transparent);
}

/* Blog article detail page — editorial reading typography (post.php only) */
.article-content { font-size: 1.0625rem; line-height: 1.8; }
.article-content p { margin: 0 0 1.35em; }
.article-content br + br { display: block; content: ""; margin-top: .6em; }
.article-content h2 { font-size: 1.5rem; font-weight: 800; margin: 1.8em 0 .6em; line-height: 1.3; color: inherit; }
.article-content h3 { font-size: 1.2rem; font-weight: 700; margin: 1.6em 0 .5em; line-height: 1.35; color: inherit; }
.article-content ul, .article-content ol { margin: 0 0 1.35em; padding-left: 1.4em; }
.article-content li { margin-bottom: .5em; }
.article-content ul { list-style: disc; }
.article-content ol { list-style: decimal; }
.article-content blockquote {
  margin: 1.6em 0; padding: .2em 0 .2em 1.1em;
  border-left: 3px solid var(--brand); font-style: italic; color: #475569;
}
.dark .article-content blockquote { color: #cbd5e1; }
.article-content a { color: var(--brand); text-decoration: underline; text-underline-offset: 2px; }
.article-content a:hover { color: var(--brand-dark, var(--brand)); }
.article-content strong { font-weight: 700; color: inherit; }
.article-content img { border-radius: .9rem; margin: 1.5em 0; width: 100%; height: auto; }

/* Admin dashboard (admin/index.php only) — softer, rounder, more premium card
   language than the site's default `.card` (which stays untouched everywhere
   else). Same data/features, just a different container style. */
.wn-page { background: #F7F7FB; margin: -1rem -1rem 0; padding: 1rem 1rem 2rem; border-radius: 0; }
@media (min-width: 640px) { .wn-page { margin: -1.5rem -1.5rem 0; padding: 1.5rem 1.5rem 2rem; } }
.dark .wn-page { background: #0b1120; }
.wn-card {
  background: #fff; border: none; border-radius: 1.75rem;
  box-shadow: 0 10px 30px -14px rgba(15,23,42,.10), 0 2px 8px -4px rgba(15,23,42,.04);
}
.dark .wn-card { background: #161c2c; box-shadow: 0 10px 30px -14px rgba(0,0,0,.5); }

/* Desktop sidebar collapse toggle (portal layouts: job seeker / company / admin).
   Mobile already hides the sidebar behind a hamburger; this is a separate
   desktop-only affordance.

   - Expanded (default): sidebar is static, full width — hover does nothing.
   - Collapsed (after clicking the toggle): narrows to an icon-only rail.
     Hovering the rail then "peeks" it open as a floating overlay (labels
     reappear, no page reflow since it switches to position:fixed only
     while hovered); moving the mouse away shrinks it back to the rail.
     The toggle button (inside the rail) still flips the persisted
     collapsed/expanded state on click, independent of the hover peek. */
@media (min-width: 1024px) {
  body.sidebar-collapsed #adminSidebar { width: 4.5rem !important; }
  body.sidebar-collapsed #adminSidebar .sb-label { display: none; }
  body.sidebar-collapsed #adminSidebar .sb-link { justify-content: center; padding-left: 0; padding-right: 0; }
  body.sidebar-collapsed #adminSidebar .sidebar-brand { justify-content: center; padding-left: .5rem; padding-right: .5rem; }
  body.sidebar-collapsed #adminSidebar .sidebar-brand a { flex: none; }

  body.sidebar-collapsed #adminSidebar:hover {
    position: fixed; top: 0; height: 100vh;
    width: 16rem !important;
    z-index: 45;
    box-shadow: 4px 0 24px rgba(0,0,0,.25);
  }
  body.sidebar-collapsed #adminSidebar:hover .sb-label { display: revert; }
  body.sidebar-collapsed #adminSidebar:hover .sb-link { justify-content: flex-start; padding-left: .75rem; padding-right: .75rem; }
  body.sidebar-collapsed #adminSidebar:hover .sidebar-brand { justify-content: flex-start; padding-left: 1.25rem; padding-right: 1.25rem; }
  body.sidebar-collapsed #adminSidebar:hover .sidebar-brand a { flex: 1; }
}

/* Clean printed/PDF reports (admin/reports.php): hide the app chrome and
   filter controls, show only the branded report header + data table. */
.report-print-header { display: none; }
@media print {
  #adminSidebar, #sidebarBackdrop, .no-print { display: none !important; }
  body { background: #fff !important; }
  .report-print-header { display: block !important; }
}
.wn-icon {
  width: 3rem; height: 3rem; border-radius: 9999px;
  display: flex; align-items: center; justify-content: center; font-size: 1.125rem;
}
.wn-banner {
  border-radius: 1.75rem; position: relative; overflow: hidden;
  background: var(--brand-gradient, linear-gradient(120deg, var(--brand), var(--brand-dark, var(--brand))));
  color: #fff;
}
.wn-banner::before, .wn-banner::after {
  content: ''; position: absolute; border-radius: 9999px; background: rgba(255,255,255,.10);
}
.wn-banner::before { width: 220px; height: 220px; top: -90px; right: -60px; }
.wn-banner::after  { width: 140px; height: 140px; bottom: -70px; right: 120px; }
.wn-pill { display: inline-flex; align-items: center; gap: .4rem; font-size: .72rem; font-weight: 600; padding: .3rem .7rem; border-radius: 9999px; }

/* Homepage hero — slow drifting background blobs (index.php only). Same colors/
   layout as before, just gently animated so the hero doesn't feel static. */
.hero-blob { will-change: transform; }
.hero-blob-1 { animation: heroDrift1 16s ease-in-out infinite alternate; }
.hero-blob-2 { animation: heroDrift2 20s ease-in-out infinite alternate; }
.hero-blob-3 { animation: heroDrift3 24s ease-in-out infinite alternate; }
@keyframes heroDrift1 { from { transform: translate(0,0) scale(1); } to { transform: translate(-30px,25px) scale(1.12); } }
@keyframes heroDrift2 { from { transform: translate(0,0) scale(1); } to { transform: translate(35px,-20px) scale(1.08); } }
@keyframes heroDrift3 { from { transform: translate(0,0) scale(1); } to { transform: translate(20px,-30px) scale(1.15); } }
@media (prefers-reduced-motion: reduce) { .hero-blob { animation: none; } }

.hero-type-cursor { display: inline-block; width: 3px; margin-left: 2px; background: currentColor; animation: heroTypeBlink 0.9s step-end infinite; }
@keyframes heroTypeBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .hero-type-cursor { animation: none; } }