/* Igloo Talent CRM — Design System (2026 refresh) */
@import url('inter.css');

/* ==========================================================================
   Design Tokens — neutral zinc base + indigo brand accent
   ========================================================================== */
:root {
    --canvas: 240 20% 98.5%;
    --background: 0 0% 100%;
    --foreground: 240 10% 12%;
    --card: 0 0% 100%;
    --card-foreground: 240 10% 12%;
    --popover: 0 0% 100%;
    --popover-foreground: 240 10% 12%;

    --primary: 240 10% 10%;
    --primary-foreground: 0 0% 98%;

    --brand: 243 75% 59%;
    --brand-foreground: 0 0% 100%;

    --secondary: 240 5% 96%;
    --secondary-foreground: 240 10% 12%;
    --muted: 240 5% 95.5%;
    --muted-foreground: 240 4% 46%;
    --accent: 240 20% 97%;
    --accent-foreground: 240 10% 12%;

    --destructive: 0 72% 51%;
    --destructive-foreground: 0 0% 98%;
    --success: 152 55% 32%;
    --success-foreground: 0 0% 98%;
    --warning: 32 92% 45%;
    --warning-foreground: 0 0% 98%;
    --info: 217 91% 55%;
    --info-foreground: 0 0% 98%;

    --border: 240 6% 90%;
    --border-strong: 240 6% 83%;
    --input: 240 6% 90%;
    --ring: 243 75% 59%;
    --radius: 0.625rem;
}

* { border-color: hsl(var(--border)); }

html, body { height: 100%; }

body {
    font-family: 'Inter', sans-serif;
    background-color: hsl(var(--canvas));
    color: hsl(var(--foreground));
    -webkit-font-smoothing: antialiased;
}

/* Consistent focus ring across all interactive elements */
button, a, input, select, textarea, [tabindex] {
    outline: none;
}
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, [tabindex]:focus-visible {
    box-shadow: 0 0 0 2px hsl(var(--background)), 0 0 0 4px hsl(var(--ring) / 0.45);
    border-radius: 0.5rem;
}

/* Custom Scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: hsl(var(--border-strong)); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: hsl(var(--muted-foreground) / 0.5); }

/* ==========================================================================
   Layout primitives
   ========================================================================== */
.app-sidebar {
    background: hsl(var(--background));
    border-right: 1px solid hsl(var(--border));
}

.nav-link {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.5rem 0.65rem;
    font-size: 0.8125rem;
    font-weight: 500;
    border-radius: 0.5rem;
    color: hsl(var(--muted-foreground));
    transition: background-color 120ms ease, color 120ms ease;
    position: relative;
}
.nav-link:hover { background: hsl(var(--accent)); color: hsl(var(--foreground)); }
.nav-link.is-active {
    background: hsl(var(--brand) / 0.09);
    color: hsl(var(--brand));
    font-weight: 600;
}
.nav-link.is-active .nav-icon { color: hsl(var(--brand)); }
.nav-icon { color: hsl(var(--muted-foreground) / 0.9); flex-shrink: 0; }
.nav-link.is-active { box-shadow: inset 2.5px 0 0 hsl(var(--brand)); }

.page-shell {
    max-width: 1180px;
    margin: 0 auto;
    width: 100%;
}

.page-header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.75rem;
}
.page-title {
    font-size: 1.375rem;
    font-weight: 600;
    letter-spacing: -0.015em;
    color: hsl(var(--foreground));
}
.page-subtitle {
    font-size: 0.8125rem;
    color: hsl(var(--muted-foreground));
    margin-top: 0.2rem;
}
.section-label {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: hsl(var(--muted-foreground));
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    white-space: nowrap;
    border-radius: calc(var(--radius) - 2px);
    font-size: 0.8125rem;
    font-weight: 500;
    padding: 0.5rem 0.9rem;
    transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease;
    border: 1px solid transparent;
    cursor: pointer;
    line-height: 1.1;
}
.btn:disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; }
.btn-sm { padding: 0.35rem 0.65rem; font-size: 0.75rem; }
.btn-icon { padding: 0.4rem; }

.btn-primary { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }
.btn-primary:hover { background: hsl(var(--primary) / 0.88); }

.btn-outline {
    background: hsl(var(--background));
    color: hsl(var(--secondary-foreground));
    border-color: hsl(var(--border-strong));
}
.btn-outline:hover { background: hsl(var(--accent)); }

.btn-soft { background: hsl(var(--brand) / 0.08); color: hsl(var(--brand)); border-color: hsl(var(--brand) / 0.15); }
.btn-soft:hover { background: hsl(var(--brand) / 0.14); }

.btn-ghost { background: transparent; color: hsl(var(--muted-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) / 0.9); }

/* ==========================================================================
   Inputs
   ========================================================================== */
.input-base {
    display: block;
    width: 100%;
    border: 1px solid hsl(var(--border));
    background: hsl(var(--background));
    border-radius: calc(var(--radius) - 2px);
    padding: 0.5rem 0.85rem;
    font-size: 0.8125rem;
    font-weight: 450;
    color: hsl(var(--foreground));
    transition: border-color 120ms ease, box-shadow 120ms ease;
}
.input-base::placeholder { color: hsl(var(--muted-foreground)); font-weight: 400; }
.input-base:focus {
    border-color: hsl(var(--ring) / 0.6);
    box-shadow: 0 0 0 3px hsl(var(--ring) / 0.12);
}

/* ==========================================================================
   Cards & surfaces
   ========================================================================== */
.card {
    background: hsl(var(--card));
    border: 1px solid hsl(var(--border));
    border-radius: calc(var(--radius) + 4px);
}
.card-header {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid hsl(var(--border));
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}
.stat-card {
    background: hsl(var(--card));
    border: 1px solid hsl(var(--border));
    border-radius: calc(var(--radius) + 4px);
    padding: 1.25rem;
}
.stat-value {
    font-size: 1.75rem;
    font-weight: 650;
    letter-spacing: -0.02em;
    color: hsl(var(--foreground));
    font-variant-numeric: tabular-nums;
}
.stat-label {
    font-size: 0.75rem;
    color: hsl(var(--muted-foreground));
    font-weight: 500;
}

/* ==========================================================================
   Badges
   ========================================================================== */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    border-radius: 999px;
    font-size: 0.6875rem;
    font-weight: 600;
    padding: 0.2rem 0.55rem;
    line-height: 1.4;
}
.badge-neutral { background: hsl(var(--muted)); color: hsl(var(--muted-foreground)); }
.badge-success { background: hsl(var(--success) / 0.1); color: hsl(var(--success)); }
.badge-destructive { background: hsl(var(--destructive) / 0.1); color: hsl(var(--destructive)); }
.badge-warning { background: hsl(var(--warning) / 0.12); color: hsl(var(--warning)); }
.badge-info { background: hsl(var(--info) / 0.1); color: hsl(var(--info)); }
.badge-purple { background: hsl(var(--brand) / 0.1); color: hsl(var(--brand)); }

/* ==========================================================================
   Tables
   ========================================================================== */
.table-shell thead th {
    position: sticky;
    top: 0;
    background: hsl(var(--background));
    border-bottom: 1px solid hsl(var(--border));
    z-index: 1;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: hsl(var(--muted-foreground));
}
.table-row-hover:hover { background: hsl(var(--accent) / 0.6); }

.scroll-shadow-x {
    background:
        linear-gradient(to right, hsl(var(--background)) 30%, rgba(255,255,255,0)),
        linear-gradient(to left, hsl(var(--background)) 30%, rgba(255,255,255,0)) right,
        linear-gradient(to right, rgba(0,0,0,0.05), rgba(0,0,0,0)) left,
        linear-gradient(to left, rgba(0,0,0,0.05), rgba(0,0,0,0)) right;
    background-repeat: no-repeat;
    background-size: 32px 100%, 32px 100%, 12px 100%, 12px 100%;
    background-attachment: local, local, scroll, scroll;
}

/* Keyboard shortcut hint chip */
kbd, .kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.3rem;
    height: 1.3rem;
    padding: 0 0.3rem;
    border-radius: 0.3rem;
    background: hsl(var(--muted));
    border: 1px solid hsl(var(--border));
    border-bottom-width: 2px;
    font-family: ui-monospace, monospace;
    font-size: 0.625rem;
    font-weight: 600;
    color: hsl(var(--muted-foreground));
}

/* Print Styles (PDF Export Optimization) */
@media print {
    body { background: #ffffff; }
    .no-print { display: none !important; }
    .pdf-container { padding: 20px !important; margin: 0 !important; box-shadow: none !important; border: none !important; }
}

.pdf-mode .hide-for-agency { display: none !important; }