/* ==========================================================================
   Future Employment Agency - design system
   Tailwind provides the utilities; this file holds the component classes,
   base typography and the handful of behaviours Tailwind cannot express.

   The palette is taken straight off the agency badge: the azure disc is the
   primary colour, the ring green is the accent used for progress, growth and
   success states.
   ========================================================================== */

:root {
    --brand-50:  #eef8fe;
    --brand-100: #d7eefc;
    --brand-200: #b4e0fa;
    --brand-500: #2497e0;
    --brand-600: #1b8fd1;   /* logo blue  */
    --brand-700: #1670a6;

    --accent-50:  #f4fbe9;
    --accent-100: #e6f5cf;
    --accent-400: #95ce45;  /* logo green */
    --accent-500: #7cb93f;
    --accent-600: #5f9a2c;

    --ink:       #0f172a;
    --muted:     #64748b;
    --line:      #e2e8f0;
    --surface:   #ffffff;
    --canvas:    #f6f9fc;
    --radius:    14px;
}

* { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

html { scroll-behavior: smooth; }

body {
    font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    color: var(--ink);
    background: var(--canvas);
}

/* ------------------------------------------------------------------ forms */

.form-label {
    display: block;
    font-size: .8125rem;
    font-weight: 600;
    color: #334155;
    margin-bottom: .375rem;
}

.form-input,
.form-select,
.form-textarea {
    width: 100%;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: .625rem .875rem;
    font-size: .9375rem;
    color: var(--ink);
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.form-input::placeholder,
.form-textarea::placeholder { color: #94a3b8; }

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    outline: none;
    border-color: var(--brand-500);
    box-shadow: 0 0 0 4px var(--brand-50);
}

.form-input:disabled,
.form-select:disabled { background: #f8fafc; color: #94a3b8; cursor: not-allowed; }

/*
 * The chevron is drawn as a background image. Anything that later restates
 * `background` as a shorthand (a theme override, for instance) would reset
 * repeat/size/position and tile the arrow across the control, so the geometry
 * is repeated in the dark layer too and overrides there set `background-color`
 * only. Never use the `background` shorthand on a form control.
 */
.form-select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%2394a3b8' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
    background-position: right .625rem center;
    background-repeat: no-repeat;
    background-size: 1.25em 1.25em;
    padding-right: 2.25rem;
}

/* A date/time input keeps its native picker button - no chevron, no padding. */
.form-input[type="date"],
.form-input[type="time"],
.form-input[type="datetime-local"],
.form-input[type="month"] {
    appearance: none;
    background-image: none;
    padding-right: .75rem;
    min-height: 42px;
}

.form-textarea { min-height: 120px; resize: vertical; line-height: 1.6; }

.form-hint { font-size: .75rem; color: var(--muted); margin-top: .375rem; }

.form-check {
    width: 1rem; height: 1rem;
    border-radius: 5px;
    border: 1.5px solid #cbd5e1;
    accent-color: var(--brand-600);
}

label.error, .error-text { color: #e11d48; font-size: .8125rem; margin-top: .375rem; display: block; }
.form-input.error, .form-select.error, .form-textarea.error { border-color: #fda4af; }

/* ---------------------------------------------------------------- buttons */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    font-weight: 600;
    font-size: .875rem;
    line-height: 1;
    padding: .6875rem 1.125rem;
    border-radius: 10px;
    border: 1px solid transparent;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .06s ease;
}
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn.is-loading { opacity: .65; pointer-events: none; }

.btn-primary { background: var(--brand-600); color: #fff; box-shadow: 0 1px 2px rgba(15,23,42,.08); }
.btn-primary:hover { background: var(--brand-700); }

.btn-secondary { background: #fff; color: #334155; border-color: var(--line); }
.btn-secondary:hover { background: #f8fafc; border-color: #cbd5e1; }

.btn-ghost { background: transparent; color: #475569; }
.btn-ghost:hover { background: #f1f5f9; color: var(--ink); }

.btn-accent { background: var(--accent-500); color: #fff; box-shadow: 0 1px 2px rgba(15,23,42,.08); }
.btn-accent:hover { background: var(--accent-600); }

.btn-success { background: #059669; color: #fff; }
.btn-success:hover { background: #047857; }

.btn-danger { background: #e11d48; color: #fff; }
.btn-danger:hover { background: #be123c; }

.btn-outline-danger { background: #fff; color: #e11d48; border-color: #fecdd3; }
.btn-outline-danger:hover { background: #fff1f2; }

.btn-sm { padding: .5rem .75rem; font-size: .8125rem; border-radius: 8px; }
.btn-xs { padding: .3125rem .5rem; font-size: .75rem; border-radius: 7px; gap: .25rem; }
.btn-lg { padding: .875rem 1.5rem; font-size: .9375rem; border-radius: 12px; }
.btn-block { width: 100%; }

/* --------------------------------------------------------------- surfaces */

.card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}
.card-hover { transition: box-shadow .18s ease, border-color .18s ease, transform .18s ease; }
.card-hover:hover { box-shadow: 0 10px 30px -12px rgba(15, 23, 42, .16); border-color: #b4e0fa; transform: translateY(-2px); }

.card-header { padding: 1rem 1.25rem; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.card-body { padding: 1.25rem; }

.badge {
    display: inline-flex; align-items: center; gap: .25rem;
    padding: .1875rem .5rem;
    font-size: .6875rem; font-weight: 600; letter-spacing: .01em;
    border-radius: 999px;
    box-shadow: inset 0 0 0 1px currentColor;
}
.badge-plain { box-shadow: none; }

.chip {
    display: inline-flex; align-items: center; gap: .375rem;
    padding: .3125rem .625rem;
    border-radius: 999px;
    background: #f1f5f9;
    color: #475569;
    font-size: .75rem;
    font-weight: 500;
}

/* ----------------------------------------------------------------- tables */

.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.data { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .875rem; }
table.data thead th {
    text-align: left;
    font-size: .6875rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #64748b;
    font-weight: 600;
    padding: .75rem 1rem;
    background: #f8fafc;
    border-bottom: 1px solid var(--line);
    white-space: nowrap;
}
table.data tbody td { padding: .875rem 1rem; border-bottom: 1px solid #f1f5f9; vertical-align: middle; }
table.data tbody tr:last-child td { border-bottom: 0; }
table.data tbody tr:hover { background: #fafbff; }
table.data th.sortable { cursor: pointer; user-select: none; }
table.data th.sortable:hover { color: var(--brand-600); }
table.data th .sort-arrow { opacity: .35; margin-left: .25rem; }
table.data th.is-sorted .sort-arrow { opacity: 1; color: var(--brand-600); }

/* ------------------------------------------------------------------ misc */

.avatar {
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 999px; color: #fff; font-weight: 600; overflow: hidden;
    background-size: cover; background-position: center; flex-shrink: 0;
}

.logo-tile {
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 12px; background: #fff; border: 1px solid var(--line);
    overflow: hidden; flex-shrink: 0;
}
.logo-tile img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }

.prose-content { color: #334155; line-height: 1.75; font-size: .9375rem; }
.prose-content p { margin-bottom: 1rem; }
.prose-content h2, .prose-content h3, .prose-content h4 { color: var(--ink); font-weight: 700; margin: 1.5rem 0 .75rem; }
.prose-content h2 { font-size: 1.25rem; }
.prose-content h3 { font-size: 1.0625rem; }
.prose-content ul, .prose-content ol { margin: 0 0 1rem 1.25rem; }
.prose-content ul { list-style: disc; }
.prose-content ol { list-style: decimal; }
.prose-content li { margin-bottom: .5rem; padding-left: .25rem; }
.prose-content a { color: var(--brand-600); text-decoration: underline; }
.prose-content strong { color: var(--ink); font-weight: 600; }
.prose-content blockquote { border-left: 3px solid var(--brand-500); padding-left: 1rem; color: #475569; font-style: italic; margin-bottom: 1rem; }
.prose-content table { width: 100%; border-collapse: collapse; margin-bottom: 1rem; }
.prose-content th, .prose-content td { border: 1px solid var(--line); padding: .5rem .75rem; text-align: left; }

/* ----------------------------------------------------------------- toasts */

#toast-stack {
    position: fixed; z-index: 90;
    top: 1rem; right: 1rem;
    display: flex; flex-direction: column; gap: .625rem;
    max-width: min(92vw, 25rem);
}
.toast {
    display: flex; align-items: flex-start; gap: .75rem;
    background: #fff;
    border: 1px solid var(--line);
    border-left: 4px solid var(--brand-600);
    border-radius: 12px;
    padding: .875rem 1rem;
    box-shadow: 0 12px 32px -12px rgba(15, 23, 42, .28);
    animation: toast-in .22s cubic-bezier(.2, .8, .3, 1);
}
.toast.leaving { animation: toast-out .18s ease forwards; }
.toast-success { border-left-color: #059669; }
.toast-error   { border-left-color: #e11d48; }
.toast-warning { border-left-color: #d97706; }
.toast-info    { border-left-color: #0284c7; }

@keyframes toast-in  { from { opacity: 0; transform: translateX(18px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes toast-out { to { opacity: 0; transform: translateX(18px) scale(.98); } }

/* ----------------------------------------------------------------- modals */

.modal-backdrop {
    position: fixed; inset: 0; z-index: 80;
    background: rgba(15, 23, 42, .5);
    backdrop-filter: blur(2px);
    display: flex; align-items: flex-start; justify-content: center;
    padding: 1rem; overflow-y: auto;
}
.modal-panel {
    background: #fff; border-radius: 16px; width: 100%;
    box-shadow: 0 24px 60px -20px rgba(15, 23, 42, .4);
    margin: 3rem auto;
    animation: modal-in .2s cubic-bezier(.2, .8, .3, 1);
}
@keyframes modal-in { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }

/* --------------------------------------------------------------- skeleton */

.skeleton { position: relative; overflow: hidden; background: #eef2f7; border-radius: 8px; }
.skeleton::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.75), transparent);
    animation: shimmer 1.25s infinite;
}
@keyframes shimmer { 100% { transform: translateX(100%); } }

.is-loading-block { position: relative; }
.is-loading-block::after {
    content: ''; position: absolute; inset: 0;
    background: rgba(248, 250, 252, .65);
    backdrop-filter: blur(1px);
    border-radius: inherit;
}

.spinner {
    width: 1rem; height: 1rem;
    border: 2px solid currentColor; border-right-color: transparent;
    border-radius: 999px;
    display: inline-block;
    animation: spin .6s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ----------------------------------------------------------- kanban board */

.kanban { display: flex; gap: 1rem; overflow-x: auto; padding-bottom: 1rem; align-items: flex-start; }
.kanban-col {
    flex: 0 0 288px; width: 288px;
    background: #f1f5f9;
    border-radius: 14px;
    border: 1px solid #e2e8f0;
    display: flex; flex-direction: column;
    max-height: calc(100vh - 260px);
}
.kanban-col-head { padding: .75rem .875rem; display: flex; align-items: center; justify-content: space-between; gap: .5rem; border-bottom: 1px solid #e2e8f0; }
.kanban-list { padding: .75rem; display: flex; flex-direction: column; gap: .625rem; overflow-y: auto; flex: 1; min-height: 120px; }
.kanban-card {
    background: #fff; border: 1px solid var(--line); border-radius: 11px;
    padding: .75rem; cursor: grab;
    box-shadow: 0 1px 2px rgba(15,23,42,.05);
    transition: box-shadow .15s ease, border-color .15s ease;
}
.kanban-card:hover { box-shadow: 0 8px 20px -10px rgba(15,23,42,.25); border-color: #b4e0fa; }
.kanban-card.ui-sortable-helper { transform: rotate(1.5deg); box-shadow: 0 16px 32px -12px rgba(15,23,42,.35); cursor: grabbing; }
.kanban-placeholder { border: 2px dashed #b4e0fa; background: #eef8fe; border-radius: 11px; }
.kanban-list.drop-hover { background: #eef8fe; border-radius: 10px; }

/* ------------------------------------------------------------ rich editor */

.rte { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: #fff; }
.rte-toolbar { display: flex; flex-wrap: wrap; gap: .125rem; padding: .375rem; border-bottom: 1px solid var(--line); background: #f8fafc; }
.rte-btn {
    width: 30px; height: 30px; border-radius: 7px;
    display: inline-flex; align-items: center; justify-content: center;
    color: #475569; font-size: .8125rem; font-weight: 600; cursor: pointer; border: 0; background: transparent;
}
.rte-btn:hover { background: #e2e8f0; color: var(--ink); }
.rte-area { min-height: 220px; max-height: 460px; overflow-y: auto; padding: .875rem 1rem; font-size: .9375rem; line-height: 1.7; color: #334155; outline: none; }
.rte-area:empty::before { content: attr(data-placeholder); color: #94a3b8; }
.rte-area ul { list-style: disc; margin-left: 1.25rem; margin-bottom: .75rem; }
.rte-area ol { list-style: decimal; margin-left: 1.25rem; margin-bottom: .75rem; }
.rte-area p { margin-bottom: .625rem; }
.rte:focus-within { border-color: var(--brand-500); box-shadow: 0 0 0 4px var(--brand-50); }

/* -------------------------------------------------------------- tag input */

.tag-input { display: flex; flex-wrap: wrap; gap: .375rem; padding: .4375rem; border: 1px solid var(--line); border-radius: 10px; background: #fff; min-height: 44px; }
.tag-input:focus-within { border-color: var(--brand-500); box-shadow: 0 0 0 4px var(--brand-50); }
.tag-input input { flex: 1; min-width: 120px; border: 0; outline: none; padding: .25rem .375rem; font-size: .875rem; background: transparent; }
.tag {
    display: inline-flex; align-items: center; gap: .375rem;
    background: var(--brand-50); color: var(--brand-700);
    border-radius: 7px; padding: .25rem .5rem; font-size: .8125rem; font-weight: 500;
}
.tag button { color: var(--brand-600); opacity: .6; line-height: 1; }
.tag button:hover { opacity: 1; }

/* ------------------------------------------------------------- timeline */

.timeline { position: relative; padding-left: 1.75rem; }
.timeline::before { content: ''; position: absolute; left: .5rem; top: .35rem; bottom: .35rem; width: 2px; background: linear-gradient(#e2e8f0, #eef8fe); }
.timeline-item { position: relative; padding-bottom: 1.375rem; }
.timeline-item:last-child { padding-bottom: 0; }
.timeline-dot {
    position: absolute; left: -1.75rem; top: .1rem;
    width: 1.0625rem; height: 1.0625rem; border-radius: 999px;
    background: #fff; border: 3px solid #cbd5e1;
}
.timeline-item.is-done .timeline-dot { border-color: var(--brand-600); background: var(--brand-600); box-shadow: 0 0 0 3px var(--brand-50); }
.timeline-item.is-current .timeline-dot { border-color: var(--brand-600); background: #fff; box-shadow: 0 0 0 3px var(--brand-50); animation: pulse-dot 2s infinite; }
.timeline-item.is-fail .timeline-dot { border-color: #e11d48; background: #e11d48; }
@keyframes pulse-dot { 0%,100% { box-shadow: 0 0 0 3px var(--brand-50); } 50% { box-shadow: 0 0 0 6px var(--brand-50); } }

/* -------------------------------------------------------------- progress */

.progress { height: 8px; background: #e2e8f0; border-radius: 999px; overflow: hidden; }
.progress > span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--brand-500), #06b6d4); transition: width .6s cubic-bezier(.2,.8,.3,1); }

/* ------------------------------------------------------------ animations */

.fade-in { animation: fade-in .3s ease both; }
@keyframes fade-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.count-up { font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- layout */

.sidebar-link {
    display: flex; align-items: center; gap: .75rem;
    padding: .5625rem .75rem;
    border-radius: 10px;
    font-size: .875rem; font-weight: 500;
    color: #cbd5e1;
    transition: background-color .15s ease, color .15s ease;
}
.sidebar-link:hover { background: rgba(255,255,255,.07); color: #fff; }
.sidebar-link.active { background: var(--brand-600); color: #fff; box-shadow: 0 6px 16px -8px rgba(27,143,209,.9); }
.sidebar-link.active svg { color: #fff; }
.sidebar-section { font-size: .6875rem; text-transform: uppercase; letter-spacing: .08em; color: #64748b; font-weight: 600; padding: 1rem .75rem .375rem; }

.nav-link { font-size: .875rem; font-weight: 500; color: #475569; padding: .5rem .75rem; border-radius: 8px; transition: color .15s ease, background-color .15s ease; }
.nav-link:hover { color: var(--brand-600); background: var(--brand-50); }
.nav-link.active { color: var(--brand-600); background: var(--brand-50); }

/* ---------------------------------------------------------------- print */

@media print {
    .no-print, header nav, .sidebar, #toast-stack, footer { display: none !important; }
    body { background: #fff; }
    .card { box-shadow: none !important; border-color: #d7dee8 !important; break-inside: avoid; }
    table.data thead th { background: #f1f5f9 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    a[href]::after { content: ''; }
    .print-full { width: 100% !important; max-width: none !important; padding: 0 !important; }
    @page { margin: 12mm; size: A4 landscape; }
}

/* ------------------------------------------------------------ scrollbars */

.scroll-thin::-webkit-scrollbar { width: 8px; height: 8px; }
.scroll-thin::-webkit-scrollbar-track { background: transparent; }
.scroll-thin::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 999px; }
.scroll-thin::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* Hide number input spinners for salary fields */
input[type=number].no-spin::-webkit-outer-spin-button,
input[type=number].no-spin::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type=number].no-spin { -moz-appearance: textfield; }

/* ==========================================================================
   DARK MODE
   The views are written with the light palette; this block retunes the design
   tokens and the handful of Tailwind utilities they use, so every screen -
   public site, candidate, company and admin - flips with one class on <html>.
   ========================================================================== */

.dark {
    --brand-50:  #0e3a55;
    --brand-100: #175c88;
    --ink:       #e2e8f0;
    --muted:     #94a3b8;
    --line:      #1e293b;
    --surface:   #0f172a;
    --canvas:    #020617;
    color-scheme: dark;
}

.dark body { background-color: var(--canvas); color: var(--ink); }

/* --- surfaces ----------------------------------------------------------- */
.dark .card { background-color: var(--surface); border-color: var(--line); box-shadow: 0 1px 2px rgba(0,0,0,.4); }
.dark .card-hover:hover { border-color: #1b8fd1; box-shadow: 0 10px 30px -12px rgba(0,0,0,.7); }
.dark .card-header { border-color: var(--line); }
.dark .logo-tile { background-color: #1e293b; border-color: var(--line); }

.dark .bg-white { background-color: var(--surface) !important; }
.dark .bg-white\/90, .dark .bg-white\/95 { background-color: rgba(15,23,42,.92) !important; }
.dark .bg-slate-50 { background-color: #0b1220 !important; }
.dark .bg-slate-100 { background-color: #1e293b !important; }
.dark .bg-slate-900 { background-color: #020617 !important; }
.dark .bg-slate-800 { background-color: #0f172a !important; }
.dark .hover\:bg-slate-50:hover { background-color: #131c31 !important; }
.dark .hover\:bg-slate-100:hover { background-color: #1e293b !important; }

/* --- text --------------------------------------------------------------- */
.dark .text-slate-900 { color: #f1f5f9 !important; }
.dark .text-slate-800 { color: #e2e8f0 !important; }
.dark .text-slate-700 { color: #cbd5e1 !important; }
.dark .text-slate-600 { color: #b4c0d0 !important; }
.dark .text-slate-500 { color: #94a3b8 !important; }
.dark .text-slate-400 { color: #7d8ba1 !important; }
.dark .text-slate-300 { color: #64748b !important; }
.dark .text-white { color: #f8fafc !important; }

/* --- borders and rings -------------------------------------------------- */
.dark .border-slate-100 { border-color: #16213a !important; }
.dark .border-slate-200 { border-color: var(--line) !important; }
.dark .border-slate-300 { border-color: #334155 !important; }
.dark .divide-slate-100 > * + * { border-color: #16213a !important; }
.dark .ring-slate-200 { --tw-ring-color: #1e293b !important; }

/* --- forms -------------------------------------------------------------- */
.dark .form-input, .dark .form-select, .dark .form-textarea, .dark .tag-input, .dark .rte {
    background-color: #0b1220; border-color: #23304a; color: var(--ink);
}
.dark .form-input::placeholder, .dark .form-textarea::placeholder { color: #64748b; }
.dark .form-input:focus, .dark .form-select:focus, .dark .form-textarea:focus { box-shadow: 0 0 0 4px rgba(27,143,209,.25); }
.dark .form-label { color: #cbd5e1; }
.dark .form-hint { color: #7d8ba1; }
.dark .form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%2364748b' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
    background-position: right .625rem center;
    background-repeat: no-repeat;
    background-size: 1.25em 1.25em;
}
.dark .form-input[type="date"],
.dark .form-input[type="time"],
.dark .form-input[type="datetime-local"],
.dark .form-input[type="month"] { background-image: none; }

/* Native widgets - the date picker, the select popup, scrollbars - follow the
   page instead of staying white. */
.dark .form-input, .dark .form-select, .dark .form-textarea { color-scheme: dark; }
.dark .form-input::-webkit-calendar-picker-indicator { filter: invert(1) opacity(.55); cursor: pointer; }
.dark .form-input::-webkit-calendar-picker-indicator:hover { filter: invert(1) opacity(.9); }
.dark .form-input:disabled, .dark .form-select:disabled { background-color: #131c31; color: #64748b; }

.dark .form-check { border-color: #475569; background-color: #0b1220; }
.dark .rte-toolbar { background-color: #131c31; border-color: #23304a; }
.dark .rte-area { color: #cbd5e1; }
.dark .rte-btn { color: #94a3b8; }
.dark .rte-btn:hover { background-color: #1e293b; color: #f1f5f9; }

/* --- buttons ------------------------------------------------------------ */
.dark .btn-secondary { background-color: #131c31; color: #cbd5e1; border-color: #23304a; }
.dark .btn-secondary:hover { background-color: #1e293b; border-color: #334155; }
.dark .btn-ghost { color: #94a3b8; }
.dark .btn-ghost:hover { background-color: #1e293b; color: #f1f5f9; }
.dark .btn-outline-danger { background-color: transparent; border-color: #7f1d1d; color: #fca5a5; }
.dark .btn-outline-danger:hover { background-color: rgba(127,29,29,.25); }

/* --- tables ------------------------------------------------------------- */
.dark table.data thead th { background-color: #131c31; color: #94a3b8; border-color: var(--line); }
.dark table.data tbody td { border-color: #16213a; }
.dark table.data tbody tr:hover { background-color: #131c31; }

/* --- chips, badges and tinted panels ------------------------------------ */
.dark .chip { background-color: #1e293b; color: #cbd5e1; }
.dark .tag { background-color: #0e3a55; color: #b4e0fa; }
.dark .badge { filter: brightness(.92); }
.dark .bg-brand-50, .dark .bg-brand-50\/60, .dark .bg-brand-50\/40 { background-color: rgba(27,143,209,.14) !important; }
.dark .bg-amber-50 { background-color: rgba(217,119,6,.16) !important; }
.dark .bg-emerald-50 { background-color: rgba(5,150,105,.16) !important; }
.dark .bg-rose-50 { background-color: rgba(225,29,72,.16) !important; }
.dark .bg-sky-50 { background-color: rgba(2,132,199,.16) !important; }
.dark .bg-violet-50 { background-color: rgba(124,58,237,.16) !important; }
.dark .bg-teal-50 { background-color: rgba(13,148,136,.16) !important; }
.dark .bg-indigo-50 { background-color: rgba(99,102,241,.16) !important; }
.dark .border-brand-100 { border-color: rgba(27,143,209,.35) !important; }
.dark .border-amber-100, .dark .border-amber-200 { border-color: rgba(217,119,6,.35) !important; }
.dark .border-emerald-100 { border-color: rgba(5,150,105,.35) !important; }
.dark .border-rose-100, .dark .border-rose-200 { border-color: rgba(225,29,72,.35) !important; }
.dark .border-sky-200 { border-color: rgba(2,132,199,.35) !important; }
.dark .border-teal-100 { border-color: rgba(13,148,136,.35) !important; }

.dark .text-brand-100 { color: #175c88 !important; }
.dark .text-amber-900, .dark .text-amber-800 { color: #fcd34d !important; }
.dark .text-emerald-900 { color: #6ee7b7 !important; }
.dark .text-rose-900, .dark .text-rose-800 { color: #fda4af !important; }
.dark .text-sky-900, .dark .text-sky-800 { color: #7dd3fc !important; }
.dark .text-teal-900, .dark .text-teal-800 { color: #5eead4 !important; }
.dark .text-teal-700 { color: #2dd4bf !important; }

/* --- kanban, timeline, misc -------------------------------------------- */
.dark .kanban-col { background-color: #0b1220; border-color: var(--line); }
.dark .kanban-col-head { border-color: var(--line); }
.dark .kanban-card { background-color: var(--surface); border-color: #23304a; }
.dark .kanban-placeholder { background-color: rgba(27,143,209,.12); border-color: #1b8fd1; }
.dark .kanban-list.drop-hover { background-color: rgba(27,143,209,.1); }
.dark .timeline::before { background: linear-gradient(#1e293b, #175c88); }
.dark .timeline-dot { background-color: var(--surface); border-color: #334155; }
.dark .progress { background-color: #1e293b; }
.dark .toast { background-color: #131c31; border-color: #23304a; color: #e2e8f0; }
.dark .toast .text-slate-700 { color: #cbd5e1 !important; }
.dark .modal-panel { background-color: var(--surface); }
.dark .skeleton { background-color: #1e293b; }
.dark .is-loading-block::after { background-color: rgba(2,6,23,.6); }
.dark .prose-content { color: #cbd5e1; }
.dark .prose-content h2, .dark .prose-content h3, .dark .prose-content h4, .dark .prose-content strong { color: #f1f5f9; }
.dark .prose-content th, .dark .prose-content td { border-color: var(--line); }
.dark .shadow-sm, .dark .shadow-lg, .dark .shadow-xl, .dark .shadow-2xl { --tw-shadow-color: rgba(0,0,0,.6); }

/* The public hero and footer are dark in both themes - leave them alone. */
.dark .theme-static, .dark .theme-static * { }

/* ==========================================================================
   Public site - motion, hero slideshow and decorative graphics
   Everything here is presentational. Each effect is switched off wholesale
   under `prefers-reduced-motion`, and every animated element is readable in
   its final state if JavaScript never runs.
   ========================================================================== */

/* ------------------------------------------------------------ scroll reveal */

[data-reveal] {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1);
    transition-delay: var(--reveal-delay, 0ms);
    will-change: opacity, transform;
}
[data-reveal="left"]  { transform: translateX(-26px); }
[data-reveal="right"] { transform: translateX(26px); }
[data-reveal="zoom"]  { transform: scale(.94); }
[data-reveal].is-visible { opacity: 1; transform: none; }

/* Without JS nothing would ever get .is-visible, so show everything. */
.no-js [data-reveal] { opacity: 1; transform: none; }

/* ------------------------------------------------------------- hero slider */

.hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: #0a2540;
}

.hero-slides { position: absolute; inset: 0; z-index: 0; }

.hero-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 1.1s ease;
    background-size: cover;
    background-position: center;
}
.hero-slide.is-active { opacity: 1; }

/* A slow drift on the active slide keeps a static image from feeling flat. */
.hero-slide.is-active .hero-slide-media { animation: heroDrift 14s ease-out forwards; }
.hero-slide-media { position: absolute; inset: -4%; background-size: cover; background-position: center; }
@keyframes heroDrift {
    from { transform: scale(1)    translate3d(0, 0, 0); }
    to   { transform: scale(1.09) translate3d(-1.2%, -1%, 0); }
}

/* Readability wash over the photography. */
.hero-scrim {
    position: absolute; inset: 0; z-index: 1;
    background:
        linear-gradient(105deg, rgba(8,30,52,.94) 0%, rgba(8,30,52,.82) 38%, rgba(8,30,52,.45) 70%, rgba(8,30,52,.35) 100%),
        radial-gradient(120% 90% at 88% 12%, rgba(149,206,69,.20), transparent 60%);
}

.hero-content { position: relative; z-index: 2; }

/* Slide text animates in each time its slide becomes active. */
.hero-slide.is-active ~ .hero-content .hero-anim,
.hero-content .hero-anim.is-in {
    animation: heroIn .8s cubic-bezier(.16,1,.3,1) both;
}
@keyframes heroIn {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: none; }
}

.hero-dots { display: flex; gap: .5rem; }
.hero-dot {
    width: 30px; height: 4px; border-radius: 999px;
    background: rgba(255,255,255,.32);
    border: 0; padding: 0; cursor: pointer;
    transition: background .3s, width .3s;
}
.hero-dot:hover { background: rgba(255,255,255,.55); }
.hero-dot.is-active { background: var(--accent-400); width: 46px; }

.hero-arrow {
    width: 42px; height: 42px; border-radius: 999px;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.22);
    color: #fff; cursor: pointer;
    transition: background .2s, border-color .2s, transform .2s;
}
.hero-arrow:hover { background: rgba(255,255,255,.2); border-color: rgba(255,255,255,.4); transform: scale(1.06); }

/* --------------------------------------------------------------- graphics */

/* Soft brand blobs used behind sections. */
.blob { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .5; pointer-events: none; z-index: 0; }
.blob-brand  { background: rgba(27,143,209,.35); }
.blob-accent { background: rgba(149,206,69,.32); }
.blob-float  { animation: blobFloat 18s ease-in-out infinite; }
@keyframes blobFloat {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33%      { transform: translate(22px, -18px) scale(1.06); }
    66%      { transform: translate(-16px, 14px) scale(.96); }
}

/* Dot grid + diagonal hatch, as inline-free background patterns. */
.pattern-dots {
    background-image: radial-gradient(currentColor 1px, transparent 1px);
    background-size: 22px 22px;
    opacity: .12;
}
.pattern-grid {
    background-image: linear-gradient(currentColor 1px, transparent 1px),
                      linear-gradient(90deg, currentColor 1px, transparent 1px);
    background-size: 46px 46px;
    opacity: .07;
}

/* Section heading rule that picks up the ring green. */
.eyebrow {
    display: inline-flex; align-items: center; gap: .5rem;
    font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    color: var(--brand-600);
}
.eyebrow::before { content: ''; width: 26px; height: 2px; border-radius: 2px; background: var(--accent-400); }

/* ----------------------------------------------------------- interactions */

.lift { transition: transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s, border-color .25s; }
.lift:hover { transform: translateY(-6px); box-shadow: 0 22px 40px -24px rgba(8,30,52,.45); }

/* Category / feature tiles: the icon plate fills with brand colour on hover. */
.tile-icon { transition: background-color .25s, color .25s, transform .35s cubic-bezier(.16,1,.3,1); }
.group:hover .tile-icon { background-color: var(--brand-600); color: #fff; transform: rotate(-6deg) scale(1.06); }

/* Underline that draws in from the left. */
.link-underline { position: relative; }
.link-underline::after {
    content: ''; position: absolute; left: 0; bottom: -2px; height: 2px; width: 0;
    background: var(--accent-400); transition: width .3s cubic-bezier(.16,1,.3,1);
}
.link-underline:hover::after { width: 100%; }

/* ------------------------------------------------------ logo marquee strip */

.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
           mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee-track { display: flex; gap: 3rem; width: max-content; animation: marquee 38s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ------------------------------------------------------------- misc motion */

.float-slow { animation: floatSlow 6s ease-in-out infinite; }
@keyframes floatSlow { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }

.pulse-ring::before {
    content: ''; position: absolute; inset: 0; border-radius: inherit;
    border: 2px solid var(--accent-400); opacity: .8;
    animation: pulseRing 2.4s cubic-bezier(.24,0,.38,1) infinite;
}
@keyframes pulseRing {
    0%   { transform: scale(1);    opacity: .7; }
    100% { transform: scale(1.55); opacity: 0; }
}

/* Counters hold their space before they animate so nothing reflows. */
.counter { font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------- reduced motion */

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
    .hero-slide.is-active .hero-slide-media,
    .blob-float, .float-slow, .marquee-track, .pulse-ring::before { animation: none !important; }
    .hero-slide { transition: none; }
    .hero-content .hero-anim.is-in { animation: none !important; }
    .lift:hover { transform: none; }
}

/* ------------------------------------------------------ dark-mode variants */

.dark .hero { background: #050f1c; }
.dark .eyebrow { color: var(--accent-400); }
.dark .pattern-dots, .dark .pattern-grid { opacity: .09; }
.dark .lift:hover { box-shadow: 0 22px 40px -24px rgba(0,0,0,.8); }

.site-header.is-scrolled { box-shadow: 0 6px 24px -18px rgba(8,30,52,.55); border-bottom-color: rgba(226,232,240,.9); }
.dark .site-header { background-color: rgba(19,28,49,.85); border-bottom-color: #23304a; }

/* Sort indicator on sortable table headers: two small CSS triangles, so the
   markup stays plain ASCII. `.asc` / `.desc` are set by the table script. */
.sort-arrow { display: inline-block; width: 8px; height: 12px; margin-left: .25rem; position: relative; vertical-align: middle; opacity: .45; }
.sort-arrow::before,
.sort-arrow::after {
    content: ''; position: absolute; left: 0;
    border-left: 4px solid transparent; border-right: 4px solid transparent;
}
.sort-arrow::before { top: 1px; border-bottom: 4px solid currentColor; }
.sort-arrow::after  { bottom: 1px; border-top: 4px solid currentColor; }
th.sortable:hover .sort-arrow { opacity: .8; }
th.sortable.asc  .sort-arrow { opacity: 1; }
th.sortable.asc  .sort-arrow::after  { opacity: .25; }
th.sortable.desc .sort-arrow { opacity: 1; }
th.sortable.desc .sort-arrow::before { opacity: .25; }

/* ==========================================================================
   Hero "on the desk" panel
   A glass card over the hero artwork. The gradient border is a masked
   pseudo-element so it reads crisply against any slide.
   ========================================================================== */

.desk-panel {
    position: relative;
    border-radius: 20px;
    background: linear-gradient(160deg, rgba(255,255,255,.14), rgba(255,255,255,.06));
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    box-shadow: 0 30px 60px -30px rgba(2, 12, 27, .85), 0 2px 8px rgba(2, 12, 27, .3);
    overflow: hidden;
    animation: deskFloat 7s ease-in-out infinite;
}

/* Hairline gradient border. */
.desk-panel::before {
    content: '';
    position: absolute; inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(150deg, rgba(255,255,255,.5), rgba(149,206,69,.35) 45%, rgba(255,255,255,.08));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

/* Faint sheen sweeping across the glass. */
.desk-panel::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.10) 45%, transparent 60%);
    transform: translateX(-100%);
    animation: deskSheen 9s ease-in-out infinite;
    pointer-events: none;
}

@keyframes deskFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-10px); }
}
@keyframes deskSheen {
    0%, 65%  { transform: translateX(-100%); }
    85%,100% { transform: translateX(100%); }
}

.desk-tile { padding: 1rem 1.25rem; transition: background-color .25s; }
.desk-tile:hover { background: rgba(255,255,255,.06); }

.desk-tile-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: 9px;
    background: rgba(255,255,255,.12);
    color: var(--accent-400);
}

@media (prefers-reduced-motion: reduce) {
    .desk-panel, .desk-panel::after { animation: none; }
    .desk-panel::after { display: none; }
}

/* ==========================================================================
   Public header
   ========================================================================== */

/* The bar shrinks slightly once the page is scrolled, which gives back
   vertical space without the header jumping. */
.site-header-bar { height: 4.5rem; transition: height .25s ease; }
.site-header.is-scrolled .site-header-bar { height: 3.75rem; }

.site-logo { transition: width .25s ease, height .25s ease, transform .25s ease; }
.site-header.is-scrolled .site-logo { width: 2.25rem; height: 2.25rem; }

/* Nav items: a pill on hover, a brand underline when active. */
.nav-pill {
    position: relative;
    padding: .5rem .875rem;
    border-radius: 10px;
    font-size: .875rem;
    font-weight: 600;
    color: #475569;
    transition: color .2s, background-color .2s;
    white-space: nowrap;
}
.nav-pill:hover { color: var(--brand-700); background: var(--brand-50); }

.nav-pill::after {
    content: '';
    position: absolute;
    left: 50%; bottom: .125rem;
    width: 0; height: 2px;
    border-radius: 2px;
    background: var(--accent-400);
    transform: translateX(-50%);
    transition: width .25s cubic-bezier(.16,1,.3,1);
}
.nav-pill.active { color: var(--brand-700); }
.nav-pill.active::after { width: 1.25rem; }

/* ------------------------------------------------------------ mobile drawer */

.mobile-nav { position: fixed; inset: 0; z-index: 60; }
.mobile-nav.hidden { display: none; }

.mobile-nav-backdrop {
    position: absolute; inset: 0;
    background: rgba(8, 30, 52, .55);
    backdrop-filter: blur(2px);
    opacity: 0;
    transition: opacity .25s ease;
}
.mobile-nav.is-open .mobile-nav-backdrop { opacity: 1; }

.mobile-nav-panel {
    position: absolute; top: 0; right: 0; bottom: 0;
    width: min(20rem, 86vw);
    display: flex; flex-direction: column;
    background: var(--surface);
    box-shadow: -20px 0 50px -20px rgba(8, 30, 52, .5);
    transform: translateX(100%);
    transition: transform .3s cubic-bezier(.16,1,.3,1);
}
.mobile-nav.is-open .mobile-nav-panel { transform: translateX(0); }

.mobile-nav-link {
    display: flex; align-items: center; justify-content: space-between;
    padding: .8125rem 1rem;
    border-radius: 12px;
    font-size: .9375rem; font-weight: 600;
    color: #334155;
    transition: background-color .2s, color .2s;
}
.mobile-nav-link:hover { background: #f1f5f9; }
.mobile-nav-link.active { background: var(--brand-50); color: var(--brand-700); }

@media (prefers-reduced-motion: reduce) {
    .site-header-bar, .site-logo, .mobile-nav-backdrop, .mobile-nav-panel { transition: none; }
}

/* ----------------------------------------------------------------- dark mode */

.dark .nav-pill { color: #94a3b8; }
.dark .nav-pill:hover { color: #e2e8f0; background: rgba(27,143,209,.14); }
.dark .nav-pill.active { color: #e2e8f0; }
.dark .mobile-nav-panel { background: var(--surface); }
.dark .mobile-nav-link { color: #cbd5e1; }
.dark .mobile-nav-link:hover { background: #1e293b; }
.dark .mobile-nav-link.active { background: rgba(27,143,209,.16); color: #7cc6f0; }

/* A marketing page must never scroll sideways. `clip` still allows the sticky
   header and position:fixed drawer to work, which `hidden` would break. */
html, body { overflow-x: clip; }