/* =========================================
   1. DESIGN TOKENS — Workers premium (light + dark)
   ========================================= */

/* Typography families */
:root {
    --font: 'Satoshi', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --display: 'Clash Display', 'Satoshi', system-ui, sans-serif;

    /* Radii (shared) */
    --r-sm: 10px;
    --r-md: 14px;
    --r-lg: 20px;
    --r-xl: 28px;
    --r-full: 999px;

    /* Spacing (kept from legacy) */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.25rem;
    --spacing-xl: 2rem;

    --content-max-width: 1200px;
    --site-width-sm: 600px;
    --site-width-md: 1280px;

    /* Layout contract — single source of truth */
    --safe-b: env(safe-area-inset-bottom, 0px);
    --safe-t: env(safe-area-inset-top, 0px);
    --nav-h: 5.5rem;                              /* hauteur visuelle de la nav, safe-area exclue */
    --bottomnav-h: calc(var(--nav-h) + var(--safe-b));
    --header-h: calc(52px + var(--safe-t));       /* hauteur réelle du header (Header.css) */
    --gutter: clamp(14px, 4vw, 24px);

    /* z-index scale */
    --z-fab: 40;
    --z-actionbar: 90;
    --z-nav: 100;
    --z-sheet: 200;
    --z-celebration: 210;
    --z-toast: 300;
    --z-devtool: 9000;
    --z-popover: 40;
    --z-base: 1;
    --z-behind: -1;
}

@media (min-width: 768px) {
    :root {
        --nav-h: 3.5rem;
        --bottomnav-h: 0px;
        --header-h: calc(56px + 3.5rem);           /* header desktop + nav dans le flux sticky */
    }
}

/* LIGHT theme */
:root,
[data-theme="light"] {
    --bg: #F7F6FB;
    --surface: #FFFFFF;
    --surface-2: #F2F1F8;
    --surface-3: #EBE9F4;
    --border-c: #E7E4F0;
    --border-strong: #D6D2E4;
    --text: #16151D;
    --text-2: #56546A;
    --text-3: #807D93;
    --primary: #6A3EEB;
    --primary-hover: #5A30D6;
    --primary-press: #4E28BE;
    --primary-ink: #5A30D6;
    --primary-tint: #EEEAFD;
    --on-primary: #FFFFFF;
    --money: #059669;
    --money-ink: #047857;
    --money-tint: #E7F7F0;
    --opp: #B45309;
    --opp-solid: #F59E0B;
    --opp-tint: #FEF3E2;
    --danger: #DC2626;
    --danger-tint: #FCEBEC;
    --flexi: #475569;
    --flexi-tint: #EEF0F4;
    --grad: linear-gradient(135deg, #7B4DFF, #6A3EEB);
    --e1: 0 1px 2px rgba(20, 18, 40, .06);
    --e2: 0 6px 20px rgba(20, 18, 40, .08);
    --e3: 0 16px 40px rgba(20, 18, 40, .12);
    --glow: 0 8px 26px rgba(106, 62, 235, .26);

    /* shadcn tokens (HSL) — light. Namespaced (sc- prefix) to avoid colliding
       with the hex --primary/--text/etc. tokens above, which every hand-written
       page CSS file consumes directly via var(--primary). */
    --background: 240 25% 97%;
    --foreground: 245 15% 10%;
    --card: 0 0% 100%;
    --card-foreground: 245 15% 10%;
    --popover: 0 0% 100%;
    --popover-foreground: 245 15% 10%;
    --sc-primary: 253 82% 58%;
    --primary-foreground: 0 0% 100%;
    --secondary: 249 30% 95%;
    --secondary-foreground: 245 15% 10%;
    --muted: 249 30% 95%;
    --muted-foreground: 249 12% 40%;
    --accent: 253 88% 96%;
    --accent-foreground: 253 60% 40%;
    --destructive: 0 74% 51%;
    --destructive-foreground: 0 0% 100%;
    --border: 250 24% 91%;
    --input: 249 30% 95%;
    --ring: 253 82% 58%;
    --radius: 14px;
}

/* DARK theme */
[data-theme="dark"] {
    --bg: #0B0B12;
    --surface: #15141E;
    --surface-2: #1D1B28;
    --surface-3: #262333;
    --border-c: rgba(255, 255, 255, .08);
    --border-strong: rgba(255, 255, 255, .15);
    --text: #FFFFFF;
    --text-2: #B7B4C9;
    --text-3: #847F9C;
    --primary: #7B61FF;
    --primary-hover: #8E77FF;
    --primary-press: #6C4FF5;
    --primary-ink: #C3B4FF;
    --primary-tint: rgba(123, 97, 255, .16);
    --on-primary: #FFFFFF;
    --money: #34E0A8;
    --money-ink: #34E0A8;
    --money-tint: rgba(52, 224, 168, .14);
    --opp: #FBBF24;
    --opp-solid: #FBBF24;
    --opp-tint: rgba(251, 191, 36, .14);
    --danger: #FF5B60;
    --danger-tint: rgba(255, 91, 96, .14);
    --flexi: #CBD5E1;
    --flexi-tint: rgba(148, 163, 184, .16);
    --grad: linear-gradient(135deg, #7B61FF, #5E2BFF, #9F7CFF);
    --e1: 0 1px 2px rgba(0, 0, 0, .4);
    --e2: 0 8px 24px rgba(0, 0, 0, .5);
    --e3: 0 20px 48px rgba(0, 0, 0, .6);
    --glow: 0 0 30px rgba(123, 97, 255, .42);

    /* shadcn tokens (HSL) — dark. Namespaced (sc- prefix), see light block above. */
    --background: 250 20% 6%;
    --foreground: 0 0% 100%;
    --card: 249 22% 10%;
    --card-foreground: 0 0% 100%;
    --popover: 249 22% 10%;
    --popover-foreground: 0 0% 100%;
    --sc-primary: 252 100% 69%;
    --primary-foreground: 0 0% 100%;
    --secondary: 250 12% 16%;
    --secondary-foreground: 0 0% 100%;
    --muted: 250 12% 16%;
    --muted-foreground: 252 8% 65%;
    --accent: 252 100% 69%;
    --accent-foreground: 252 100% 85%;
    --destructive: 0 100% 68%;
    --destructive-foreground: 0 0% 100%;
    --border: 250 15% 20%;
    --input: 250 12% 16%;
    --ring: 252 100% 69%;
}

/* =========================================
   LEGACY ALIASES — do not break existing page CSS
   ========================================= */
:root,
[data-theme="light"],
[data-theme="dark"] {
    --primary-purple: var(--primary);
    --primary-purple-dark: var(--primary-hover);
    --accent-purple: var(--primary-ink);
    --bg-body: var(--bg);
    --bg-surface: var(--surface);
    --text-dark: var(--text);
    --text-grey: var(--text-2);
    --text-white: #ffffff;
    --menu-bg: var(--surface-2);
    --menu-text-inactive: var(--text-3);
    --menu-text-active: var(--primary);
    --menu-bg-active: var(--surface);
    --radius-sm: var(--r-sm);
    --radius-md: var(--r-md);
    --radius-lg: var(--r-lg);
    --radius-full: var(--r-full);
    --shadow-sm: var(--e1);
    --shadow-md: var(--e2);

    /* Tag color aliases (green→money, orange/yellow→opp, blue→flexi, purple→primary) */
    --tag-green-bg: var(--money-tint);
    --tag-green-text: var(--money-ink);
    --tag-green-light-bg: var(--money-tint);
    --tag-green-light-text: var(--money-ink);
    --tag-orange-bg: var(--opp-tint);
    --tag-orange-text: var(--opp);
    --tag-yellow-bg: var(--opp-tint);
    --tag-yellow-text: var(--opp);
    --tag-blue-bg: var(--flexi-tint);
    --tag-blue-text: var(--flexi);
    --tag-purple-bg: var(--primary-tint);
    --tag-purple-text: var(--primary-ink);
}

/* Theme transition (respect reduced-motion) */
html {
    transition: background-color 0.35s ease, color 0.35s ease;
}
@media (prefers-reduced-motion: reduce) {
    html { transition: none; }
}

/* Tabular numerics for money amounts */
.amount,
.tnum {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: var(--font);
}

body {
    background-color: var(--bg);
    color: var(--text);
    min-height: 100dvh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* =========================================
   2. RESPONSIVE APP CONTAINER
   ========================================= */
.app-container {
    width: 100%;
    max-width: var(--content-max-width);
    margin-inline: auto;
    background-color: var(--bg-body);
    min-height: 100dvh;
    position: relative;
    display: flex;
    flex-direction: column;
}


/* =========================================
   3. TYPOGRAPHY UTILITIES
   ========================================= */
h1,
h2,
h3 {
    color: var(--text);
    font-family: var(--display);
    font-weight: 600;
    letter-spacing: -0.01em;
    margin-bottom: 1rem;
}

.text-sm {
    font-size: 0.875rem;
}

.text-xs {
    font-size: 0.75rem;
}

.text-muted {
    color: var(--text-grey);
}

.font-bold {
    font-weight: 700;
}

.font-semibold {
    font-weight: 600;
}

a {
    text-decoration: none;
    color: inherit;
}

li {
    list-style: none;
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 4px;
}

::-webkit-scrollbar-track {
    background: var(--bg-body);
}

::-webkit-scrollbar-thumb {
    background: rgba(106, 62, 235, 0.3);
    border-radius: var(--radius-full);
}

/* Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

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

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in {
    animation: fadeIn 0.3s ease-out;
}

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

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.spin {
    animation: spin 0.8s linear infinite;
    display: inline-block;
}

/* =========================================
   GLOBAL LAYOUT STYLES
   ========================================= */

#root {
    width: 100%;
}

/* App Content Container */
.app-content {
    padding: var(--spacing-lg);
    flex: 1;
    display: flex;
    flex-direction: column;
    padding-top: 1.5rem;
    /* Seule réservation de la hauteur du menu de tout le projet */
    padding-bottom: calc(var(--bottomnav-h) + 1.5rem);
}

/* Desktop: pas de padding bottom car la nav est en haut */
@media (min-width: 768px) {
    .app-content {
        padding-top: 1.5rem;
        padding-bottom: 2rem;
    }
}

/* Content Wrapper with Padding */
.content-padded-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl);
    max-width: var(--site-width-md);
    margin: 0 auto;
    width: 100%;
}

/* Page Header Row - Responsive */
.page-header-row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 1rem;
    gap: 0.75rem;
    max-width: var(--site-width-md);
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

@media (min-width: 768px) {
    .page-header-row {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
}

.page-header-row h1 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-dark);
}

/* Header Actions */
.header-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* Filter Button */
.btn-filter {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 99px;
    padding: 0.5rem 1rem;
    font-family: inherit;
    color: var(--text-grey);
    font-size: 0.85rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-filter:hover {
    border-color: var(--primary-purple);
    color: var(--primary-purple);
}

/* View Toggle Buttons */
.view-toggles {
    display: flex;
    gap: 0.75rem;
    color: var(--text-grey);
}

.view-toggles button {
    background: none;
    border: none;
    cursor: pointer;
    color: inherit;
    padding: 0.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s ease;
}

.view-toggles button:hover,
.view-toggles button.active {
    color: var(--primary-purple);
}

/* Company Logo */
.company-logo {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}

.company-logo.dark {
    background: #0f172a;
}

/* =========================================
   ANIMATIONS
   ========================================= */

@keyframes logo-spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.logo {
    height: 6em;
    padding: 1.5em;
    will-change: filter;
    transition: filter 300ms;
}

.logo:hover {
    filter: drop-shadow(0 0 2em #646cffaa);
}

.logo.react:hover {
    filter: drop-shadow(0 0 2em #61dafbaa);
}

@media (prefers-reduced-motion: no-preference) {
    a:nth-of-type(2) .logo {
        animation: logo-spin infinite 20s linear;
    }
}

.user-img img {
    width: 100%;
    border-radius: 50%;
    display: block;
}



#root .no-result {
    color: var(--text-grey);
    padding: 1rem 0.25rem;
    text-align: center;
    font-size: 0.875rem;
}

.grecaptcha-badge {
    visibility: hidden !important;
}

/* =========================================
   6. PREMIUM TOAST NOTIFICATION SYSTEM
   ========================================= */
.toast-viewport {
    position: fixed !important;
    top: 1.5rem !important;
    right: 1.5rem !important;
    bottom: auto !important;
    left: auto !important;
    z-index: var(--z-toast) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.75rem !important;
    width: 100% !important;
    max-width: 380px !important;
    padding: 0 !important;
    margin: 0 !important;
    pointer-events: none !important;
}

@media (max-width: 767px) {
    .toast-viewport {
        left: 12px !important;
        right: 12px !important;
        top: calc(12px + var(--safe-t)) !important;
        max-width: none !important;
        width: auto !important;
    }
}

.toast-root {
    pointer-events: auto;
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    width: 100%;
    padding: 1rem 1.25rem;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid #e2e8f0;
    border-radius: 1rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -4px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    transition: transform 0.2s ease, opacity 0.2s ease, box-shadow 0.2s ease;
}

.toast-root[data-state="open"] {
    animation: toastSlideIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.toast-root[data-state="closed"] {
    animation: toastSlideOut 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.toast-root[data-swipe="move"] {
    transform: translateX(var(--radix-toast-swipe-move-x));
    transition: none;
}

.toast-root[data-swipe="cancel"] {
    transform: translateX(0);
    transition: transform 200ms ease-out;
}

.toast-root[data-swipe="end"] {
    animation: toastSwipeOut 150ms ease-out forwards;
}

@keyframes toastSlideIn {
    from {
        opacity: 0;
        transform: translateX(2rem) scale(0.96);
    }
    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

@keyframes toastSlideOut {
    from {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
    to {
        opacity: 0;
        transform: translateX(2rem) scale(0.96);
    }
}

@keyframes toastSwipeOut {
    from {
        transform: translateX(var(--radix-toast-swipe-end-x));
    }
    to {
        opacity: 0;
        transform: translateX(100%);
    }
}

.toast-root.destructive {
    border-left: 4px solid #ef4444;
}

.toast-root:not(.destructive) {
    border-left: 4px solid var(--primary-purple);
}

.toast-title {
    font-size: 0.9rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 0.25rem;
    text-align: left;
}

.toast-description {
    font-size: 0.8rem;
    color: #64748b;
    font-weight: 500;
    line-height: 1.4;
    text-align: left;
}

.toast-close {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    background: transparent;
    border: none;
    color: #94a3b8;
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 50%;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.toast-close:hover {
    background: #f1f5f9;
    color: #0f172a;
}

.unverified-email a.align-center{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}
.unverified-email span.note-info + a.align-center{
    border: 1px solid #ccc;
    border-radius: 50px;
    padding: 0.8em 1em;
    margin-block: 1rem;
    line-height: 1;
}
/* ── 404 page ─────────────────────────────────────────────────────────── */
.wg-notfound {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 2.5rem 1.25rem 3rem;
  gap: 0.5rem;
}
.wg-notfound__badge {
  width: 56px; height: 56px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--primary-tint); color: var(--primary-ink);
  margin-bottom: 0.5rem;
}
.wg-notfound__title { font-size: clamp(28px, 8vw, 36px); font-weight: 800; color: var(--text); margin: 0; }
.wg-notfound__message { color: var(--text-2); margin: 0; font-size: 1rem; }
.wg-notfound__path {
  font-size: 0.75rem; color: var(--text-3, var(--text-2));
  background: var(--surface-2); border: 1px solid var(--border-c);
  border-radius: var(--r-full, 999px); padding: 0.15rem 0.6rem; margin: 0.25rem 0 0.75rem;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wg-notfound__cta {
  background: var(--primary); color: #fff; border: none;
  border-radius: var(--r-full, 999px); padding: 0.7rem 1.4rem;
  font-weight: 600; cursor: pointer;
}
.wg-notfound__suggest { margin: 1.75rem 0 0.5rem; font-size: 0.85rem; color: var(--text-2); }
.wg-notfound__links {
  display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center;
}
.wg-notfound__link {
  display: inline-flex; align-items: center; gap: 0.4rem;
  background: var(--surface-2); color: var(--text);
  border: 1px solid var(--border-c); border-radius: var(--r-full, 999px);
  padding: 0.5rem 0.9rem; font-size: 0.875rem; cursor: pointer;
}
.wg-notfound__link:hover { background: var(--primary-tint); color: var(--primary-ink); }