Spaces:

Vipooshanb
/

HR

Running

App Files Files Community

Vipooshanb commited on Apr 9

Commit

a0372d5

1 Parent(s): e67c6c0

Create Sample Kandan

Browse files

Files changed (21) hide show

HR System/index.html +0 -1
HR System/src/App.css +0 -184
HR System/src/App.jsx +265 -113
HR System/src/components/CalendarView.jsx +71 -0
HR System/src/components/CandidateCard.jsx +39 -0
HR System/src/components/CandidateDirectory.jsx +130 -0
HR System/src/components/CandidateModal.jsx +87 -0
HR System/src/components/EmptyState.jsx +10 -0
HR System/src/components/FilterBar.jsx +43 -0
HR System/src/components/Header.jsx +26 -0
HR System/src/components/KanbanBoard.jsx +46 -0
HR System/src/components/SettingsPanel.jsx +44 -0
HR System/src/components/Sidebar.jsx +82 -0
HR System/src/components/StageColumn.jsx +35 -0
HR System/src/components/TabsNav.jsx +18 -0
HR System/src/components/TopActions.jsx +15 -0
HR System/src/data/dummyCandidates.js +224 -0
HR System/src/index.css +1 -109
HR System/src/main.jsx +1 -0
HR System/src/services/candidateApi.js +44 -0
HR System/src/styles/global.css +1229 -0

HR System/index.html CHANGED Viewed

@@ -2,7 +2,6 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>hr-system</title>
   </head>

 <html lang="en">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>hr-system</title>
   </head>

HR System/src/App.css DELETED Viewed

@@ -1,184 +0,0 @@
-.counter {
-  font-size: 16px;
-  padding: 5px 10px;
-  border-radius: 5px;
-  color: var(--accent);
-  background: var(--accent-bg);
-  border: 2px solid transparent;
-  transition: border-color 0.3s;
-  margin-bottom: 24px;
-  &:hover {
-    border-color: var(--accent-border);
-  }
-  &:focus-visible {
-    outline: 2px solid var(--accent);
-    outline-offset: 2px;
-  }
-}
-.hero {
-  position: relative;
-  .base,
-  .framework,
-  .vite {
-    inset-inline: 0;
-    margin: 0 auto;
-  }
-  .base {
-    width: 170px;
-    position: relative;
-    z-index: 0;
-  }
-  .framework,
-  .vite {
-    position: absolute;
-  }
-  .framework {
-    z-index: 1;
-    top: 34px;
-    height: 28px;
-    transform: perspective(2000px) rotateZ(300deg) rotateX(44deg) rotateY(39deg)
-      scale(1.4);
-  }
-  .vite {
-    z-index: 0;
-    top: 107px;
-    height: 26px;
-    width: auto;
-    transform: perspective(2000px) rotateZ(300deg) rotateX(40deg) rotateY(39deg)
-      scale(0.8);
-  }
-}
-#center {
-  display: flex;
-  flex-direction: column;
-  gap: 25px;
-  place-content: center;
-  place-items: center;
-  flex-grow: 1;
-  @media (max-width: 1024px) {
-    padding: 32px 20px 24px;
-    gap: 18px;
-  }
-}
-#next-steps {
-  display: flex;
-  border-top: 1px solid var(--border);
-  text-align: left;
-  & > div {
-    flex: 1 1 0;
-    padding: 32px;
-    @media (max-width: 1024px) {
-      padding: 24px 20px;
-    }
-  }
-  .icon {
-    margin-bottom: 16px;
-    width: 22px;
-    height: 22px;
-  }
-  @media (max-width: 1024px) {
-    flex-direction: column;
-    text-align: center;
-  }
-}
-#docs {
-  border-right: 1px solid var(--border);
-  @media (max-width: 1024px) {
-    border-right: none;
-    border-bottom: 1px solid var(--border);
-  }
-}
-#next-steps ul {
-  list-style: none;
-  padding: 0;
-  display: flex;
-  gap: 8px;
-  margin: 32px 0 0;
-  .logo {
-    height: 18px;
-  }
-  a {
-    color: var(--text-h);
-    font-size: 16px;
-    border-radius: 6px;
-    background: var(--social-bg);
-    display: flex;
-    padding: 6px 12px;
-    align-items: center;
-    gap: 8px;
-    text-decoration: none;
-    transition: box-shadow 0.3s;
-    &:hover {
-      box-shadow: var(--shadow);
-    }
-    .button-icon {
-      height: 18px;
-      width: 18px;
-    }
-  }
-  @media (max-width: 1024px) {
-    margin-top: 20px;
-    flex-wrap: wrap;
-    justify-content: center;
-    li {
-      flex: 1 1 calc(50% - 8px);
-    }
-    a {
-      width: 100%;
-      justify-content: center;
-      box-sizing: border-box;
-    }
-  }
-}
-#spacer {
-  height: 88px;
-  border-top: 1px solid var(--border);
-  @media (max-width: 1024px) {
-    height: 48px;
-  }
-}
-.ticks {
-  position: relative;
-  width: 100%;
-  &::before,
-  &::after {
-    content: '';
-    position: absolute;
-    top: -4.5px;
-    border: 5px solid transparent;
-  }
-  &::before {
-    left: 0;
-    border-left-color: var(--border);
-  }
-  &::after {
-    right: 0;
-    border-right-color: var(--border);
-  }
-}

HR System/src/App.jsx CHANGED Viewed

@@ -1,120 +1,272 @@
-import { useState } from 'react'
-import reactLogo from './assets/react.svg'
-import viteLogo from './assets/vite.svg'
-import heroImg from './assets/hero.png'
-import './App.css'
 function App() {
-  const [count, setCount] = useState(0)
   return (
-    <>
-      <section id="center">
-        <div className="hero">
-          <img src={heroImg} className="base" width="170" height="179" alt="" />
-          <img src={reactLogo} className="framework" alt="React logo" />
-          <img src={viteLogo} className="vite" alt="Vite logo" />
-        </div>
-        <div>
-          <h1>Get started</h1>
-          <p>
-            Edit <code>src/App.jsx</code> and save to test <code>HMR</code>
-          </p>
-        </div>
-        <button
-          className="counter"
-          onClick={() => setCount((count) => count + 1)}
-        >
-          Count is {count}
-        </button>
-      </section>
-      <div className="ticks"></div>
-      <section id="next-steps">
-        <div id="docs">
-          <svg className="icon" role="presentation" aria-hidden="true">
-            <use href="/icons.svg#documentation-icon"></use>
-          </svg>
-          <h2>Documentation</h2>
-          <p>Your questions, answered</p>
-          <ul>
-            <li>
-              <a href="https://vite.dev/" target="_blank">
-                <img className="logo" src={viteLogo} alt="" />
-                Explore Vite
-              </a>
-            </li>
-            <li>
-              <a href="https://react.dev/" target="_blank">
-                <img className="button-icon" src={reactLogo} alt="" />
-                Learn more
-              </a>
-            </li>
-          </ul>
-        </div>
-        <div id="social">
-          <svg className="icon" role="presentation" aria-hidden="true">
-            <use href="/icons.svg#social-icon"></use>
-          </svg>
-          <h2>Connect with us</h2>
-          <p>Join the Vite community</p>
-          <ul>
-            <li>
-              <a href="https://github.com/vitejs/vite" target="_blank">
-                <svg
-                  className="button-icon"
-                  role="presentation"
-                  aria-hidden="true"
-                >
-                  <use href="/icons.svg#github-icon"></use>
-                </svg>
-                GitHub
-              </a>
-            </li>
-            <li>
-              <a href="https://chat.vite.dev/" target="_blank">
-                <svg
-                  className="button-icon"
-                  role="presentation"
-                  aria-hidden="true"
-                >
-                  <use href="/icons.svg#discord-icon"></use>
-                </svg>
-                Discord
-              </a>
-            </li>
-            <li>
-              <a href="https://x.com/vite_js" target="_blank">
-                <svg
-                  className="button-icon"
-                  role="presentation"
-                  aria-hidden="true"
-                >
-                  <use href="/icons.svg#x-icon"></use>
-                </svg>
-                X.com
-              </a>
-            </li>
-            <li>
-              <a href="https://bsky.app/profile/vite.dev" target="_blank">
-                <svg
-                  className="button-icon"
-                  role="presentation"
-                  aria-hidden="true"
-                >
-                  <use href="/icons.svg#bluesky-icon"></use>
-                </svg>
-                Bluesky
-              </a>
-            </li>
-          </ul>
-        </div>
-      </section>
-      <div className="ticks"></div>
-      <section id="spacer"></section>
-    </>
   )
 }

+import { useEffect, useMemo, useState } from 'react'
+import { dummyCandidates, stageOrder } from './data/dummyCandidates'
+import { getCandidates } from './services/candidateApi'
+import Sidebar from './components/Sidebar'
+import Header from './components/Header'
+import FilterBar from './components/FilterBar'
+import KanbanBoard from './components/KanbanBoard'
+import CandidateModal from './components/CandidateModal'
+import TopActions from './components/TopActions'
+import CandidateDirectory from './components/CandidateDirectory'
+import CalendarView from './components/CalendarView'
+import SettingsPanel from './components/SettingsPanel'
+const initialTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
+const viewCopy = {
+  Dashboard: {
+    description: 'Track the live hiring pipeline.',
+    statLabel: 'Visible',
+  },
+  Candidates: {
+    description: 'Search and review every applied candidate.',
+    statLabel: 'Matched',
+  },
+  Calendar: {
+    description: 'See the hiring month at a glance.',
+    statLabel: 'Month',
+  },
+  Settings: {
+    description: 'Adjust the application appearance.',
+    statLabel: 'Theme',
+  },
+}
 function App() {
+  const [candidates, setCandidates] = useState(dummyCandidates)
+  const [selectedCandidate, setSelectedCandidate] = useState(null)
+  const [isModalOpen, setIsModalOpen] = useState(false)
+  const [activeView, setActiveView] = useState('Dashboard')
+  const [searchTerm, setSearchTerm] = useState('')
+  const [selectedStage, setSelectedStage] = useState('All')
+  const [scoreFilter, setScoreFilter] = useState('All')
+  const [candidateSearchTerm, setCandidateSearchTerm] = useState('')
+  const [candidateStageFilter, setCandidateStageFilter] = useState('All')
+  const [candidatePositionFilter, setCandidatePositionFilter] = useState('All')
+  const [theme, setTheme] = useState(initialTheme)
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState('')
+  useEffect(() => {
+    document.documentElement.dataset.theme = theme
+    window.localStorage.setItem('dashboard-theme', theme)
+  }, [theme])
+  useEffect(() => {
+    const storedTheme = window.localStorage.getItem('dashboard-theme')
+    if (storedTheme === 'light' || storedTheme === 'dark') {
+      setTheme(storedTheme)
+    }
+  }, [])
+  useEffect(() => {
+    let active = true
+    async function loadCandidates() {
+      try {
+        setLoading(true)
+        const data = await getCandidates()
+        if (active) {
+          setCandidates(data)
+          setError('')
+        }
+      } catch (loadError) {
+        if (active) {
+          setError(loadError instanceof Error ? loadError.message : 'Failed to load candidates')
+        }
+      } finally {
+        if (active) {
+          setLoading(false)
+        }
+      }
+    }
+    loadCandidates()
+    return () => {
+      active = false
+    }
+  }, [])
+  const filteredCandidates = useMemo(() => {
+    return candidates.filter((candidate) => {
+      const matchesSearch = candidate.name.toLowerCase().includes(searchTerm.toLowerCase())
+      const matchesStage = selectedStage === 'All' ? true : candidate.stage === selectedStage
+      const matchesScore =
+        scoreFilter === 'All'
+          ? true
+          : scoreFilter === '4+'
+            ? candidate.overallScore >= 4
+            : scoreFilter === '3-4'
+              ? candidate.overallScore >= 3 && candidate.overallScore < 4
+              : candidate.overallScore > 0 && candidate.overallScore < 3
+      return matchesSearch && matchesStage && matchesScore
+    })
+  }, [candidates, searchTerm, selectedStage, scoreFilter])
+  const candidatePositions = useMemo(() => {
+    return Array.from(
+      new Set(
+        candidates
+          .map((candidate) => candidate.appliedPosition ?? candidate.role)
+          .filter(Boolean),
+      ),
+    ).sort((left, right) => left.localeCompare(right))
+  }, [candidates])
+  const filteredDirectoryCandidates = useMemo(() => {
+    return candidates.filter((candidate) => {
+      const appliedPosition = candidate.appliedPosition ?? candidate.role
+      const searchValue = candidateSearchTerm.toLowerCase()
+      const matchesSearch =
+        candidate.name.toLowerCase().includes(searchValue) ||
+        candidate.email.toLowerCase().includes(searchValue) ||
+        candidate.phone.toLowerCase().includes(searchValue) ||
+        appliedPosition.toLowerCase().includes(searchValue)
+      const matchesStage = candidateStageFilter === 'All' ? true : candidate.stage === candidateStageFilter
+      const matchesPosition =
+        candidatePositionFilter === 'All' ? true : appliedPosition === candidatePositionFilter
+      return matchesSearch && matchesStage && matchesPosition
+    })
+  }, [candidates, candidateSearchTerm, candidateStageFilter, candidatePositionFilter])
+  const currentViewCopy = viewCopy[activeView]
+  const activeStatValue =
+    activeView === 'Dashboard'
+      ? `${filteredCandidates.length} candidates`
+      : activeView === 'Candidates'
+        ? `${filteredDirectoryCandidates.length} profiles`
+        : activeView === 'Calendar'
+          ? new Date().toLocaleString('en-US', { month: 'long', year: 'numeric' })
+          : theme === 'dark'
+            ? 'Dark mode'
+            : 'Light mode'
+  const handleOpenCandidate = (candidate) => {
+    setSelectedCandidate(candidate)
+    setIsModalOpen(true)
+  }
+  const handleSaveCandidate = (updatedCandidate) => {
+    setCandidates((currentCandidates) =>
+      currentCandidates.map((candidate) =>
+        candidate.id === updatedCandidate.id ? updatedCandidate : candidate,
+      ),
+    )
+    setSelectedCandidate(updatedCandidate)
+    setIsModalOpen(true)
+  }
+  const handleCreateCandidate = () => {
+    const nextCandidate = {
+      id: `cand-${String(candidates.length + 1).padStart(3, '0')}`,
+      name: 'New Candidate',
+      role: 'Research and Development Officer',
+      appliedPosition: 'Research and Development Officer',
+      stage: 'Applied',
+      applicationDate: new Date().toISOString().slice(0, 10),
+      overallScore: 0,
+      referred: false,
+      assessmentAdded: false,
+      email: 'new.candidate@example.com',
+      phone: '+94 70 000 0000',
+      location: 'Colombo, Sri Lanka',
+      notes: 'New placeholder candidate for frontend-only workflow.',
+    }
+    setCandidates((currentCandidates) => [nextCandidate, ...currentCandidates])
+    handleOpenCandidate(nextCandidate)
+  }
+  const handleResetFilters = () => {
+    setSearchTerm('')
+    setSelectedStage('All')
+    setScoreFilter('All')
+  }
+  const handleResetCandidateFilters = () => {
+    setCandidateSearchTerm('')
+    setCandidateStageFilter('All')
+    setCandidatePositionFilter('All')
+  }
   return (
+    <div className="app-shell">
+      <Sidebar activeView={activeView} onSelectView={setActiveView} />
+      <main className="workspace">
+        <Header
+          title={activeView}
+          description={currentViewCopy.description}
+          statLabel={currentViewCopy.statLabel}
+          statValue={activeStatValue}
+        />
+        {activeView === 'Dashboard' ? (
+          <>
+            <div className="workspace__toolbar">
+              <FilterBar
+                searchTerm={searchTerm}
+                onSearchTermChange={setSearchTerm}
+                stageFilter={selectedStage}
+                onStageFilterChange={setSelectedStage}
+                scoreFilter={scoreFilter}
+                onScoreFilterChange={setScoreFilter}
+                stages={stageOrder}
+                onResetFilters={handleResetFilters}
+              />
+              <TopActions selectedCount={filteredCandidates.length} onCreateCandidate={handleCreateCandidate} />
+            </div>
+            {error ? <div className="banner banner--error">{error}</div> : null}
+            {loading ? <div className="banner">Loading candidates from mock data...</div> : null}
+            <KanbanBoard
+              candidates={candidates}
+              searchTerm={searchTerm}
+              selectedStage={selectedStage}
+              scoreFilter={scoreFilter}
+              onSelectCandidate={handleOpenCandidate}
+            />
+          </>
+        ) : null}
+        {activeView === 'Candidates' ? (
+          <CandidateDirectory
+            candidates={filteredDirectoryCandidates}
+            searchTerm={candidateSearchTerm}
+            onSearchTermChange={setCandidateSearchTerm}
+            stageFilter={candidateStageFilter}
+            onStageFilterChange={setCandidateStageFilter}
+            positionFilter={candidatePositionFilter}
+            onPositionFilterChange={setCandidatePositionFilter}
+            positions={candidatePositions}
+            onResetFilters={handleResetCandidateFilters}
+            onSelectCandidate={handleOpenCandidate}
+          />
+        ) : null}
+        {activeView === 'Calendar' ? <CalendarView /> : null}
+        {activeView === 'Settings' ? (
+          <SettingsPanel
+            theme={theme}
+            onToggleTheme={() => setTheme((currentTheme) => (currentTheme === 'dark' ? 'light' : 'dark'))}
+          />
+        ) : null}
+      </main>
+      <CandidateModal
+        candidate={selectedCandidate}
+        isOpen={isModalOpen}
+        onClose={() => setIsModalOpen(false)}
+        onSave={handleSaveCandidate}
+        stageOrder={stageOrder}
+      />
+    </div>
   )
 }

HR System/src/components/CalendarView.jsx ADDED Viewed

	@@ -0,0 +1,71 @@

+function CalendarView() {
+  const today = new Date()
+  const year = today.getFullYear()
+  const month = today.getMonth()
+  const monthLabel = today.toLocaleString('en-US', { month: 'long', year: 'numeric' })
+  const firstDay = new Date(year, month, 1)
+  const lastDay = new Date(year, month + 1, 0)
+  const leadingDays = firstDay.getDay()
+  const totalDays = lastDay.getDate()
+  const previousMonthTotal = new Date(year, month, 0).getDate()
+  const days = Array.from({ length: 42 }, (_, index) => {
+    const dayNumber = index - leadingDays + 1
+    const isPreviousMonth = dayNumber < 1
+    const isCurrentMonth = dayNumber >= 1 && dayNumber <= totalDays
+    const isNextMonth = dayNumber > totalDays
+    const displayDay = isPreviousMonth
+      ? previousMonthTotal + dayNumber
+      : isNextMonth
+        ? dayNumber - totalDays
+        : dayNumber
+    const date = isCurrentMonth ? new Date(year, month, dayNumber) : null
+    const isToday =
+      date &&
+      date.getDate() === today.getDate() &&
+      date.getMonth() === today.getMonth() &&
+      date.getFullYear() === today.getFullYear()
+    return {
+      displayDay,
+      isCurrentMonth,
+      isToday,
+    }
+  })
+  return (
+    <section className="calendar-view" aria-label="Monthly calendar">
+      <div className="calendar-view__header">
+        <div>
+          <p className="calendar-view__eyebrow">Calendar</p>
+          <h2>{monthLabel}</h2>
+          <p>Static month view for dates only. No day cells are clickable.</p>
+        </div>
+        <div className="calendar-view__badge">
+          <strong>{totalDays}</strong>
+          <span>days in month</span>
+        </div>
+      </div>
+      <div className="calendar-grid" role="presentation">
+        {['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'].map((label) => (
+          <div key={label} className="calendar-grid__weekday">
+            {label}
+          </div>
+        ))}
+        {days.map((day, index) => (
+          <div
+            key={`${day.displayDay}-${index}`}
+            className={`calendar-grid__day${day.isCurrentMonth ? '' : ' is-muted'}${day.isToday ? ' is-today' : ''}`}
+          >
+            <span>{day.displayDay}</span>
+          </div>
+        ))}
+      </div>
+    </section>
+  )
+}
+export default CalendarView

HR System/src/components/CandidateCard.jsx ADDED Viewed

	@@ -0,0 +1,39 @@

+function CandidateCard({ candidate, onClick }) {
+  const scoreLabel = candidate.overallScore > 0 ? `${candidate.overallScore.toFixed(1)} Overall` : 'No score yet'
+  return (
+    <button type="button" className="candidate-card" onClick={onClick}>
+      <div className="candidate-card__top">
+        <div className={`avatar avatar--${candidate.id.slice(-1)}`} aria-hidden="true">
+          {candidate.name
+            .split(' ')
+            .map((part) => part.charAt(0))
+            .slice(0, 2)
+            .join('')}
+        </div>
+        <div className="candidate-card__heading">
+          <strong>{candidate.name}</strong>
+          <span>{candidate.applicationDate}</span>
+        </div>
+      </div>
+      <div className="candidate-card__body">
+        <span className="pill pill--score">★ {scoreLabel}</span>
+        {candidate.referred ? <span className="pill pill--muted">Referred</span> : null}
+      </div>
+      <div className="candidate-card__footer">
+        {candidate.assessmentAdded ? (
+          <span className="candidate-card__action">Assessment added</span>
+        ) : (
+          <span className="candidate-card__action candidate-card__action--accent">Add assessment</span>
+        )}
+        <span className="candidate-card__chevron" aria-hidden="true">
+          ›
+        </span>
+      </div>
+    </button>
+  )
+}
+export default CandidateCard

HR System/src/components/CandidateDirectory.jsx ADDED Viewed

	@@ -0,0 +1,130 @@

+import EmptyState from './EmptyState'
+import { stageOrder } from '../data/dummyCandidates'
+function CandidateDirectory({
+  candidates,
+  searchTerm,
+  onSearchTermChange,
+  stageFilter,
+  onStageFilterChange,
+  positionFilter,
+  onPositionFilterChange,
+  positions,
+  onResetFilters,
+  onSelectCandidate,
+}) {
+  return (
+    <section className="directory" aria-label="Candidate directory">
+      <div className="directory__header">
+        <div>
+          <p className="directory__eyebrow">Candidate directory</p>
+          <h2>Applied candidates</h2>
+          <p>Search, filter, and review every applicant in one place.</p>
+        </div>
+        <div className="directory__count">
+          <strong>{candidates.length}</strong>
+          <span>matches</span>
+        </div>
+      </div>
+      <div className="directory__filters">
+        <label className="field field--search">
+          <span className="sr-only">Search candidates</span>
+          <input
+            type="search"
+            placeholder="Search candidates, email, phone, or position"
+            value={searchTerm}
+            onChange={(event) => onSearchTermChange(event.target.value)}
+          />
+        </label>
+        <label className="field">
+          <span className="field__label">Stage</span>
+          <select value={stageFilter} onChange={(event) => onStageFilterChange(event.target.value)}>
+            <option value="All">All stages</option>
+            {stageOrder.map((stage) => (
+              <option key={stage} value={stage}>
+                {stage}
+              </option>
+            ))}
+          </select>
+        </label>
+        <label className="field">
+          <span className="field__label">Applied position</span>
+          <select value={positionFilter} onChange={(event) => onPositionFilterChange(event.target.value)}>
+            <option value="All">All positions</option>
+            {positions.map((position) => (
+              <option key={position} value={position}>
+                {position}
+              </option>
+            ))}
+          </select>
+        </label>
+        <button type="button" className="ghost-button" onClick={onResetFilters}>
+          Reset filters
+        </button>
+      </div>
+      {candidates.length ? (
+        <div className="directory__list">
+          <div className="directory__list-head" aria-hidden="true">
+            <span>Candidate</span>
+            <span>Contact</span>
+            <span>Applied position</span>
+            <span>Stage</span>
+          </div>
+          {candidates.map((candidate) => {
+            const appliedPosition = candidate.appliedPosition ?? candidate.role
+            const initials = candidate.name
+              .split(' ')
+              .map((part) => part.charAt(0))
+              .slice(0, 2)
+              .join('')
+            return (
+              <button
+                key={candidate.id}
+                type="button"
+                className="candidate-row"
+                onClick={() => onSelectCandidate(candidate)}
+              >
+                <div className="candidate-row__identity">
+                  <div className={`avatar avatar--${candidate.id.slice(-1)}`} aria-hidden="true">
+                    {initials}
+                  </div>
+                  <div className="candidate-row__nameblock">
+                    <strong>{candidate.name}</strong>
+                    <span>{candidate.applicationDate}</span>
+                  </div>
+                </div>
+                <div className="candidate-row__contact">
+                  <span>{candidate.phone}</span>
+                  <span>{candidate.email}</span>
+                </div>
+                <div className="candidate-row__position">
+                  <span>{appliedPosition}</span>
+                </div>
+                <div className="candidate-row__stage">
+                  <span className="pill pill--score">{candidate.stage}</span>
+                </div>
+              </button>
+            )
+          })}
+        </div>
+      ) : (
+        <EmptyState
+          title="No matching candidates"
+          description="Try widening the search, stage, or applied position filters."
+        />
+      )}
+    </section>
+  )
+}
+export default CandidateDirectory

HR System/src/components/CandidateModal.jsx ADDED Viewed

	@@ -0,0 +1,87 @@

+function CandidateModal({ candidate, isOpen, onClose, onSave, stageOrder }) {
+  if (!isOpen || !candidate) {
+    return null
+  }
+  return (
+    <div className="modal-backdrop" role="presentation" onClick={onClose}>
+      <div
+        className="modal"
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="candidate-modal-title"
+        onClick={(event) => event.stopPropagation()}
+      >
+        <div className="modal__header">
+          <div>
+            <p className="modal__eyebrow">Candidate details</p>
+            <h2 id="candidate-modal-title">{candidate.name}</h2>
+          </div>
+          <button type="button" className="ghost-button ghost-button--inline" onClick={onClose}>
+            Close
+          </button>
+        </div>
+        <div className="modal__content">
+          <section className="modal__card">
+            <div className={`avatar avatar--${candidate.id.slice(-1)} avatar--large`} aria-hidden="true">
+              {candidate.name
+                .split(' ')
+                .map((part) => part.charAt(0))
+                .slice(0, 2)
+                .join('')}
+            </div>
+            <div className="modal__facts">
+              <p><strong>Applied Position:</strong> {candidate.appliedPosition ?? candidate.role}</p>
+              <p><strong>Email:</strong> {candidate.email}</p>
+              <p><strong>Phone:</strong> {candidate.phone}</p>
+              <p><strong>Location:</strong> {candidate.location}</p>
+            </div>
+          </section>
+          <section className="modal__card">
+            <label className="field field--stacked">
+              <span className="field__label">Stage</span>
+              <select
+                value={candidate.stage}
+                onChange={(event) => onSave({ ...candidate, stage: event.target.value })}
+              >
+                {stageOrder.map((stage) => (
+                  <option key={stage} value={stage}>
+                    {stage}
+                  </option>
+                ))}
+              </select>
+            </label>
+            <div className="modal__grid">
+              <div>
+                <span className="modal__stat-label">Applied</span>
+                <strong>{candidate.applicationDate}</strong>
+              </div>
+              <div>
+                <span className="modal__stat-label">Score</span>
+                <strong>{candidate.overallScore > 0 ? candidate.overallScore.toFixed(1) : 'N/A'}</strong>
+              </div>
+              <div>
+                <span className="modal__stat-label">Referral</span>
+                <strong>{candidate.referred ? 'Yes' : 'No'}</strong>
+              </div>
+              <div>
+                <span className="modal__stat-label">Assessment</span>
+                <strong>{candidate.assessmentAdded ? 'Added' : 'Pending'}</strong>
+              </div>
+            </div>
+          </section>
+          <section className="modal__card modal__card--full">
+            <span className="modal__stat-label">Notes</span>
+            <p>{candidate.notes}</p>
+          </section>
+        </div>
+      </div>
+    </div>
+  )
+}
+export default CandidateModal

HR System/src/components/EmptyState.jsx ADDED Viewed

	@@ -0,0 +1,10 @@

+function EmptyState({ title, description }) {
+  return (
+    <div className="empty-state">
+      <strong>{title}</strong>
+      <p>{description}</p>
+    </div>
+  )
+}
+export default EmptyState

HR System/src/components/FilterBar.jsx ADDED Viewed

	@@ -0,0 +1,43 @@

+function FilterBar({ searchTerm, onSearchTermChange, stageFilter, onStageFilterChange, scoreFilter, onScoreFilterChange, stages, onResetFilters }) {
+  return (
+    <section className="filter-bar" aria-label="Search and filters">
+      <label className="field field--search">
+        <span className="sr-only">Search candidates</span>
+        <input
+          type="search"
+          placeholder="Search candidates"
+          value={searchTerm}
+          onChange={(event) => onSearchTermChange(event.target.value)}
+        />
+      </label>
+      <label className="field">
+        <span className="field__label">Stage</span>
+        <select value={stageFilter} onChange={(event) => onStageFilterChange(event.target.value)}>
+          <option value="All">All stages</option>
+          {stages.map((stage) => (
+            <option key={stage} value={stage}>
+              {stage}
+            </option>
+          ))}
+        </select>
+      </label>
+      <label className="field">
+        <span className="field__label">Score</span>
+        <select value={scoreFilter} onChange={(event) => onScoreFilterChange(event.target.value)}>
+          <option value="All">All scores</option>
+          <option value="4+">4.0 and above</option>
+          <option value="3-4">3.0 to 3.9</option>
+          <option value="Below 3">Below 3.0</option>
+        </select>
+      </label>
+      <button type="button" className="ghost-button" onClick={onResetFilters}>
+        Reset filters
+      </button>
+    </section>
+  )
+}
+export default FilterBar

HR System/src/components/Header.jsx ADDED Viewed

	@@ -0,0 +1,26 @@

+function Header({ title, description, statLabel, statValue }) {
+  return (
+    <header className="header">
+      <div className="header__copy">
+        <p className="header__eyebrow">HR workspace</p>
+        <h1 className="header__title">{title}</h1>
+        <div className="header__meta">
+          <span>{description}</span>
+          <span className="header__dot" aria-hidden="true" />
+          <span>
+            {statLabel}: {statValue}
+          </span>
+        </div>
+      </div>
+      <div className="header__actions">
+        <div className="header__crumb">
+          <span className="header__crumb-label">Active view</span>
+          <strong>{title}</strong>
+        </div>
+      </div>
+    </header>
+  )
+}
+export default Header

HR System/src/components/KanbanBoard.jsx ADDED Viewed

	@@ -0,0 +1,46 @@

+import { stageOrder } from '../data/dummyCandidates'
+import StageColumn from './StageColumn'
+function KanbanBoard({ candidates, searchTerm, selectedStage, scoreFilter, onSelectCandidate }) {
+  const matchesScoreFilter = (candidate) => {
+    if (scoreFilter === 'All') {
+      return true
+    }
+    if (scoreFilter === '4+') {
+      return candidate.overallScore >= 4
+    }
+    if (scoreFilter === '3-4') {
+      return candidate.overallScore >= 3 && candidate.overallScore < 4
+    }
+    return candidate.overallScore > 0 && candidate.overallScore < 3
+  }
+  const filteredCandidates = candidates.filter((candidate) => {
+    const matchesSearch = candidate.name.toLowerCase().includes(searchTerm.toLowerCase())
+    const matchesStage = selectedStage === 'All' ? true : candidate.stage === selectedStage
+    return matchesSearch && matchesStage && matchesScoreFilter(candidate)
+  })
+  return (
+    <section className="board-wrap" aria-label="Candidate board">
+      <div className="kanban-board">
+        {stageOrder.map((stage) => {
+          const stageCandidates = filteredCandidates.filter((candidate) => candidate.stage === stage)
+          return (
+            <StageColumn
+              key={stage}
+              stage={{ name: stage }}
+              candidates={stageCandidates}
+              onSelectCandidate={onSelectCandidate}
+            />
+          )
+        })}
+      </div>
+    </section>
+  )
+}
+export default KanbanBoard

HR System/src/components/SettingsPanel.jsx ADDED Viewed

	@@ -0,0 +1,44 @@

+function SettingsPanel({ theme, onToggleTheme }) {
+  const isDark = theme === 'dark'
+  return (
+    <section className="settings-panel" aria-label="Settings">
+      <div className="settings-panel__header">
+        <div>
+          <p className="settings-panel__eyebrow">Settings</p>
+          <h2>Appearance</h2>
+          <p>Theme switching lives here only, as requested.</p>
+        </div>
+      </div>
+      <div className="settings-panel__card">
+        <div className="settings-panel__copy">
+          <span className="settings-panel__label">Light mode / Dark mode</span>
+          <strong>{isDark ? 'Dark mode is active' : 'Light mode is active'}</strong>
+          <p>
+            Use the toggle to switch the whole app theme. The rest of the interface does not show
+            any other theme control.
+          </p>
+        </div>
+        <button
+          type="button"
+          className={`theme-switch${isDark ? ' is-dark' : ''}`}
+          onClick={onToggleTheme}
+          aria-pressed={isDark}
+          aria-label={isDark ? 'Switch to light mode' : 'Switch to dark mode'}
+        >
+          <span className="theme-switch__track" aria-hidden="true">
+            <span className="theme-switch__thumb" />
+          </span>
+          <span className="theme-switch__labels">
+            <span>Light mode</span>
+            <span>Dark mode</span>
+          </span>
+        </button>
+      </div>
+    </section>
+  )
+}
+export default SettingsPanel

HR System/src/components/Sidebar.jsx ADDED Viewed

	@@ -0,0 +1,82 @@

+const navigationItems = [
+  {
+    label: 'Dashboard',
+    view: 'Dashboard',
+    icon: (
+      <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
+        <rect x="3" y="3" width="8" height="8" rx="2" fill="currentColor" />
+        <rect x="13" y="3" width="8" height="5" rx="2" fill="currentColor" opacity="0.85" />
+        <rect x="13" y="10" width="8" height="11" rx="2" fill="currentColor" opacity="0.72" />
+        <rect x="3" y="13" width="8" height="8" rx="2" fill="currentColor" opacity="0.9" />
+      </svg>
+    ),
+  },
+  {
+    label: 'Candidates',
+    view: 'Candidates',
+    icon: (
+      <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
+        <path
+          d="M16.5 12.5c1.93 0 3.5-1.57 3.5-3.5S18.43 5.5 16.5 5.5 13 7.07 13 9s1.57 3.5 3.5 3.5ZM7.5 11.5A3.5 3.5 0 1 0 7.5 4.5a3.5 3.5 0 0 0 0 7Zm9 2c-2.67 0-8 1.34-8 4v1.5h16V17.5c0-2.66-5.33-4-8-4Zm-9 0c-.92 0-2.15.17-3.25.5C2.1 14.4 1 15.39 1 16.75V20h4.5v-1.5c0-1.1.34-2.04.96-2.82.26-.32.56-.62.89-.88-.24-.17-.42-.3-.65-.3Z"
+          fill="currentColor"
+        />
+      </svg>
+    ),
+  },
+  {
+    label: 'Calendar',
+    view: 'Calendar',
+    icon: (
+      <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
+        <rect x="3" y="5" width="18" height="16" rx="3" fill="none" stroke="currentColor" strokeWidth="2" />
+        <path d="M7 3v4M17 3v4M3 9h18" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
+        <rect x="6" y="12" width="3" height="3" rx="0.8" fill="currentColor" />
+        <rect x="11" y="12" width="3" height="3" rx="0.8" fill="currentColor" opacity="0.72" />
+        <rect x="16" y="12" width="3" height="3" rx="0.8" fill="currentColor" opacity="0.55" />
+      </svg>
+    ),
+  },
+  {
+    label: 'Settings',
+    view: 'Settings',
+    icon: (
+      <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
+        <path
+          d="M19.14 12.94c.04-.31.06-.63.06-.94s-.02-.63-.06-.94l2.02-1.58a.5.5 0 0 0 .12-.63l-1.91-3.3a.5.5 0 0 0-.6-.22l-2.39.96a7.13 7.13 0 0 0-1.63-.94l-.36-2.53A.5.5 0 0 0 14.4 1h-3.82a.5.5 0 0 0-.49.42l-.36 2.53c-.58.23-1.13.54-1.63.94l-2.39-.96a.5.5 0 0 0-.6.22L3.2 7.45a.5.5 0 0 0 .12.63l2.02 1.58c-.04.31-.06.63-.06.94s.02.63.06.94L3.32 13.12a.5.5 0 0 0-.12.63l1.91 3.3a.5.5 0 0 0 .6.22l2.39-.96c.5.4 1.05.71 1.63.94l.36 2.53a.5.5 0 0 0 .49.42h3.82a.5.5 0 0 0 .49-.42l.36-2.53c.58-.23 1.13-.54 1.63-.94l2.39.96a.5.5 0 0 0 .6-.22l1.91-3.3a.5.5 0 0 0-.12-.63l-2.02-1.58ZM12 15.25A3.25 3.25 0 1 1 12 8.75a3.25 3.25 0 0 1 0 6.5Z"
+          fill="currentColor"
+        />
+      </svg>
+    ),
+  },
+]
+function Sidebar({ activeView, onSelectView }) {
+  return (
+    <aside className="sidebar" aria-label="Primary">
+      <div className="sidebar__brand">
+        <span className="sidebar__logo">HR</span>
+      </div>
+      <nav className="sidebar__nav">
+        {navigationItems.map((item) => (
+          <button
+            key={item.label}
+            type="button"
+            className={`sidebar__nav-item${item.view === activeView ? ' is-active' : ''}`}
+            aria-current={item.view === activeView ? 'page' : undefined}
+            aria-label={item.label}
+            data-label={item.label}
+            onClick={() => onSelectView(item.view)}
+          >
+            <span className="sidebar__nav-icon" aria-hidden="true">
+              {item.icon}
+            </span>
+            <span className="sidebar__nav-label">{item.label}</span>
+          </button>
+        ))}
+      </nav>
+    </aside>
+  )
+}
+export default Sidebar

HR System/src/components/StageColumn.jsx ADDED Viewed

	@@ -0,0 +1,35 @@

+import CandidateCard from './CandidateCard'
+import EmptyState from './EmptyState'
+function StageColumn({ stage, candidates, onSelectCandidate }) {
+  return (
+    <section className="stage-column">
+      <header className="stage-column__header">
+        <div>
+          <span className="stage-column__title">{stage.name}</span>
+          <span className="stage-column__count">{candidates.length}</span>
+        </div>
+        <span className="stage-column__detail">Detail</span>
+      </header>
+      <div className="stage-column__content">
+        {candidates.length ? (
+          candidates.map((candidate) => (
+            <CandidateCard
+              key={candidate.id}
+              candidate={candidate}
+              onClick={() => onSelectCandidate(candidate)}
+            />
+          ))
+        ) : (
+          <EmptyState
+            title={`No candidates in ${stage.name}`}
+            description="Try adjusting the search or filter options to reveal more profiles."
+          />
+        )}
+      </div>
+    </section>
+  )
+}
+export default StageColumn

HR System/src/components/TabsNav.jsx ADDED Viewed

	@@ -0,0 +1,18 @@

+function TabsNav({ tabs, activeTab, onSelectTab }) {
+  return (
+    <nav className="tabs-nav" aria-label="Candidate sections">
+      {tabs.map((tab) => (
+        <button
+          key={tab}
+          type="button"
+          className={`tabs-nav__item${tab === activeTab ? ' is-active' : ''}`}
+          onClick={() => onSelectTab(tab)}
+        >
+          {tab}
+        </button>
+      ))}
+    </nav>
+  )
+}
+export default TabsNav

HR System/src/components/TopActions.jsx ADDED Viewed

	@@ -0,0 +1,15 @@

+function TopActions({ selectedCount, onCreateCandidate }) {
+  return (
+    <div className="top-actions">
+      <div className="top-actions__summary">
+        <span className="top-actions__label">Pipeline snapshot</span>
+        <strong>{selectedCount} visible candidates</strong>
+      </div>
+      <button type="button" className="primary-button" onClick={onCreateCandidate}>
+        Add candidate
+      </button>
+    </div>
+  )
+}
+export default TopActions

HR System/src/data/dummyCandidates.js ADDED Viewed

	@@ -0,0 +1,224 @@

+export const stageOrder = ['Applied', 'Screening', 'Interview', 'Test']
+export const dashboardTabs = [
+  'Candidates',
+  'Job Info',
+  'Calendar',
+  'Score Card',
+  'Activity',
+  'Application Form',
+  'Automation',
+]
+export const dummyCandidates = [
+  {
+    id: 'cand-001',
+    name: 'Marlon Reynolds',
+    role: 'Research and Development Officer',
+    appliedPosition: 'Research and Development Officer',
+    stage: 'Applied',
+    applicationDate: '2023-10-29',
+    overallScore: 3.5,
+    referred: true,
+    assessmentAdded: false,
+    email: 'marlon.reynolds@example.com',
+    phone: '+94 77 210 1188',
+    location: 'Colombo, Sri Lanka',
+    notes: 'Strong research exposure and a clear interest in process improvement.',
+  },
+  {
+    id: 'cand-002',
+    name: 'Regina Hane',
+    role: 'Research and Development Officer',
+    appliedPosition: 'Research and Development Officer',
+    stage: 'Applied',
+    applicationDate: '2023-10-29',
+    overallScore: 2,
+    referred: false,
+    assessmentAdded: false,
+    email: 'regina.hane@example.com',
+    phone: '+94 71 110 4412',
+    location: 'Gampaha, Sri Lanka',
+    notes: 'Needs stronger case study examples, but the fundamentals are solid.',
+  },
+  {
+    id: 'cand-003',
+    name: 'Curtis Baumbach',
+    role: 'Research and Development Officer',
+    appliedPosition: 'Research and Development Officer',
+    stage: 'Applied',
+    applicationDate: '2023-10-29',
+    overallScore: 3,
+    referred: true,
+    assessmentAdded: false,
+    email: 'curtis.baumbach@example.com',
+    phone: '+94 70 314 6088',
+    location: 'Kandy, Sri Lanka',
+    notes: 'Good communication and reliable background in analytical work.',
+  },
+  {
+    id: 'cand-004',
+    name: 'Jaime Anderson',
+    role: 'Research and Development Officer',
+    appliedPosition: 'Research and Development Officer',
+    stage: 'Applied',
+    applicationDate: '2023-10-29',
+    overallScore: 0,
+    referred: false,
+    assessmentAdded: true,
+    email: 'jaime.anderson@example.com',
+    phone: '+94 76 623 3311',
+    location: 'Negombo, Sri Lanka',
+    notes: 'Assessment pending review by the hiring manager.',
+  },
+  {
+    id: 'cand-005',
+    name: 'Kristi Sipes',
+    role: 'Research and Development Officer',
+    appliedPosition: 'Research and Development Officer',
+    stage: 'Screening',
+    applicationDate: '2023-10-20',
+    overallScore: 3.5,
+    referred: false,
+    assessmentAdded: true,
+    email: 'kristi.sipes@example.com',
+    phone: '+94 72 702 3391',
+    location: 'Colombo, Sri Lanka',
+    notes: 'Screened successfully. Ready for a deeper interview discussion.',
+  },
+  {
+    id: 'cand-006',
+    name: 'Randy Dibbert',
+    role: 'Research and Development Officer',
+    appliedPosition: 'Research and Development Officer',
+    stage: 'Screening',
+    applicationDate: '2023-10-18',
+    overallScore: 3.5,
+    referred: false,
+    assessmentAdded: true,
+    email: 'randy.dibbert@example.com',
+    phone: '+94 77 324 9084',
+    location: 'Matara, Sri Lanka',
+    notes: 'Balanced profile with good technical clarity and calm communication.',
+  },
+  {
+    id: 'cand-007',
+    name: 'Jane Anderson',
+    role: 'Research and Development Officer',
+    appliedPosition: 'Research and Development Officer',
+    stage: 'Screening',
+    applicationDate: '2023-10-18',
+    overallScore: 0,
+    referred: false,
+    assessmentAdded: false,
+    email: 'jane.anderson@example.com',
+    phone: '+94 77 888 9010',
+    location: 'Kotte, Sri Lanka',
+    notes: 'Waiting for final screening notes before advancing.',
+  },
+  {
+    id: 'cand-008',
+    name: 'Shelia Doyle',
+    role: 'Research and Development Officer',
+    appliedPosition: 'Research and Development Officer',
+    stage: 'Screening',
+    applicationDate: '2023-10-13',
+    overallScore: 4.5,
+    referred: true,
+    assessmentAdded: true,
+    email: 'shelia.doyle@example.com',
+    phone: '+94 75 901 2234',
+    location: 'Galle, Sri Lanka',
+    notes: 'Strong review. Good candidate to move into interview.',
+  },
+  {
+    id: 'cand-009',
+    name: 'Cassandra Hartmann',
+    role: 'Research and Development Officer',
+    appliedPosition: 'Research and Development Officer',
+    stage: 'Screening',
+    applicationDate: '2023-10-11',
+    overallScore: 4,
+    referred: false,
+    assessmentAdded: true,
+    email: 'cassandra.hartmann@example.com',
+    phone: '+94 71 593 8844',
+    location: 'Kurunegala, Sri Lanka',
+    notes: 'Very organized candidate with clear domain thinking.',
+  },
+  {
+    id: 'cand-010',
+    name: 'Cameron Dickens',
+    role: 'Research and Development Officer',
+    appliedPosition: 'Research and Development Officer',
+    stage: 'Interview',
+    applicationDate: '2023-09-03',
+    overallScore: 4,
+    referred: false,
+    assessmentAdded: true,
+    email: 'cameron.dickens@example.com',
+    phone: '+94 77 112 4455',
+    location: 'Colombo, Sri Lanka',
+    notes: 'Interview questions were answered clearly with strong ownership.',
+  },
+  {
+    id: 'cand-011',
+    name: 'Merle Vandervort',
+    role: 'Research and Development Officer',
+    appliedPosition: 'Research and Development Officer',
+    stage: 'Interview',
+    applicationDate: '2023-09-09',
+    overallScore: 4,
+    referred: false,
+    assessmentAdded: true,
+    email: 'merle.vandervort@example.com',
+    phone: '+94 76 501 6721',
+    location: 'Nugegoda, Sri Lanka',
+    notes: 'Technically strong and comfortable with structured problem solving.',
+  },
+  {
+    id: 'cand-012',
+    name: 'Jasmine Wiza',
+    role: 'Research and Development Officer',
+    appliedPosition: 'Research and Development Officer',
+    stage: 'Interview',
+    applicationDate: '2023-09-10',
+    overallScore: 0,
+    referred: false,
+    assessmentAdded: false,
+    email: 'jasmine.wiza@example.com',
+    phone: '+94 75 302 2199',
+    location: 'Moratuwa, Sri Lanka',
+    notes: 'Interview feedback pending from the panel.',
+  },
+  {
+    id: 'cand-013',
+    name: 'Lola Kirlin',
+    role: 'Research and Development Officer',
+    appliedPosition: 'Research and Development Officer',
+    stage: 'Test',
+    applicationDate: '2023-09-03',
+    overallScore: 4.5,
+    referred: false,
+    assessmentAdded: true,
+    email: 'lola.kirlin@example.com',
+    phone: '+94 77 201 9080',
+    location: 'Battaramulla, Sri Lanka',
+    notes: 'Excellent test result. Candidate looks ready for a final decision.',
+  },
+  {
+    id: 'cand-014',
+    name: 'Virgil Larkin',
+    role: 'Research and Development Officer',
+    appliedPosition: 'Research and Development Officer',
+    stage: 'Test',
+    applicationDate: '2023-09-03',
+    overallScore: 0,
+    referred: false,
+    assessmentAdded: false,
+    email: 'virgil.larkin@example.com',
+    phone: '+94 72 801 7744',
+    location: 'Dehiwala, Sri Lanka',
+    notes: 'Test assignment has been scheduled but not yet submitted.',
+  },
+]

HR System/src/index.css CHANGED Viewed

@@ -1,111 +1,3 @@
 :root {
-  --text: #6b6375;
-  --text-h: #08060d;
-  --bg: #fff;
-  --border: #e5e4e7;
-  --code-bg: #f4f3ec;
-  --accent: #aa3bff;
-  --accent-bg: rgba(170, 59, 255, 0.1);
-  --accent-border: rgba(170, 59, 255, 0.5);
-  --social-bg: rgba(244, 243, 236, 0.5);
-  --shadow:
-    rgba(0, 0, 0, 0.1) 0 10px 15px -3px, rgba(0, 0, 0, 0.05) 0 4px 6px -2px;
-  --sans: system-ui, 'Segoe UI', Roboto, sans-serif;
-  --heading: system-ui, 'Segoe UI', Roboto, sans-serif;
-  --mono: ui-monospace, Consolas, monospace;
-  font: 18px/145% var(--sans);
-  letter-spacing: 0.18px;
-  color-scheme: light dark;
-  color: var(--text);
-  background: var(--bg);
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  @media (max-width: 1024px) {
-    font-size: 16px;
-  }
-}
-@media (prefers-color-scheme: dark) {
-  :root {
-    --text: #9ca3af;
-    --text-h: #f3f4f6;
-    --bg: #16171d;
-    --border: #2e303a;
-    --code-bg: #1f2028;
-    --accent: #c084fc;
-    --accent-bg: rgba(192, 132, 252, 0.15);
-    --accent-border: rgba(192, 132, 252, 0.5);
-    --social-bg: rgba(47, 48, 58, 0.5);
-    --shadow:
-      rgba(0, 0, 0, 0.4) 0 10px 15px -3px, rgba(0, 0, 0, 0.25) 0 4px 6px -2px;
-  }
-  #social .button-icon {
-    filter: invert(1) brightness(2);
-  }
-}
-body {
-  margin: 0;
-}
-#root {
-  width: 1126px;
-  max-width: 100%;
-  margin: 0 auto;
-  text-align: center;
-  border-inline: 1px solid var(--border);
-  min-height: 100svh;
-  display: flex;
-  flex-direction: column;
-  box-sizing: border-box;
-}
-h1,
-h2 {
-  font-family: var(--heading);
-  font-weight: 500;
-  color: var(--text-h);
-}
-h1 {
-  font-size: 56px;
-  letter-spacing: -1.68px;
-  margin: 32px 0;
-  @media (max-width: 1024px) {
-    font-size: 36px;
-    margin: 20px 0;
-  }
-}
-h2 {
-  font-size: 24px;
-  line-height: 118%;
-  letter-spacing: -0.24px;
-  margin: 0 0 8px;
-  @media (max-width: 1024px) {
-    font-size: 20px;
-  }
-}
-p {
-  margin: 0;
-}
-code,
-.counter {
-  font-family: var(--mono);
-  display: inline-flex;
-  border-radius: 4px;
-  color: var(--text-h);
-}
-code {
-  font-size: 15px;
-  line-height: 135%;
-  padding: 4px 8px;
-  background: var(--code-bg);
 }

 :root {
+  color-scheme: light;
 }

HR System/src/main.jsx CHANGED Viewed

@@ -1,6 +1,7 @@
 import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
 import './index.css'
 import App from './App.jsx'
 createRoot(document.getElementById('root')).render(

 import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
 import './index.css'
+import './styles/global.css'
 import App from './App.jsx'
 createRoot(document.getElementById('root')).render(

HR System/src/services/candidateApi.js ADDED Viewed

	@@ -0,0 +1,44 @@

+import { dummyCandidates } from '../data/dummyCandidates'
+const clone = (value) => JSON.parse(JSON.stringify(value))
+const wait = (time = 180) =>
+  new Promise((resolve) => {
+    window.setTimeout(resolve, time)
+  })
+export async function getCandidates() {
+  await wait()
+  return clone(dummyCandidates)
+}
+export async function getCandidateById(id) {
+  await wait(120)
+  return clone(dummyCandidates.find((candidate) => candidate.id === id) || null)
+}
+export async function createCandidate(candidate) {
+  await wait(120)
+  return {
+    ...clone(candidate),
+    id: crypto.randomUUID(),
+  }
+}
+export async function updateCandidate(id, updates) {
+  await wait(120)
+  return {
+    id,
+    ...clone(updates),
+  }
+}
+export async function deleteCandidate(id) {
+  await wait(120)
+  return { id, deleted: true }
+}
+export async function updateCandidateStage(id, stage) {
+  await wait(120)
+  return { id, stage }
+}

HR System/src/styles/global.css ADDED Viewed

	@@ -0,0 +1,1229 @@

+:root {
+  --bg: #f1f5f9;
+  --bg-soft: rgba(255, 255, 255, 0.7);
+  --panel: #ffffff;
+  --panel-strong: #ffffff;
+  --panel-muted: #f8fafc;
+  --text: #334155;
+  --text-strong: #0f172a;
+  --border: rgba(148, 163, 184, 0.24);
+  --shadow: 0 18px 40px rgba(15, 23, 42, 0.1);
+  --shadow-soft: 0 10px 24px rgba(15, 23, 42, 0.08);
+  --accent: #1f8a70;
+  --accent-strong: #16624f;
+  --accent-soft: rgba(31, 138, 112, 0.12);
+  --accent-alt: #2956f6;
+  --success: #2f9e5c;
+  --warning: #e49b11;
+  --danger: #dc4c64;
+  --radius-xl: 28px;
+  --radius-lg: 20px;
+  --radius-md: 14px;
+  --radius-sm: 10px;
+  --font-body: 'Segoe UI', Inter, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
+  --font-head: 'Segoe UI', Inter, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
+}
+html[data-theme='dark'] {
+  --bg: #0f131b;
+  --bg-soft: rgba(15, 19, 27, 0.74);
+  --panel: #171d28;
+  --panel-strong: #1d2432;
+  --panel-muted: #111723;
+  --text: #aeb8ca;
+  --text-strong: #f4f7fb;
+  --border: rgba(148, 163, 184, 0.16);
+  --shadow: 0 22px 44px rgba(0, 0, 0, 0.38);
+  --shadow-soft: 0 14px 28px rgba(0, 0, 0, 0.28);
+  --accent: #57c7a6;
+  --accent-strong: #2aa584;
+  --accent-soft: rgba(87, 199, 166, 0.14);
+  --accent-alt: #7b93ff;
+  --success: #57c7a6;
+  --warning: #f1b84b;
+  --danger: #ff788f;
+}
+* {
+  box-sizing: border-box;
+}
+html {
+  min-height: 100%;
+  background:
+    radial-gradient(circle at top left, rgba(31, 138, 112, 0.1), transparent 28%),
+    radial-gradient(circle at top right, rgba(41, 86, 246, 0.09), transparent 24%),
+    linear-gradient(180deg, var(--bg) 0%, var(--bg) 100%);
+  color: var(--text);
+  font-family: var(--font-body);
+  font-size: 16px;
+  line-height: 1.5;
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+body {
+  margin: 0;
+  min-height: 100vh;
+  background: transparent;
+}
+button,
+input,
+select {
+  font: inherit;
+}
+button {
+  cursor: pointer;
+}
+img {
+  max-width: 100%;
+  display: block;
+}
+#root {
+  min-height: 100vh;
+}
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+.app-shell {
+  min-height: 100vh;
+  display: grid;
+  grid-template-columns: 92px minmax(0, 1fr);
+  gap: 18px;
+  padding: 14px;
+}
+.sidebar {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+  gap: 22px;
+  padding: 18px 10px;
+  border-radius: 28px;
+  background: var(--panel);
+  border: 1px solid var(--border);
+  box-shadow: var(--shadow-soft);
+  position: sticky;
+  top: 14px;
+  height: calc(100vh - 28px);
+}
+.sidebar__brand {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+}
+.sidebar__logo {
+  width: 56px;
+  height: 56px;
+  border-radius: 18px;
+  display: grid;
+  place-items: center;
+  background: linear-gradient(135deg, rgba(31, 138, 112, 0.16), rgba(41, 86, 246, 0.18));
+  color: var(--text-strong);
+  font-weight: 800;
+  letter-spacing: 0.08em;
+  text-transform: lowercase;
+  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
+}
+.sidebar__nav,
+.sidebar__footer {
+  width: 100%;
+  display: grid;
+  gap: 10px;
+}
+.sidebar__nav-item {
+  width: 100%;
+  min-height: 54px;
+  padding: 0;
+  border: 0;
+  border-radius: 18px;
+  background: transparent;
+  color: var(--text);
+  display: grid;
+  justify-items: center;
+  align-content: center;
+  gap: 6px;
+  transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
+}
+.sidebar__nav-item:hover {
+  background: var(--accent-soft);
+  color: var(--text-strong);
+  transform: translateY(-1px);
+}
+.sidebar__nav-item.is-active {
+  background: linear-gradient(135deg, rgba(31, 138, 112, 0.18), rgba(41, 86, 246, 0.16));
+  color: var(--text-strong);
+}
+.sidebar__nav-item--ghost {
+  background: var(--panel-muted);
+}
+.sidebar__nav-icon {
+  width: 18px;
+  height: 18px;
+  border-radius: 6px;
+  background: currentColor;
+  opacity: 0.7;
+}
+.sidebar__nav-label {
+  font-size: 0.7rem;
+  font-weight: 700;
+}
+.workspace {
+  min-width: 0;
+  background: var(--bg-soft);
+  border: 1px solid var(--border);
+  border-radius: 32px;
+  padding: 18px;
+  box-shadow: var(--shadow);
+  backdrop-filter: blur(14px);
+}
+.header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 18px;
+  padding: 10px 10px 18px;
+}
+.header__copy {
+  min-width: 0;
+}
+.header__eyebrow,
+.top-actions__label,
+.modal__eyebrow {
+  margin: 0 0 8px;
+  text-transform: uppercase;
+  letter-spacing: 0.16em;
+  font-size: 0.72rem;
+  font-weight: 700;
+  color: var(--accent-strong);
+}
+.header__title {
+  margin: 0;
+  color: var(--text-strong);
+  font-family: var(--font-head);
+  font-size: clamp(1.9rem, 3vw, 3rem);
+  line-height: 1.05;
+  letter-spacing: -0.04em;
+}
+.header__meta {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 10px;
+  margin-top: 12px;
+  color: var(--text);
+}
+.header__dot {
+  width: 4px;
+  height: 4px;
+  border-radius: 50%;
+  background: currentColor;
+  opacity: 0.5;
+}
+.header__actions {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+}
+.header__crumb {
+  padding: 10px 14px;
+  border-radius: 18px;
+  background: var(--panel);
+  border: 1px solid var(--border);
+  display: grid;
+  gap: 2px;
+  box-shadow: var(--shadow-soft);
+}
+.header__crumb-label {
+  font-size: 0.72rem;
+  color: var(--text);
+}
+.tabs-nav {
+  display: flex;
+  gap: 8px;
+  overflow-x: auto;
+  padding: 0 10px 10px;
+  scrollbar-width: none;
+}
+.tabs-nav::-webkit-scrollbar,
+.board-wrap::-webkit-scrollbar {
+  display: none;
+}
+.tabs-nav__item {
+  border: 0;
+  background: transparent;
+  color: var(--text);
+  padding: 12px 16px;
+  border-radius: 999px;
+  font-weight: 700;
+  white-space: nowrap;
+  transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
+}
+.tabs-nav__item:hover,
+.tabs-nav__item.is-active {
+  background: var(--panel);
+  color: var(--text-strong);
+  box-shadow: var(--shadow-soft);
+}
+.workspace__toolbar {
+  display: flex;
+  gap: 14px;
+  align-items: stretch;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  padding: 10px;
+}
+.filter-bar {
+  flex: 1 1 640px;
+  display: grid;
+  grid-template-columns: minmax(220px, 2fr) repeat(2, minmax(160px, 1fr)) auto;
+  gap: 12px;
+  align-items: end;
+}
+.field {
+  display: grid;
+  gap: 6px;
+}
+.field--stacked {
+  gap: 10px;
+}
+.field__label {
+  font-size: 0.75rem;
+  font-weight: 700;
+  color: var(--text);
+}
+.field input,
+.field select {
+  width: 100%;
+  border: 1px solid var(--border);
+  border-radius: 16px;
+  background: var(--panel);
+  color: var(--text-strong);
+  padding: 14px 16px;
+  outline: none;
+  box-shadow: var(--shadow-soft);
+  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
+}
+.field input:focus,
+.field select:focus {
+  border-color: rgba(31, 138, 112, 0.48);
+  box-shadow: 0 0 0 4px rgba(31, 138, 112, 0.14);
+}
+.field--search input {
+  padding-left: 18px;
+}
+.top-actions {
+  min-width: 240px;
+  flex: 0 0 auto;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 14px;
+  padding: 14px 18px;
+  border-radius: 22px;
+  border: 1px solid var(--border);
+  background: var(--panel);
+  box-shadow: var(--shadow-soft);
+}
+.top-actions__summary {
+  display: grid;
+  gap: 4px;
+}
+.chip,
+.pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  border-radius: 999px;
+  padding: 6px 10px;
+  font-size: 0.78rem;
+  font-weight: 700;
+  width: fit-content;
+}
+.chip--success {
+  background: rgba(47, 158, 92, 0.14);
+  color: var(--success);
+}
+.pill--score {
+  background: rgba(41, 86, 246, 0.1);
+  color: var(--accent-alt);
+}
+.pill--muted {
+  background: var(--panel-muted);
+  color: var(--text-strong);
+}
+.primary-button,
+.ghost-button,
+.icon-button {
+  border: 0;
+  border-radius: 16px;
+  font-weight: 700;
+  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
+}
+.primary-button {
+  padding: 14px 18px;
+  color: #ffffff;
+  background: linear-gradient(135deg, var(--accent), var(--accent-alt));
+  box-shadow: 0 14px 30px rgba(31, 138, 112, 0.28);
+}
+.primary-button:hover,
+.ghost-button:hover,
+.icon-button:hover {
+  transform: translateY(-1px);
+}
+.ghost-button,
+.icon-button {
+  padding: 13px 16px;
+  background: var(--panel);
+  color: var(--text-strong);
+  box-shadow: var(--shadow-soft);
+  border: 1px solid var(--border);
+}
+.ghost-button--inline {
+  padding-inline: 14px;
+}
+.banner {
+  margin: 0 10px 16px;
+  padding: 14px 16px;
+  border-radius: 18px;
+  background: var(--panel);
+  border: 1px solid var(--border);
+  box-shadow: var(--shadow-soft);
+}
+.banner--error {
+  border-color: rgba(220, 76, 100, 0.35);
+  color: var(--danger);
+}
+.board-wrap {
+  overflow-x: auto;
+  padding: 8px 6px 4px;
+}
+.kanban-board {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(240px, 1fr));
+  gap: 14px;
+  min-width: max-content;
+}
+.stage-column {
+  min-width: 0;
+  border-radius: 24px;
+  padding: 12px;
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0.18));
+  border: 1px solid var(--border);
+  box-shadow: var(--shadow-soft);
+  backdrop-filter: blur(12px);
+}
+html[data-theme='dark'] .stage-column {
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.02));
+}
+.stage-column__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  padding: 4px 4px 12px;
+}
+.stage-column__title {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  font-weight: 800;
+  color: var(--text-strong);
+}
+.stage-column__title::before {
+  content: '';
+  width: 12px;
+  height: 12px;
+  border-radius: 999px;
+  background: linear-gradient(135deg, var(--accent), var(--accent-alt));
+  box-shadow: 0 0 0 4px rgba(31, 138, 112, 0.12);
+}
+.stage-column__count,
+.stage-column__detail {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 5px 10px;
+  border-radius: 999px;
+  background: var(--panel);
+  border: 1px solid var(--border);
+  color: var(--text-strong);
+  font-size: 0.78rem;
+  font-weight: 700;
+}
+.stage-column__content {
+  display: grid;
+  gap: 12px;
+}
+.candidate-card,
+.empty-state {
+  width: 100%;
+  text-align: left;
+  border-radius: 20px;
+  border: 1px solid var(--border);
+  background: var(--panel-strong);
+  color: var(--text);
+  box-shadow: var(--shadow-soft);
+}
+.candidate-card {
+  padding: 14px;
+  display: grid;
+  gap: 12px;
+  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
+}
+.candidate-card:hover {
+  transform: translateY(-2px);
+  box-shadow: var(--shadow);
+  border-color: rgba(31, 138, 112, 0.26);
+}
+.candidate-card__top {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+.avatar {
+  width: 44px;
+  height: 44px;
+  border-radius: 16px;
+  display: grid;
+  place-items: center;
+  color: #ffffff;
+  font-weight: 800;
+  background: linear-gradient(135deg, var(--accent), var(--accent-alt));
+  flex: 0 0 auto;
+}
+.avatar--large {
+  width: 72px;
+  height: 72px;
+  border-radius: 24px;
+  font-size: 1.1rem;
+}
+.candidate-card__heading {
+  display: grid;
+  gap: 3px;
+  min-width: 0;
+}
+.candidate-card__heading strong,
+.modal h2,
+.modal__card strong,
+.top-actions strong {
+  color: var(--text-strong);
+}
+.candidate-card__heading span,
+.candidate-card__action,
+.modal__stat-label,
+.modal__facts p,
+.header__meta,
+.top-actions__summary,
+.empty-state p {
+  color: var(--text);
+}
+.candidate-card__body,
+.candidate-card__footer,
+.modal__grid {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+}
+.candidate-card__footer {
+  padding-top: 8px;
+  border-top: 1px solid var(--border);
+}
+.candidate-card__action--accent {
+  color: var(--accent-strong);
+  font-weight: 700;
+}
+.candidate-card__chevron {
+  color: var(--accent-strong);
+  font-size: 1.4rem;
+  line-height: 1;
+}
+.empty-state {
+  padding: 20px;
+  display: grid;
+  gap: 8px;
+  background: var(--panel-muted);
+}
+.modal-backdrop {
+  position: fixed;
+  inset: 0;
+  background: rgba(15, 23, 42, 0.46);
+  backdrop-filter: blur(8px);
+  display: grid;
+  place-items: center;
+  padding: 20px;
+  z-index: 40;
+}
+.modal {
+  width: min(960px, 100%);
+  max-height: min(88vh, 900px);
+  overflow: auto;
+  border-radius: 30px;
+  background: var(--panel);
+  border: 1px solid var(--border);
+  box-shadow: var(--shadow);
+  padding: 22px;
+}
+.modal__header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 16px;
+  margin-bottom: 18px;
+}
+.modal__header h2 {
+  margin: 0;
+  font-size: clamp(1.5rem, 2vw, 2rem);
+}
+.modal__content {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 14px;
+}
+.modal__card {
+  border-radius: 22px;
+  padding: 18px;
+  background: var(--panel-muted);
+  border: 1px solid var(--border);
+  display: grid;
+  gap: 14px;
+}
+.modal__card--full {
+  grid-column: 1 / -1;
+}
+.modal__facts {
+  display: grid;
+  gap: 8px;
+}
+.modal__facts p,
+.modal__card p {
+  margin: 0;
+}
+.modal__grid {
+  flex-wrap: wrap;
+}
+.modal__grid > div {
+  flex: 1 1 160px;
+  display: grid;
+  gap: 4px;
+  padding: 14px;
+  border-radius: 18px;
+  background: var(--panel);
+  border: 1px solid var(--border);
+}
+.modal__stat-label {
+  font-size: 0.78rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+}
+@media (max-width: 1180px) {
+  .app-shell {
+    grid-template-columns: 76px minmax(0, 1fr);
+  }
+  .filter-bar {
+    grid-template-columns: minmax(220px, 1fr) repeat(2, minmax(150px, 1fr));
+  }
+  .top-actions {
+    flex: 1 1 100%;
+    justify-content: space-between;
+  }
+}
+@media (max-width: 940px) {
+  .app-shell {
+    grid-template-columns: 1fr;
+  }
+  .sidebar {
+    position: static;
+    height: auto;
+    width: 100%;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    overflow-x: auto;
+  }
+  .sidebar__nav,
+  .sidebar__footer {
+    width: auto;
+    display: flex;
+    gap: 8px;
+  }
+  .sidebar__nav-item {
+    min-width: 84px;
+    padding-inline: 12px;
+  }
+  .workspace {
+    border-radius: 28px;
+  }
+  .header,
+  .workspace__toolbar {
+    flex-direction: column;
+  }
+  .header__actions {
+    width: 100%;
+    justify-content: flex-start;
+  }
+  .filter-bar {
+    flex: 1 1 100%;
+    grid-template-columns: 1fr;
+  }
+  .modal__content {
+    grid-template-columns: 1fr;
+  }
+}
+@media (max-width: 640px) {
+  .app-shell {
+    padding: 10px;
+    gap: 10px;
+  }
+  .workspace {
+    padding: 12px;
+  }
+  .header {
+    padding-inline: 2px;
+  }
+  .tabs-nav,
+  .workspace__toolbar,
+  .kanban-board {
+    padding-inline: 0;
+  }
+  .kanban-board {
+    grid-template-columns: repeat(4, minmax(220px, 1fr));
+  }
+  .modal {
+    padding: 16px;
+    border-radius: 22px;
+  }
+}
+.sidebar {
+  width: 100%;
+}
+.sidebar__brand {
+  padding-top: 2px;
+}
+.sidebar__logo {
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+}
+.sidebar__nav-item {
+  position: relative;
+  padding: 0;
+  min-height: 58px;
+}
+.sidebar__nav-icon {
+  width: 22px;
+  height: 22px;
+  display: grid;
+  place-items: center;
+  color: currentColor;
+}
+.sidebar__nav-icon svg {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+.sidebar__nav-label {
+  display: none;
+}
+.sidebar__nav-item::after {
+  content: attr(data-label);
+  position: absolute;
+  left: calc(100% + 12px);
+  top: 50%;
+  transform: translateY(-50%) translateX(-4px);
+  opacity: 0;
+  pointer-events: none;
+  padding: 8px 10px;
+  border-radius: 12px;
+  background: var(--text-strong);
+  color: var(--panel);
+  font-size: 0.78rem;
+  font-weight: 700;
+  white-space: nowrap;
+  box-shadow: var(--shadow-soft);
+  transition: opacity 0.16s ease, transform 0.16s ease;
+  z-index: 2;
+}
+.sidebar__nav-item:hover::after,
+.sidebar__nav-item:focus-visible::after {
+  opacity: 1;
+  transform: translateY(-50%) translateX(0);
+}
+.header__actions {
+  align-items: flex-start;
+}
+.header__crumb {
+  min-width: 160px;
+}
+.directory,
+.calendar-view,
+.settings-panel {
+  display: grid;
+  gap: 18px;
+  padding: 10px 10px 4px;
+}
+.directory__header,
+.calendar-view__header,
+.settings-panel__header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 16px;
+}
+.directory__eyebrow,
+.calendar-view__eyebrow,
+.settings-panel__eyebrow {
+  margin: 0 0 8px;
+  text-transform: uppercase;
+  letter-spacing: 0.16em;
+  font-size: 0.72rem;
+  font-weight: 700;
+  color: var(--accent-strong);
+}
+.directory h2,
+.calendar-view h2,
+.settings-panel h2 {
+  margin: 0;
+  color: var(--text-strong);
+  font-size: clamp(1.5rem, 2vw, 2.2rem);
+  letter-spacing: -0.03em;
+}
+.directory__header p,
+.calendar-view__header p,
+.settings-panel__header p,
+.settings-panel__copy p {
+  margin: 8px 0 0;
+  color: var(--text);
+}
+.directory__count,
+.calendar-view__badge {
+  min-width: 112px;
+  padding: 14px 16px;
+  border-radius: 20px;
+  background: var(--panel);
+  border: 1px solid var(--border);
+  box-shadow: var(--shadow-soft);
+  display: grid;
+  gap: 2px;
+  justify-items: center;
+}
+.directory__count strong,
+.calendar-view__badge strong {
+  color: var(--text-strong);
+  font-size: 1.5rem;
+  line-height: 1;
+}
+.directory__count span,
+.calendar-view__badge span {
+  color: var(--text);
+  font-size: 0.78rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+}
+.directory__filters {
+  display: grid;
+  grid-template-columns: minmax(240px, 2fr) repeat(2, minmax(160px, 1fr)) auto;
+  gap: 12px;
+  align-items: end;
+}
+.directory__list {
+  display: grid;
+  gap: 10px;
+}
+.directory__list-head,
+.candidate-row {
+  display: grid;
+  grid-template-columns: minmax(220px, 1.4fr) minmax(220px, 1.1fr) minmax(180px, 1fr) minmax(120px, 0.5fr);
+  gap: 16px;
+  align-items: center;
+}
+.directory__list-head {
+  padding: 0 14px;
+  color: var(--text);
+  font-size: 0.76rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+}
+.candidate-row {
+  width: 100%;
+  border: 1px solid var(--border);
+  border-radius: 22px;
+  background: var(--panel);
+  box-shadow: var(--shadow-soft);
+  padding: 14px;
+  text-align: left;
+  color: var(--text);
+  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
+}
+.candidate-row:hover {
+  transform: translateY(-2px);
+  box-shadow: var(--shadow);
+  border-color: rgba(31, 138, 112, 0.26);
+}
+.candidate-row__identity {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  min-width: 0;
+}
+.candidate-row__nameblock {
+  display: grid;
+  gap: 3px;
+  min-width: 0;
+}
+.candidate-row__nameblock strong {
+  color: var(--text-strong);
+}
+.candidate-row__nameblock span,
+.candidate-row__contact,
+.candidate-row__position {
+  color: var(--text);
+  font-size: 0.92rem;
+}
+.candidate-row__contact,
+.candidate-row__position,
+.candidate-row__stage {
+  display: grid;
+  gap: 4px;
+}
+.candidate-row__contact span {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.candidate-row__stage {
+  justify-items: start;
+}
+.calendar-grid {
+  display: grid;
+  grid-template-columns: repeat(7, minmax(0, 1fr));
+  gap: 10px;
+  padding: 14px;
+  border-radius: 28px;
+  border: 1px solid var(--border);
+  background: var(--panel-soft, var(--panel));
+  box-shadow: var(--shadow-soft);
+}
+.calendar-grid__weekday {
+  padding: 10px 8px;
+  text-align: center;
+  color: var(--text);
+  font-size: 0.76rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+}
+.calendar-grid__day {
+  min-height: 88px;
+  padding: 12px;
+  border-radius: 20px;
+  border: 1px solid var(--border);
+  background: var(--panel);
+  color: var(--text-strong);
+  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02);
+  display: flex;
+  align-items: flex-start;
+  justify-content: flex-start;
+}
+.calendar-grid__day.is-muted {
+  color: rgba(148, 163, 184, 0.72);
+  background: var(--panel-muted);
+}
+.calendar-grid__day.is-today {
+  border-color: rgba(31, 138, 112, 0.42);
+  box-shadow: 0 0 0 4px rgba(31, 138, 112, 0.1);
+}
+.settings-panel__card {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 20px;
+  padding: 22px;
+  border-radius: 28px;
+  border: 1px solid var(--border);
+  background: linear-gradient(135deg, rgba(31, 138, 112, 0.1), rgba(41, 86, 246, 0.08));
+  box-shadow: var(--shadow-soft);
+}
+.settings-panel__copy {
+  max-width: 640px;
+  display: grid;
+  gap: 8px;
+}
+.settings-panel__label {
+  display: inline-flex;
+  align-items: center;
+  width: fit-content;
+  border-radius: 999px;
+  padding: 6px 10px;
+  background: var(--panel);
+  color: var(--accent-strong);
+  font-size: 0.76rem;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+.theme-switch {
+  min-width: 220px;
+  border: 0;
+  border-radius: 24px;
+  padding: 16px;
+  background: var(--panel);
+  box-shadow: var(--shadow-soft);
+  display: grid;
+  gap: 14px;
+  justify-items: center;
+}
+.theme-switch__track {
+  width: 100%;
+  height: 56px;
+  padding: 6px;
+  border-radius: 999px;
+  background: linear-gradient(135deg, rgba(31, 138, 112, 0.2), rgba(41, 86, 246, 0.18));
+  position: relative;
+}
+.theme-switch__thumb {
+  position: absolute;
+  top: 6px;
+  left: 6px;
+  width: 44px;
+  height: 44px;
+  border-radius: 50%;
+  background: var(--panel);
+  box-shadow: 0 10px 20px rgba(15, 23, 42, 0.16);
+  transition: transform 0.2s ease;
+}
+.theme-switch.is-dark .theme-switch__thumb {
+  transform: translateX(100%);
+}
+.theme-switch__labels {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  color: var(--text-strong);
+  font-weight: 700;
+}
+.theme-switch__labels span:last-child {
+  color: var(--text);
+}
+html[data-theme='dark'] .calendar-grid__day.is-muted {
+  color: rgba(148, 163, 184, 0.58);
+}
+@media (max-width: 1180px) {
+  .directory__filters {
+    grid-template-columns: minmax(220px, 1fr) repeat(2, minmax(150px, 1fr));
+  }
+  .directory__list-head,
+  .candidate-row {
+    grid-template-columns: minmax(200px, 1.3fr) minmax(200px, 1fr) minmax(160px, 1fr) minmax(110px, 0.5fr);
+  }
+}
+@media (max-width: 940px) {
+  .sidebar__nav-item::after {
+    display: none;
+  }
+  .directory__header,
+  .calendar-view__header,
+  .settings-panel__header,
+  .settings-panel__card {
+    flex-direction: column;
+  }
+  .directory__filters,
+  .directory__list-head,
+  .candidate-row {
+    grid-template-columns: 1fr;
+  }
+  .directory__list-head {
+    display: none;
+  }
+  .calendar-grid {
+    gap: 8px;
+  }
+  .calendar-grid__day {
+    min-height: 72px;
+  }
+}
+@media (max-width: 640px) {
+  .settings-panel__card {
+    padding: 18px;
+  }
+  .theme-switch {
+    width: 100%;
+    min-width: 0;
+  }
+}