/* =============================================================
   CareerClub — app.css
   Plain CSS: no Tailwind compilation required.
   Design tokens, base resets, and custom utilities only.
   Tailwind utility classes (flex, px-6, etc.) are provided
   by the Tailwind CDN script tag in layouts.
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

/* ── Design Tokens ─────────────────────────────────────────── */
:root {
    --brand-red: 356 81% 49%;
    --brand-red-dark: 356 81% 42%;
    --brand-red-light: 356 81% 96%;
    --background: 0 0% 100%;
    --foreground: 220 14% 10%;
    --card: 0 0% 100%;
    --card-foreground: 220 14% 10%;
    --popover: 0 0% 100%;
    --popover-foreground: 220 14% 10%;
    --primary: 356 81% 49%;
    --primary-foreground: 0 0% 100%;
    --secondary: 220 14% 96%;
    --secondary-foreground: 220 14% 10%;
    --muted: 220 14% 96%;
    --muted-foreground: 220 9% 46%;
    --accent: 356 81% 96%;
    --accent-foreground: 356 81% 42%;
    --destructive: 0 84% 60%;
    --destructive-foreground: 0 0% 100%;
    --border: 220 13% 91%;
    --input: 220 13% 91%;
    --ring: 356 81% 49%;
    --radius: 0.625rem;
    --surface-elevated: 0 0% 100%;
    --surface-subtle: 220 20% 98%;
    --surface-muted: 220 14% 96%;
    --gradient-hero: linear-gradient(135deg, hsl(356 81% 49%), hsl(356 81% 38%));
    --gradient-subtle: linear-gradient(180deg, hsl(220 20% 99%), hsl(220 20% 97%));
    --gradient-warm: linear-gradient(135deg, hsl(356 81% 97%), hsl(30 100% 98%));
    --shadow-sm: 0 1px 2px 0 hsl(220 14% 10% / 0.03);
    --shadow-md: 0 4px 6px -1px hsl(220 14% 10% / 0.05), 0 2px 4px -2px hsl(220 14% 10% / 0.03);
    --shadow-lg: 0 10px 15px -3px hsl(220 14% 10% / 0.05), 0 4px 6px -4px hsl(220 14% 10% / 0.03);
    --shadow-xl: 0 20px 25px -5px hsl(220 14% 10% / 0.06), 0 8px 10px -6px hsl(220 14% 10% / 0.03);
    --shadow-card: 0 1px 3px 0 hsl(220 14% 10% / 0.04), 0 1px 2px -1px hsl(220 14% 10% / 0.04);
    --shadow-card-hover: 0 10px 40px -10px hsl(220 14% 10% / 0.08);
    --sidebar-background: 220 20% 98%;
    --sidebar-foreground: 220 14% 10%;
    --sidebar-primary: 356 81% 49%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 356 81% 96%;
    --sidebar-accent-foreground: 356 81% 42%;
    --sidebar-border: 220 13% 91%;
    --sidebar-ring: 356 81% 49%;
    /* Resolved colour values for Tailwind CDN config compatibility */
    --color-primary: hsl(356 81% 49%);
    --color-primary-foreground: hsl(0 0% 100%);
    --color-background: hsl(0 0% 100%);
    --color-foreground: hsl(220 14% 10%);
    --color-border: hsl(220 13% 91%);
    --color-input: hsl(220 13% 91%);
    --color-ring: hsl(356 81% 49%);
    --color-card: hsl(0 0% 100%);
    --color-card-foreground: hsl(220 14% 10%);
    --color-muted: hsl(220 14% 96%);
    --color-muted-foreground: hsl(220 9% 46%);
    --color-accent: hsl(356 81% 96%);
    --color-accent-foreground: hsl(356 81% 42%);
    --color-destructive: hsl(0 84% 60%);
    --color-destructive-foreground: hsl(0 0% 100%);
    --color-surface-elevated: hsl(0 0% 100%);
    --color-surface-subtle: hsl(220 20% 98%);
    --color-surface-muted: hsl(220 14% 96%);
    --color-secondary: hsl(220 14% 96%);
    --color-secondary-foreground: hsl(220 14% 10%);
    --color-popover: hsl(0 0% 100%);
    --color-popover-foreground: hsl(220 14% 10%);
}

/* ── Base Resets ───────────────────────────────────────────── */
*, *::before, *::after {
    box-sizing: border-box;
    border-color: hsl(var(--border));
}

html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

body {
    background-color: hsl(var(--background));
    color: hsl(var(--foreground));
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    margin: 0;
}

input:not([type='checkbox']):not([type='radio']):not([type='range']):not([type='color']),
select,
textarea {
    width: 100%;
    border-radius: 0.5rem;
    border: 1px solid hsl(var(--input));
    background-color: hsl(var(--background));
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    outline: none;
    transition: border-color 0.15s ease;
    font-family: inherit;
}

input:not([type='checkbox']):not([type='radio']):not([type='range']):not([type='color']):focus,
select:focus,
textarea:focus {
    border-color: hsl(var(--ring));
}

dialog {
    inset: 0;
    margin: auto;
}

/* ── Custom Utilities ───────────────────────────────────────── */
.container {
    width: 100%;
    margin-inline: auto;
    padding-inline: 2rem;
}

@media (min-width: 1400px) {
    .container {
        max-width: 1400px;
    }
}

.gradient-hero {
    background: var(--gradient-hero);
}

.gradient-subtle {
    background: var(--gradient-subtle);
}

.gradient-warm {
    background: var(--gradient-warm);
}

.shadow-card {
    box-shadow: var(--shadow-card);
}

.shadow-card-hover {
    box-shadow: var(--shadow-card-hover);
}

.surface-elevated {
    background-color: hsl(var(--surface-elevated));
}

.surface-subtle {
    background-color: hsl(var(--surface-subtle));
}

.surface-muted {
    background-color: hsl(var(--surface-muted));
}

/* ── Animations ─────────────────────────────────────────────── */
.animate-fade-in {
    animation: fadeIn 0.5s ease-out forwards;
}

.animate-slide-up {
    animation: slideUp 0.6s ease-out forwards;
}

.animate-scale-in {
    animation: scaleIn 0.4s ease-out forwards;
}

.animate-pulse-soft {
    animation: pulseSoft 2s ease-in-out infinite;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes slideUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes scaleIn {
    from { opacity: 0; transform: scale(0.95); }
    to   { opacity: 1; transform: scale(1); }
}

@keyframes pulseSoft {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.7; }
}

/* ── Sidebar Collapse Transitions ───────────────────────────────── */
[data-sidebar] {
    transition: width 200ms ease-in-out;
}

[data-nav-label] {
    transition: opacity 150ms ease, width 150ms ease;
    white-space: nowrap;
}

[data-collapse-icon] {
    transition: transform 200ms ease-in-out;
}

/* Tooltip shown on collapsed nav items when hovered */
.sidebar-collapsed [data-sidebar] .nav-item {
    position: relative;
}

.sidebar-collapsed [data-sidebar] .nav-item:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    left: calc(100% + 0.75rem);
    top: 50%;
    transform: translateY(-50%);
    padding: 0.3rem 0.75rem;
    background: hsl(220 14% 12%);
    color: hsl(0 0% 100%);
    font-size: 0.75rem;
    font-weight: 500;
    border-radius: 0.375rem;
    white-space: nowrap;
    z-index: 200;
    pointer-events: none;
    box-shadow: 0 4px 6px -1px hsl(220 14% 10% / 0.2);
}