/* ZyroCareers design tokens + shared components.
   Palette (colour psychology):
   - Indigo  #4F46E5  trust, competence, calm focus  -> brand, primary actions, navigation
   - Emerald #10B981  growth, progress, "go"         -> success, hired, open roles, apply confirmations
   - Amber   #F59E0B  optimism, energy, attention    -> highlights, "new"/featured badges (sparingly)
   - Slate   #0F172A..#F8FAFC                         -> calm neutral canvas, readable ink (WCAG AA) */
:root {
  --zc-primary: #4f46e5;
  --zc-primary-dark: #4338ca;
  --zc-primary-soft: #eef0ff;
  --zc-growth: #10b981;
  --zc-growth-soft: #ecfdf5;
  --zc-accent: #f59e0b;
  --zc-accent-soft: #fffbeb;
  --zc-ink: #0f172a;
  --zc-muted: #64748b;
  --zc-canvas: #f8fafc;
}

[x-cloak] { display: none !important; }
body { font-family: 'Inter', sans-serif; -webkit-font-smoothing: antialiased; }
.font-display { font-family: 'Manrope', 'Inter', sans-serif; }

@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.animate-fade-in { animation: fadeIn .4s ease-out forwards; }

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #e5e7eb; border-radius: 10px; }

/* Admin shell */
@media (min-width: 768px) {
  #admin-main-wrapper { padding-left: 16rem; }
  body.sidebar-collapsed #admin-main-wrapper { padding-left: 5rem; }
  body.sidebar-collapsed #sidebar { width: 5rem; }
  body.sidebar-collapsed #sidebar .sidebar-brand-text,
  body.sidebar-collapsed #sidebar .nav-section-label,
  body.sidebar-collapsed #sidebar .nav-label { display: none; }
  body.sidebar-collapsed #sidebar .nav-item { justify-content: center; padding-left: .5rem; padding-right: .5rem; }
}

/* Buttons */
.btn-primary { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; border-radius: .75rem; background: var(--zc-primary); color: #fff; font-weight: 600; font-size: .875rem; padding: .625rem 1rem; box-shadow: 0 10px 20px -10px rgba(79,70,229,.55); transition: background .15s, transform .15s; }
.btn-primary:hover { background: var(--zc-primary-dark); }
.btn-primary:disabled { opacity: .6; cursor: not-allowed; }
.btn-secondary { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; border-radius: .75rem; border: 1px solid #e2e8f0; background: #fff; color: #334155; font-weight: 600; font-size: .875rem; padding: .625rem 1rem; transition: background .15s; }
.btn-secondary:hover { background: #f8fafc; }
.btn-growth { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; border-radius: .75rem; background: var(--zc-growth); color: #fff; font-weight: 600; font-size: .875rem; padding: .625rem 1rem; box-shadow: 0 10px 20px -10px rgba(16,185,129,.6); }
.btn-growth:hover { background: #059669; }
.btn-danger { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; border-radius: .75rem; background: #dc2626; color: #fff; font-weight: 600; font-size: .875rem; padding: .625rem 1rem; }
.btn-danger:hover { background: #b91c1c; }
.btn-ghost { display: inline-flex; align-items: center; gap: .375rem; border-radius: .625rem; padding: .375rem .625rem; font-size: .8125rem; font-weight: 600; color: #475569; }
.btn-ghost:hover { background: #f1f5f9; color: #0f172a; }

/* Forms */
.field { width: 100%; border: 1px solid #e2e8f0; border-radius: .75rem; background: #fff; padding: .625rem .875rem; font-size: .875rem; color: #0f172a; transition: border-color .15s, box-shadow .15s; }
.field:focus { outline: none; border-color: var(--zc-primary); box-shadow: 0 0 0 3px rgba(79,70,229,.16); }
.field-label { display: block; font-size: .8125rem; font-weight: 600; color: #334155; margin-bottom: .375rem; }
.field-hint { font-size: .75rem; color: #94a3b8; margin-top: .25rem; }
select.field { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2394a3b8'%3E%3Cpath d='M12 15l-5-5h10z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .6rem center; background-size: 1.1rem; padding-right: 2rem; }
textarea.field { min-height: 6rem; resize: vertical; }

/* Cards & chips */
.card { border-radius: 1.25rem; border: 1px solid rgba(241,245,249,.9); background: #fff; box-shadow: 0 4px 24px -8px rgba(15,23,42,.08); }
.chip { display: inline-flex; align-items: center; gap: .25rem; border-radius: 9999px; padding: .125rem .625rem; font-size: .6875rem; font-weight: 600; box-shadow: inset 0 0 0 1px var(--tw-ring-color, rgba(100,116,139,.2)); }
.tag { display: inline-flex; align-items: center; gap: .25rem; border-radius: .5rem; background: #f1f5f9; color: #475569; padding: .125rem .5rem; font-size: .75rem; font-weight: 500; }

/* Tables */
.zc-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .875rem; }
.zc-table thead th { position: sticky; top: 0; z-index: 1; background: #f8fafc; text-align: left; font-size: .6875rem; text-transform: uppercase; letter-spacing: .05em; color: #64748b; font-weight: 700; padding: .75rem 1rem; border-bottom: 1px solid #f1f5f9; white-space: nowrap; }
.zc-table tbody td { padding: .875rem 1rem; border-bottom: 1px solid #f1f5f9; vertical-align: middle; color: #334155; }
.zc-table tbody tr:hover td { background: #fafbff; }

/* Modals (create/edit always in a modal) */
.zc-modal-overlay { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: flex-start; justify-content: center; padding: 1rem; overflow-y: auto; background: rgba(15,23,42,.45); backdrop-filter: blur(4px); }
.zc-modal-panel { width: 100%; max-width: 32rem; margin-top: auto; margin-bottom: auto; max-height: min(90dvh, calc(100vh - 2.5rem)); display: flex; flex-direction: column; overflow: hidden; background: #fff; border-radius: 1.25rem; box-shadow: 0 25px 50px -12px rgba(15,23,42,.25); }
.zc-modal-panel.zc-modal-lg { max-width: 44rem; }
.zc-modal-panel.zc-modal-xl { max-width: 60rem; }
.zc-modal-header { flex-shrink: 0; display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1.25rem 1.5rem; border-bottom: 1px solid #f1f5f9; }
.zc-modal-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 1.25rem 1.5rem; }
.zc-modal-footer { flex-shrink: 0; display: flex; justify-content: flex-end; gap: .75rem; padding: 1rem 1.5rem; border-top: 1px solid #f1f5f9; background: #fcfcfd; }

/* Rich text output */
.prose-zc p { margin: 0 0 .75rem; line-height: 1.7; color: #334155; }
.prose-zc ul { list-style: disc; padding-left: 1.25rem; margin: 0 0 .75rem; }
.prose-zc li { margin: .25rem 0; line-height: 1.6; color: #334155; }

/* Kanban */
.kanban-col { min-width: 17rem; width: 17rem; }
.kanban-card.dragging { opacity: .5; }
.kanban-drop.drag-over { background: #eef0ff; outline: 2px dashed #a5b4fc; outline-offset: -4px; }

/* Landing */
.hero-wash { background:
  radial-gradient(circle at 12% 18%, rgba(199,210,254,.85), transparent 32%),
  radial-gradient(circle at 88% 12%, rgba(167,243,208,.55), transparent 30%),
  radial-gradient(circle at 70% 85%, rgba(253,230,138,.35), transparent 30%),
  linear-gradient(180deg, #f9fbff 0%, #f2f4fb 100%); }
.grid-dots { background-image: radial-gradient(rgba(79,70,229,.12) 1px, transparent 1px); background-size: 22px 22px; }