/* ============================================================ Candidate Onboarding & Compliance — shadcn/ui design system, hand-ported ------------------------------------------------------------ shadcn/ui is React + Radix + Tailwind and cannot be dropped into a vanilla, build-free app. What is portable is the system underneath it, and that is what this file is: shadcn's token contract (its HSL channel triplets, consumed as hsl(var(--token)), and its --radius scale) plus its component recipes written out as plain classes — Button, Input, Select, Textarea, Checkbox, Badge, Dialog, Table, Card, Sidebar, Sonner-style toasts. Because the tokens carry channels rather than colours, alpha variants work the way they do in Tailwind: hsl(var(--primary) / .1). Dark mode is a `dark` class on , as shadcn does it. The palette is the app's own — neutral greys with the logo's blue #2c52f7 as --primary — rather than shadcn's stock zinc/sky. ============================================================ */ /* ---------- light theme ---------- */ :root{ --background: 220 13% 95%; --foreground: 224 22% 12%; --card: 0 0% 100%; --card-foreground: 224 22% 12%; --popover: 0 0% 100%; --popover-foreground: 224 22% 12%; --primary: 229 93% 57%; /* #2c52f7, the logo's blue */ --primary-foreground: 0 0% 100%; --secondary: 220 13% 91%; --secondary-foreground: 224 18% 20%; --muted: 220 13% 91%; --muted-foreground: 220 9% 43%; --accent: 220 13% 89%; --accent-foreground: 224 18% 18%; --destructive: 0 62% 46%; --destructive-foreground: 0 0% 100%; --success: 152 44% 32%; --success-foreground: 0 0% 100%; --warning: 35 78% 33%; --border: 220 13% 85%; --input: 220 13% 85%; --ring: 229 93% 57%; --radius: 0.5rem; /* the rail gets its own slice of the contract, as shadcn's sidebar does */ --sidebar: 0 0% 100%; --sidebar-foreground: 224 22% 12%; --sidebar-border: 220 13% 88%; --sidebar-accent: 220 13% 93%; --sidebar-accent-foreground: 224 18% 18%; /* the app's own two: the logo's fills, which have to invert between themes */ --logo-ink: 224 45% 13%; /* #0d1632 */ --logo-blue: 229 93% 57%; } /* ---------- dark theme ---------- */ .dark{ --background: 240 6% 10%; --foreground: 210 17% 93%; --card: 240 5% 13%; --card-foreground: 210 17% 93%; --popover: 240 5% 15%; --popover-foreground: 210 17% 93%; --primary: 229 93% 60%; --primary-foreground: 0 0% 100%; --secondary: 240 4% 19%; --secondary-foreground: 210 17% 93%; --muted: 240 4% 19%; --muted-foreground: 220 9% 64%; --accent: 240 4% 23%; --accent-foreground: 210 17% 96%; --destructive: 0 55% 52%; --destructive-foreground: 0 0% 100%; --success: 152 40% 42%; --success-foreground: 0 0% 100%; --warning: 38 70% 58%; --border: 240 4% 24%; --input: 240 4% 26%; --ring: 229 93% 70%; --sidebar: 240 5% 12%; --sidebar-foreground: 210 17% 93%; --sidebar-border: 240 4% 20%; --sidebar-accent: 240 4% 18%; --sidebar-accent-foreground: 210 17% 96%; --logo-ink: 210 20% 96%; --logo-blue: 229 100% 71%; /* lifted: the brand blue is 2.4:1 on this base */ } :root{ color-scheme:light } .dark{ color-scheme:dark } /* ---------- base ---------- */ *{box-sizing:border-box;border-color:hsl(var(--border))} html{scroll-behavior:smooth;scrollbar-gutter:stable} body{ margin:0; background:hsl(var(--background)); color:hsl(var(--foreground)); font-size:14px;line-height:1.5; font-family:"Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,"Segoe UI Emoji",Roboto,Arial,sans-serif; -webkit-font-smoothing:antialiased; min-height:100vh; } ::selection{background:hsl(var(--primary) / .22)} a{color:hsl(var(--primary));text-underline-offset:3px} a:hover{color:hsl(var(--primary) / .8)} .hidden{display:none!important} .muted{color:hsl(var(--muted-foreground))} h1,h2,h3{letter-spacing:-.02em} /* focus: shadcn's ring, on everything focusable */ :focus-visible{outline:2px solid hsl(var(--ring));outline-offset:2px} /* ============================================================ Button ============================================================ */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:.5rem; white-space:nowrap;border-radius:var(--radius); font-size:14px;font-weight:500;line-height:1; height:2.25rem;padding:0 1rem;border:1px solid transparent; cursor:pointer;user-select:none; transition:background-color .15s,border-color .15s,color .15s,opacity .15s; } .btn:disabled{opacity:.5;pointer-events:none} .btn .ni{width:1rem;height:1rem;flex:0 0 1rem} .btn-sm{height:2rem;padding:0 .75rem;font-size:13px;border-radius:calc(var(--radius) - 2px)} .btn-lg{height:2.5rem;padding:0 2rem} .btn-primary{background:hsl(var(--primary));color:hsl(var(--primary-foreground)); box-shadow:0 1px 2px 0 hsl(224 22% 12% / .05)} .btn-primary:hover{background:hsl(var(--primary) / .9)} .btn-secondary{background:hsl(var(--secondary));color:hsl(var(--secondary-foreground))} .btn-secondary:hover{background:hsl(var(--secondary) / .8)} .btn-outline{background:hsl(var(--background));color:hsl(var(--foreground));border-color:hsl(var(--input))} .btn-outline:hover{background:hsl(var(--accent));color:hsl(var(--accent-foreground))} .btn-ghost{background:transparent;color:hsl(var(--foreground))} .btn-ghost:hover{background:hsl(var(--accent));color:hsl(var(--accent-foreground))} .btn-destructive{background:hsl(var(--destructive));color:hsl(var(--destructive-foreground))} .btn-destructive:hover{background:hsl(var(--destructive) / .9)} .btn-success{background:hsl(var(--success));color:hsl(var(--success-foreground))} .btn-success:hover{background:hsl(var(--success) / .9)} a.btn{text-decoration:none} /* ============================================================ Input · Select · Textarea · Checkbox ============================================================ */ .input,.select,.textarea{ display:block;width:100%; height:2.25rem;padding:0 .75rem; font:inherit;font-size:14px;color:hsl(var(--foreground)); background:hsl(var(--background)); border:1px solid hsl(var(--input));border-radius:var(--radius); box-shadow:0 1px 2px 0 hsl(224 22% 12% / .05); transition:border-color .15s,box-shadow .15s; } .textarea{height:auto;min-height:5rem;padding:.5rem .75rem;line-height:1.5;resize:vertical} .input:focus-visible,.select:focus-visible,.textarea:focus-visible{ outline:none;border-color:hsl(var(--ring));box-shadow:0 0 0 3px hsl(var(--ring) / .25); } .input::placeholder,.textarea::placeholder{color:hsl(var(--muted-foreground))} .input:disabled,.select:disabled,.textarea:disabled{opacity:.5;cursor:not-allowed} /* Select keeps the native popup — the one part of shadcn's Select that needs Radix. The chevron is drawn in so it reads as one family with Input. */ .select{ appearance:none;padding-right:2rem;cursor:pointer; background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2371717a' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right .5rem center;background-size:1rem; } .dark .select{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a1a1aa' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")} .select option{background:hsl(var(--popover));color:hsl(var(--popover-foreground))} .checkbox{ appearance:none;flex:0 0 1rem;width:1rem;height:1rem;margin:0; border:1px solid hsl(var(--primary));border-radius:4px; background:hsl(var(--background));cursor:pointer; display:inline-grid;place-content:center; transition:background-color .15s,border-color .15s; } .checkbox::before{ content:"";width:.65rem;height:.65rem;transform:scale(0); transition:transform .12s; background:hsl(var(--primary-foreground)); clip-path:polygon(14% 44%,0 60%,39% 100%,100% 22%,86% 8%,39% 72%); } .checkbox:checked{background:hsl(var(--primary))} .checkbox:checked::before{transform:scale(1)} .checkbox:disabled{opacity:.5;cursor:not-allowed} /* a checkbox with its label beside it */ .chk{display:inline-flex;align-items:center;gap:.5rem;cursor:pointer;user-select:none;font-size:14px} label{font-size:14px} /* ============================================================ Badge ============================================================ */ .badge{ display:inline-flex;align-items:center;gap:.25rem; border:1px solid transparent;border-radius:9999px; padding:.125rem .5rem;font-size:11.5px;font-weight:600;line-height:1.35; white-space:nowrap; } .badge-secondary{background:hsl(var(--secondary));color:hsl(var(--secondary-foreground))} .badge-destructive{background:hsl(var(--destructive));color:hsl(var(--destructive-foreground))} .badge-outline{color:hsl(var(--foreground));border-color:hsl(var(--border))} /* ============================================================ Card ============================================================ */ .card{ background:hsl(var(--card));color:hsl(var(--card-foreground)); border:1px solid hsl(var(--border)); border-radius:calc(var(--radius) + 4px); box-shadow:0 1px 3px 0 hsl(224 22% 12% / .07), 0 1px 2px -1px hsl(224 22% 12% / .07); overflow:hidden; } .pad{padding:1.25rem 1.5rem} /* ============================================================ Dialog — the platform , dressed as shadcn's ============================================================ */ .dialog{ padding:0;border:0;background:transparent; max-width:min(46rem,calc(100vw - 2rem));width:100%; max-height:calc(100vh - 4rem); color:hsl(var(--foreground)); } .dialog::backdrop{background:hsl(224 22% 6% / .6)} .dialog-content{ background:hsl(var(--card)); border:1px solid hsl(var(--border)); border-radius:calc(var(--radius) + 4px); box-shadow:0 25px 50px -12px hsl(224 22% 6% / .35); padding:1.5rem; max-height:calc(100vh - 4rem);overflow-y:auto; animation:dlg .18s cubic-bezier(.2,.8,.3,1); } @keyframes dlg{from{opacity:0;transform:translateY(6px) scale(.98)}to{opacity:1;transform:none}} .dialog h2{margin:0 0 .35rem;font-size:18px;font-weight:600} .dialog .sub{margin:0 0 1rem;min-height:0;color:hsl(var(--muted-foreground));font-size:14px} .actions-bar{display:flex;gap:.5rem;justify-content:flex-end;margin-top:1.5rem;flex-wrap:wrap} .mrow{display:flex;gap:.75rem;flex-wrap:wrap;margin:.75rem 0} .mrow label{display:flex;flex-direction:column;gap:.375rem;flex:1;min-width:10rem; font-size:13px;font-weight:500;color:hsl(var(--foreground))} .checkrow{display:flex;align-items:center;gap:.625rem;padding:.5rem 0; border-bottom:1px solid hsl(var(--border))} .checkrow:last-child{border-bottom:0} /* A tick-box row inside .mrow is still a