@import "./vendor/phosphor-duotone.css";
@import "./vendor/phosphor-regular.css";

@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
    --child-avatar-male-bg: #eef4ff;
    --child-avatar-female-bg: #fdeef5;
    --app-info-bg: #eff6ff;
    --app-info-border: #bfdbfe;
    --app-info-text: #1e3a8a;
    --app-info-icon: #2563eb;
    --landing-ink: #15213e;
    --landing-muted: #6e7690;
    --landing-purple: #7146d8;
    --landing-purple-dark: #5830bc;
    --landing-pink: #f4869e;
    --landing-lilac: #f5f1ff;
    --landing-line: #e9e8f1;

    --home-green: #22a97c;
    --home-green-dark: #0e7c5a;
    --home-green-surface: #eefbf5;
    --home-amber-dark: #8a5a17;
    --home-amber-surface: #fdf1e1;

    --app-ink-muted: #4a466a;
    --app-purple-accent: #5b48c0;
    --app-lilac-bg: #f8f6fe;
    --app-lilac-strong-bg: #f4f2fe;
    --app-border-lilac: #e1ddf2;

    --btn-radius: 0.55rem;
    --btn-height-md: 2.75rem;
    --btn-height-sm: 2.1rem;
    --btn-danger-bg: #fdf1f0;
    --btn-danger-color: #b8291e;

    --planning-app-bg: #f7f6fc;
    --planning-surface: #fff;
    --planning-surface-soft: #fbfafe;
    --planning-surface-soft-2: #fcfbfe;
    --planning-surface-soft-3: #fdfcff;
    --planning-border: #edeaf7;
    --planning-border-control: #e1ddf2;
    --planning-border-grid: #f1eef9;
    --planning-border-strong: #e9e4f8;
    --planning-border-hover: #c9bef5;
    --planning-text: #1c1b29;
    --planning-text-secondary: #3b3757;
    --planning-text-secondary-2: #4a466a;
    --planning-text-secondary-3: #6b6788;
    --planning-text-tertiary: #7e7896;
    --planning-text-tertiary-2: #8b85a8;
    --planning-text-weak: #a9a4bf;
    --planning-text-weak-2: #b3adc7;
    --planning-text-weak-3: #c0bad6;
    --planning-purple: #6d28d9;
    --planning-purple-hover: #5b21b6;
    --planning-purple-dark: #4c1d95;
    --planning-purple-surface: #f1eefe;
    --planning-purple-surface-2: #f4f1fe;
    --planning-purple-surface-3: #f8f6fe;
    --planning-purple-surface-4: #f1eef9;
    --planning-purple-border: #dcd3f7;
    --planning-pink: #e11d74;
    --planning-pink-dark: #be1f62;
    --planning-pink-darker: #9d174d;
    --planning-pink-surface: #fdf1f6;
    --planning-pink-surface-2: #fbf3f7;
    --planning-pink-border: #f7ddea;
    --planning-orange: #ea8a3c;
    --planning-orange-dark: #9a3412;
    --planning-orange-surface: #fff6ec;
    --planning-orange-border: #fbdcc4;
    --planning-green: #15803d;
    --planning-green-dark: #166534;
    --planning-green-surface: #eef7f1;
    --planning-green-border: #bfe3cd;
    --contract-type-blue: #1d4ed8;
    --contract-type-blue-surface: #eff6ff;
    --contract-type-blue-border: #bfdbfe;
    --planning-blue: #2563eb;
    --planning-yellow: #a16207;
    --planning-yellow-dark: #713f12;
    --planning-yellow-surface: #fefce8;
    --planning-yellow-border: #fde68a;
    --planning-red: #dc2626;
    --planning-red-dark: #991b1b;
    --planning-red-surface: #fef2f2;
    --planning-red-border: #fecaca;
    --planning-lavender: #9c8ce0;
    --planning-lavender-surface: #fcfbfe;
    --planning-lavender-border: #e4def7;
    --planning-overlay: rgba(28, 27, 41, .42);
    --planning-hour-px: 54px;
}

.landing-page {
    background: #fff;
    color: var(--landing-ink);
    font-family: "Trebuchet MS", "Segoe UI", sans-serif;
    overflow-x: hidden;
}

.landing-page a {
    color: inherit;
    text-decoration: none;
}

.landing-header {
    align-items: center;
    display: flex;
    gap: 2rem;
    justify-content: space-between;
    margin: 0 auto;
    padding: 1.4rem 2rem;
}

.landing-brand {
    align-items: center;
    color: #273452;
    display: inline-flex;
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.04em;
    white-space: nowrap;
}

.landing-brand>span:last-child>span {
    color: #ee7290;
}

.landing-brand-mark {
    color: #f285a2;
    font-size: 1.45rem;
    margin-right: 0.25rem;
    transform: rotate(-15deg);
}

.landing-logo {
    display: block;
    height: auto;
    max-width: 178px;
}

.landing-nav {
    display: flex;
    flex: 1;
    gap: 2.6rem;
    justify-content: center;
}

.landing-nav a,
.landing-header-action {
    color: #28334e;
    font-size: 0.78rem;
    font-weight: 700;
    transition: color 180ms ease;
}

.landing-nav a:hover,
.landing-footer a:hover {
    color: var(--landing-purple);
}

.landing-header-action {
    background: #fff;
    border: 1px solid #9d83ea;
    border-radius: 0.35rem;
    color: var(--landing-purple-dark);
    cursor: pointer;
    padding: 0.65rem 1.15rem;
}

.landing-header-actions {
    display: flex;
    gap: 0.65rem;
}

.landing-header-register {
    background: var(--landing-purple);
    border-color: var(--landing-purple);
    color: #fff;
}

.landing-hero {
    background: radial-gradient(circle at 5% 45%, #fbf8ff 0, #fff 43%), radial-gradient(circle at 98% 55%, #fbf5ff 0, #fff 42%);
    min-height: 560px;
    overflow: hidden;
    padding: 4rem max(2rem, calc((100% - 1110px) / 2)) 2rem;
    position: relative;
}

.landing-hero::before,
.landing-hero::after {
    border: 1px solid #f1edff;
    border-radius: 50%;
    content: "";
    height: 480px;
    position: absolute;
    width: 720px;
}

.landing-hero::before {
    left: -390px;
    top: 230px;
}

.landing-hero::after {
    right: -470px;
    top: -170px;
}

.landing-hero-copy,
.landing-signup-card {
    position: relative;
    z-index: 2;
}

.landing-hero-copy {
    max-width: 580px;
}

.landing-eyebrow {
    background: #f0eaff;
    border-radius: 1rem;
    color: var(--landing-purple);
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    padding: 0.45rem 0.9rem;
}

.landing-hero h1 {
    font-size: clamp(2.5rem, 4.8vw, 4.25rem);
    letter-spacing: -0.055em;
    line-height: 1.14;
    margin: 1.25rem 0;
}

.landing-hero h1 em,
.landing-section h2 em,
.landing-card-heading em {
    color: var(--landing-pink);
    font-style: normal;
}

.landing-hero-intro {
    color: #404962;
    font-size: 0.9rem;
    line-height: 1.65;
}

.landing-check-list {
    display: grid;
    gap: 0.8rem;
    list-style: none;
    margin: 1.7rem 0;
    padding: 0;
}

.landing-check-list li {
    align-items: center;
    color: #4b536a;
    display: flex;
    font-size: 0.86rem;
    gap: 0.65rem;
}

.landing-check-list li i {
    align-items: center;
    border-radius: 50%;
    color: var(--landing-purple);
    display: inline-flex;
    font-size: 1.08rem;
    font-weight: 800;
    height: 1.15rem;
    justify-content: center;
    width: 1.15rem;
}

.landing-primary-button {
    background: linear-gradient(110deg, #7146d8, #6231c6);
    border: 0;
    border-radius: 0.35rem;
    box-shadow: 0 0.7rem 1.4rem #6e46d82c;
    color: white;
    display: inline-block;
    font-size: 0.78rem;
    font-weight: 700;
    padding: 0.85rem 1.6rem;
    transition: transform 180ms ease, box-shadow 180ms ease;
}

.landing-primary-button:hover {
    box-shadow: 0 0.9rem 1.6rem #6e46d84a;
    color: white;
    transform: translateY(-2px);
}

.landing-secondary-button {
    background: #fff;
    border: 1px solid #9d83ea;
    border-radius: 0.35rem;
    color: var(--landing-purple-dark);
    display: inline-block;
    font-size: 0.78rem;
    font-weight: 700;
    margin-top: 0.6rem;
    padding: 0.85rem 1.6rem;
    transition: background 180ms ease;
}

.landing-secondary-button:hover {
    background: var(--landing-lilac);
}

.landing-hero-button span {
    font-size: 1rem;
    margin-left: 0.7rem;
}

.landing-signup-card {
    background: #fff;
    border-radius: 0.7rem;
    box-shadow: 0 1rem 2.8rem #3c2a7620;
    max-width: 350px;
    padding: 1.6rem 1.35rem 1.3rem;
    position: absolute;
    right: max(2rem, calc((100% - 1110px) / 2));
    top: 3.2rem;
    width: 31%;
}

.landing-card-heading {
    text-align: center;
}

.landing-card-heading h2 {
    font-size: 1.35rem;
    margin: 0;
}

.landing-card-heading p {
    color: #8a8ea0;
    font-size: 0.75rem;
    margin: 0.5rem 0 0.8rem;
}

.landing-card-heading>span {
    background: var(--landing-purple);
    display: inline-block;
    height: 2px;
    width: 2.4rem;
}

.landing-google-button,
.landing-input-preview {
    align-items: center;
    border: 1px solid #e5e5ee;
    border-radius: 0.32rem;
    color: #4e566d;
    display: flex;
    font-size: 0.75rem;
    height: 2.35rem;
    justify-content: center;
    margin-top: 0.8rem;
}

.landing-google-button strong {
    color: #4285f4;
    font-size: 1rem;
    margin-right: 0.55rem;
}

.landing-google-button img {
    height: 1rem;
    margin-right: 0.55rem;
    width: 1rem;
}

.landing-divider {
    color: #9da1b0;
    font-size: 0.75rem;
    margin: 0.65rem 0;
    text-align: center;
}

.landing-input-preview {
    justify-content: flex-start;
    padding: 0 0.75rem;
}

.landing-password-preview {
    justify-content: space-between;
}

.landing-password-preview span {
    color: #9aa0b0;
    font-size: 0.75rem;
}

.landing-consent {
    color: #85899a;
    font-size: 0.75rem;
    line-height: 1.6;
    margin: 0.8rem 0;
    padding-left: 1.4rem;
    position: relative;
}

.landing-consent a {
    color: var(--landing-purple);
    font-weight: 700;
}

.landing-checkbox {
    border: 1px solid #adb0bd;
    border-radius: 0.18rem;
    height: 0.75rem;
    left: 0;
    position: absolute;
    top: 0.1rem;
    width: 0.75rem;
}

.landing-full-button {
    text-align: center;
    width: 100%;
}

.landing-signin-prompt {
    color: #8c90a0;
    font-size: 0.75rem;
    text-align: center;
}

.landing-signin-prompt a {
    color: var(--landing-purple);
    font-weight: 700;
}

.landing-hero-scene {
    bottom: 0;
    height: 245px;
    left: 52%;
    position: absolute;
    width: 450px;
    z-index: 1;
}

.landing-wall-art {
    align-items: center;
    background: #fff;
    border: 0.5rem solid #f2ecff;
    box-shadow: 0 0 0 1px #ded4fa;
    color: #f29aaa;
    display: flex;
    font-size: 2rem;
    height: 4rem;
    justify-content: center;
    position: absolute;
    width: 4rem;
}

.landing-wall-art-one {
    left: 245px;
    top: 35px;
    transform: rotate(-4deg);
}

.landing-wall-art-two {
    left: 325px;
    top: 0;
    transform: rotate(8deg);
}

.landing-plant,
.landing-benefit-plant {
    bottom: 0;
    height: 105px;
    position: absolute;
    width: 70px;
}

.landing-plant {
    left: 52px;
}

.landing-plant b,
.landing-benefit-plant b {
    background: #a777d4;
    border-radius: 0 0 0.65rem 0.65rem;
    bottom: 0;
    height: 37px;
    left: 17px;
    position: absolute;
    transform: perspective(3rem) rotateX(-8deg);
    width: 42px;
}

.landing-plant i,
.landing-benefit-plant i {
    background: #84c49c;
    border-radius: 100% 0 100% 0;
    bottom: 32px;
    height: 58px;
    position: absolute;
    width: 24px;
}

.landing-plant i:nth-child(1),
.landing-benefit-plant i:nth-child(1) {
    left: 12px;
    transform: rotate(-28deg);
}

.landing-plant i:nth-child(2),
.landing-benefit-plant i:nth-child(2) {
    left: 30px;
    transform: rotate(4deg);
}

.landing-plant i:nth-child(3),
.landing-benefit-plant i:nth-child(3) {
    left: 44px;
    transform: rotate(35deg);
}

.landing-woman {
    bottom: 0;
    height: 185px;
    left: 155px;
    position: absolute;
    width: 155px;
}

.landing-woman-head {
    background: #f4b28f;
    border-radius: 50%;
    height: 70px;
    left: 52px;
    position: absolute;
    top: 18px;
    width: 60px;
    z-index: 2;
}

.landing-woman-head::before {
    background: #55333a;
    border-radius: 50% 50% 35% 40%;
    content: "";
    height: 68px;
    left: -4px;
    position: absolute;
    top: -13px;
    width: 68px;
    z-index: -1;
}

.landing-woman-body {
    background: #9c83dd;
    border-radius: 70px 70px 0 0;
    bottom: 0;
    height: 115px;
    left: 25px;
    position: absolute;
    width: 115px;
}

.landing-woman-arm {
    background: #f4b28f;
    border-radius: 20px;
    bottom: 31px;
    height: 67px;
    left: 101px;
    position: absolute;
    transform: rotate(-28deg);
    width: 18px;
}

.landing-toys {
    bottom: 0;
    left: 275px;
    position: absolute;
    width: 110px;
}

.landing-toys span {
    background: #f7bf85;
    border-radius: 0.2rem;
    bottom: 0;
    height: 30px;
    position: absolute;
    width: 28px;
}

.landing-toys span:nth-child(2) {
    background: #f5a1ad;
    bottom: 28px;
    height: 22px;
    left: 32px;
    width: 38px;
}

.landing-toys span:nth-child(3) {
    background: #9ac7f3;
    bottom: 50px;
    height: 19px;
    left: 42px;
    width: 30px;
}

.landing-toys b {
    background: #f6cf72;
    border-radius: 0.3rem 0.3rem 0 0;
    bottom: 68px;
    height: 15px;
    left: 48px;
    position: absolute;
    width: 18px;
}

.landing-section {
    margin: 0 auto;
    max-width: 1110px;
    padding: 4.8rem 2rem;
}

.landing-section>h2 {
    font-size: clamp(1.45rem, 2.5vw, 2rem);
    letter-spacing: -0.04em;
    margin: 0 0 2.6rem;
    text-align: center;
}

.landing-section>h2 em {
    color: var(--landing-purple);
}

.landing-feature-grid {
    display: grid;
    gap: 1.2rem;
    grid-template-columns: repeat(5, 1fr);
}

.landing-feature-card {
    text-align: center;
}

.landing-feature-icon,
.landing-step-icon {
    align-items: center;
    border-radius: 50%;
    display: inline-flex;
    font-size: 1.8rem;
    height: 4rem;
    justify-content: center;
    width: 4rem;
}

.landing-icon-orange {
    background: #fff1e5;
    color: #ff914c;
}

.landing-icon-blue {
    background: #eef7ff;
    color: #67a7f6;
}

.landing-icon-green {
    background: #eafaf2;
    color: #50c795;
}

.landing-icon-purple {
    background: #f2edff;
    color: #9570df;
}

.landing-icon-pink {
    background: #fff0f4;
    color: #ef829d;
}

.landing-feature-card h3,
.landing-step h3 {
    font-size: 0.84rem;
    margin: 1rem 0 0.45rem;
}

.landing-feature-card p,
.landing-step p {
    color: var(--landing-muted);
    font-size: 0.75rem;
    line-height: 1.55;
    margin: 0 auto;
    max-width: 150px;
}

.landing-how {
    background: var(--landing-lilac);
    border-radius: 0.45rem;
    max-width: 1110px;
    padding-bottom: 3.4rem;
    padding-top: 3rem;
}

.landing-step-grid {
    display: grid;
    gap: 2.5rem;
    grid-template-columns: repeat(4, 1fr);
}

.landing-step {
    position: relative;
    text-align: center;
}

.landing-step:not(:last-child)::after {
    border-top: 2px dashed #dcd5f4;
    content: "";
    left: calc(50% + 3.2rem);
    position: absolute;
    top: 2rem;
    width: calc(100% - 4rem);
}

.landing-step-number {
    background: #a17be9;
    border-radius: 50%;
    color: #fff;
    font-size: 0.75rem;
    height: 1.2rem;
    left: calc(50% - 3.3rem);
    line-height: 1.2rem;
    position: absolute;
    top: -0.35rem;
    width: 1.2rem;
    z-index: 2;
}

.landing-step-icon {
    height: 4rem;
    width: 4rem;
}

.landing-benefits {
    align-items: center;
    display: grid;
    gap: 5rem;
    grid-template-columns: 1fr 1fr;
}

.landing-benefit-scene {
    height: 270px;
    position: relative;
}

.landing-benefit-frame {
    background: #fff;
    border: 0.45rem solid #f2ecff;
    box-shadow: 0 0 0 1px #ded4fa;
    color: #f29aaa;
    font-size: 2rem;
    height: 4.5rem;
    position: absolute;
    text-align: center;
    width: 4.5rem;
}

.landing-benefit-frame-one {
    left: 25%;
    top: 20px;
    transform: rotate(-5deg);
}

.landing-benefit-frame-two {
    left: 48%;
    top: 5px;
    transform: rotate(5deg);
}

.landing-benefit-woman {
    bottom: 0;
    height: 190px;
    left: 35%;
    position: absolute;
    width: 140px;
}

.landing-benefit-woman div {
    background: #f4b28f;
    border-radius: 50%;
    height: 67px;
    left: 39px;
    position: absolute;
    top: -30px;
    width: 60px;
}

.landing-benefit-woman div::before {
    background: #55333a;
    border-radius: 50%;
    content: "";
    height: 68px;
    left: -3px;
    position: absolute;
    top: -12px;
    width: 67px;
    z-index: -1;
}

.landing-benefit-woman b {
    background: #283b68;
    bottom: 15px;
    height: 75px;
    left: 35px;
    position: absolute;
    transform: rotate(-12deg);
    width: 78px;
}

.landing-benefit-plant {
    left: 10%;
}

.landing-benefit-copy h2 {
    font-size: 1.9rem;
    letter-spacing: -0.05em;
    margin: 0 0 1rem;
}

.landing-benefit-copy .landing-check-list {
    gap: 1rem;
}

.landing-testimonials {
    padding-bottom: 4.5rem;
}

.landing-testimonial-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(3, 1fr);
}

.landing-testimonial {
    border: 1px solid var(--landing-line);
    border-radius: 0.45rem;
    box-shadow: 0 0.4rem 1rem #47358008;
    padding: 1.3rem 1.4rem;
}

.landing-stars {
    color: #f8ad20;
    letter-spacing: 0.12rem;
}

.landing-testimonial p {
    color: #596078;
    font-size: 0.8rem;
    line-height: 1.65;
    min-height: 4.1rem;
}

.landing-testimonial strong {
    color: #29334f;
    font-size: 0.75rem;
}

.landing-cta {
    align-items: center;
    background: #f7f5ff;
    border-radius: 0.45rem;
    display: flex;
    justify-content: center;
    margin: 0 auto 4rem;
    max-width: 1110px;
    min-height: 190px;
    overflow: hidden;
    padding: 2rem;
    position: relative;
    text-align: center;
}

.landing-cta h2 {
    font-size: 1.7rem;
    margin: 0;
}

.landing-cta p {
    color: var(--landing-muted);
    font-size: 0.8rem;
    margin: 0.45rem 0 1.1rem;
}

.landing-cta small {
    color: var(--landing-muted);
    display: block;
    font-size: 0.625rem;
    margin-top: 0.6rem;
}

.landing-cta-decoration {
    bottom: -5px;
    position: absolute;
    right: 7%;
}

.landing-cta-decoration span {
    color: #f39baa;
    font-size: 5rem;
}

.landing-cta-decoration b {
    color: #a57bdd;
    font-size: 5rem;
    margin-left: -1.2rem;
}

.landing-cta-decoration i {
    background: #8fc799;
    border-radius: 50% 0 50% 0;
    bottom: 1rem;
    height: 4rem;
    position: absolute;
    right: -2rem;
    transform: rotate(35deg);
    width: 2rem;
}

.landing-footer {
    border-top: 1px solid #f0eff5;
    display: grid;
    gap: 2rem;
    grid-template-columns: 1.5fr repeat(3, 1fr) 1.3fr;
    margin: 0 auto;
    padding: 3rem 2rem;
}

.landing-footer h3 {
    color: #273452;
    font-size: 0.75rem;
    margin: 0 0 1rem;
}

.landing-footer>div:not(.landing-footer-brand):not(.landing-footer-meta) a {
    color: var(--landing-muted);
    display: block;
    font-size: 0.75rem;
    margin: 0.55rem 0;
}

.landing-footer-brand p {
    color: var(--landing-muted);
    font-size: 0.75rem;
    line-height: 1.5;
    margin-top: 1rem;
}

.landing-footer-meta {
    align-items: flex-end;
    color: #7c8192;
    display: flex;
    flex-wrap: wrap;
    font-size: 0.75rem;
    gap: 0.75rem;
    justify-content: flex-end;
}

.landing-footer-meta small {
    flex-basis: 100%;
    font-size: 0.625rem;
    text-align: right;
}

[x-cloak] {
    display: none !important;
}

.display-contents {
    display: contents;
}

.landing-modal {
    align-items: center;
    background: #18213e8c;
    display: flex;
    inset: 0;
    justify-content: center;
    overflow-y: auto;
    padding: 1.5rem;
    position: fixed;
    z-index: 30;
}

.landing-modal-panel {
    background: #fff;
    border-radius: 0.8rem;
    box-shadow: 0 1.5rem 4rem #18213e45;
    max-height: calc(100vh - 3rem);
    max-width: 390px;
    overflow-y: auto;
    padding: 1.5rem 1.75rem 1.25rem;
    position: relative;
    width: 100%;
}

.landing-modal-close {
    background: transparent;
    border: 0;
    color: #8b91a4;
    cursor: pointer;
    font-size: 1.7rem;
    line-height: 1;
    position: absolute;
    right: 1rem;
    top: 0.8rem;
}

.landing-modal-back {
    background: transparent;
    border: 0;
    color: #8b91a4;
    cursor: pointer;
    font-size: 0.75rem;
    font-weight: 700;
    left: 1.25rem;
    position: absolute;
    top: 1rem;
}

.landing-modal-back:hover {
    color: var(--landing-purple);
}

.landing-modal-emblem {
    display: block;
    height: 100px;
    margin: 0 auto 0.45rem;
    object-fit: contain;
}

.landing-modal-panel .landing-card-heading h2 {
    font-size: 1.25rem;
}

.landing-modal-google {
    background: #fff;
    cursor: pointer;
    width: 100%;
}

.landing-modal-google:hover {
    background: #fafaff;
    border-color: #c9cbe0;
}

.landing-auth-form {
    display: grid;
    gap: 0.45rem;
}

.landing-auth-form label:not(.profile-field) {
    color: #4f5870;
    font-size: 0.75rem;
    font-weight: 700;
    margin-top: 0.35rem;
}

.landing-auth-form input:not([type="checkbox"]):not([type="radio"]):not(.profile-field input) {
    border: 1px solid #e3e4ec;
    border-radius: 0.35rem;
    color: var(--landing-ink);
    font: inherit;
    font-size: 0.78rem;
    min-height: 2.5rem;
    outline: 0;
    padding: 0.6rem 0.75rem;
    width: 100%;
}

.landing-auth-form input:not([type="checkbox"]):not([type="radio"]):not(.profile-field input):focus {
    border-color: var(--landing-purple);
    box-shadow: 0 0 0 3px #7146d81c;
}

.landing-auth-form .profile-field {
    margin-top: 0.4rem;
}

.landing-auth-form .landing-full-button {
    cursor: pointer;
    margin-top: 0.7rem;
}

.landing-form-error {
    color: var(--planning-pink-darker);
    font-size: 0.64rem;
    font-weight: 700;
}

.landing-civility-options {
    display: grid;
    gap: 0.6rem;
    grid-template-columns: 1fr 1fr;
}

.landing-civility-option {
    align-items: center;
    border: 1px solid #e3e4ec;
    border-radius: 0.35rem;
    color: #4f5870;
    cursor: pointer;
    display: flex;
    font-size: 0.78rem;
    font-weight: 600;
    gap: 0.5rem;
    justify-content: center;
    padding: 0.7rem 0.75rem;
    transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
}

.landing-civility-option input {
    height: 1px;
    opacity: 0;
    position: absolute;
    width: 1px;
}

.landing-civility-option i {
    color: #9a9fb0;
    font-size: 1.05rem;
    transition: color 150ms ease;
}

.landing-civility-option:has(input:checked) {
    background: var(--landing-lilac);
    border-color: var(--landing-purple);
    color: var(--landing-purple-dark);
}

.landing-civility-option:has(input:checked) i {
    color: var(--landing-purple);
}

.landing-civility-option:has(input:focus-visible) {
    box-shadow: 0 0 0 3px #7146d81c;
}

.landing-remember {
    align-items: center;
    display: flex;
    font-size: 0.75rem !important;
    font-weight: 400 !important;
    gap: 0.45rem;
}

.landing-remember input {
    accent-color: var(--landing-purple);
}

.landing-modal-switch {
    color: #85899a;
    font-size: 0.75rem;
    margin: 1rem 0 0;
    text-align: center;
}

.landing-modal-switch button {
    background: transparent;
    border: 0;
    color: var(--landing-purple);
    cursor: pointer;
    font: inherit;
    font-weight: 700;
    padding: 0;
}

@media (max-width: 850px) {
    .landing-header {
        padding: 1rem 1.25rem;
    }

    .landing-nav {
        display: none;
    }

    .landing-hero {
        padding: 3rem 1.25rem 2rem;
    }

    .landing-hero h1 {
        font-size: clamp(2.2rem, 9vw, 3.5rem);
    }

    .landing-hero-scene {
        display: none;
    }

    .landing-section {
        padding: 3.5rem 1.25rem;
    }

    .landing-feature-grid {
        grid-template-columns: repeat(2, 1fr);
        row-gap: 2rem;
    }

    .landing-feature-card:last-child {
        grid-column: 1 / -1;
    }

    .landing-step-grid {
        gap: 2.5rem 1rem;
        grid-template-columns: repeat(2, 1fr);
    }

    .landing-step:not(:last-child)::after {
        display: none;
    }

    .landing-benefits {
        gap: 1rem;
        grid-template-columns: 1fr;
    }

    .landing-benefit-scene {
        height: 220px;
        order: 2;
    }

    .landing-benefit-copy {
        order: 1;
    }

    .landing-benefit-woman {
        bottom: -80px;
        left: 25%;
        height: 280px;
        width: 210px;
    }

    .landing-testimonial-grid {
        grid-template-columns: 1fr;
    }

    .landing-cta {
        border-radius: 0;
        margin-bottom: 0;
    }

    .landing-cta-decoration {
        opacity: 0.35;
        right: -3rem;
    }

    .landing-footer {
        grid-template-columns: repeat(2, 1fr);
        padding: 2.5rem 1.25rem;
    }

    .landing-footer-brand {
        grid-column: 1 / -1;
    }

    .landing-footer-meta {
        align-items: flex-start;
        justify-content: flex-start;
    }

    .landing-footer-meta small {
        text-align: left;
    }

    .landing-modal {
        align-items: flex-start;
        padding: 1rem;
    }

    .landing-modal-panel {
        max-height: calc(100vh - 2rem);
        padding: 1.25rem 1.15rem 1rem;
    }
}

.employers-page,
.employer-wizard-page {
    display: grid;
    gap: 1.5rem;
}

.employers-header {
    align-items: center;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
}

.employers-header h1 {
    color: #111827;
    font-size: 2rem;
    line-height: 1.15;
    margin: 0.15rem 0 0.45rem;
}

.employers-header p {
    color: #64748b;
    margin: 0;
}

.employers-hero {
    margin-bottom: 0;
}

.employer-family-name-field {
    margin-top: 0.9rem;
    max-width: 22rem;
}

.employers-hero-card {
    display: grid;
    gap: 0.65rem;
}

.employers-hero-card strong {
    margin: 0;
}

.employers-hero-card .dashboard-primary-button,
.employers-hero-card .employers-secondary-button {
    justify-self: start;
    margin-top: 0.15rem;
}

.employers-hero-stats {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    position: relative;
    z-index: 1;
}

.employers-list-section,
.employer-detail-card {
    display: grid;
    gap: 1rem;
}

.employers-list-heading {
    align-items: center;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
}

.employers-list-heading h2 {
    align-items: center;
    color: #273452;
    display: flex;
    font-size: 1.05rem;
    gap: 0.55rem;
    margin: 0;
}

.employers-list-heading span {
    color: #747d92;
    font-size: 0.82rem;
    font-weight: 800;
}

.employers-card-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.employer-row {
    align-items: center;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 0.9rem;
    display: flex;
    gap: 1rem;
    padding: 1rem;
    text-decoration: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.employer-row:hover,
.employer-row:focus-visible {
    border-color: #c4b5fd;
    box-shadow: 0 16px 35px rgba(79, 70, 229, 0.1);
    outline: 0;
    transform: translateY(-1px);
}

.employer-row-add {
    align-items: center;
    border-style: dashed;
    color: #5e39cf;
    flex-direction: column;
    justify-content: center;
    text-align: center;
}

.employer-row-add i {
    font-size: 2rem;
    line-height: 1;
}

.employer-row-add span {
    font-size: 0.9rem;
    font-weight: 800;
}

.contract-row {
    min-height: 8rem;
}

.employer-row-archived {
    background: #f8fafc;
    opacity: 0.82;
}

.employer-row-copy {
    display: grid;
    gap: 0.25rem;
    min-width: 0;
}

.employer-row-copy strong {
    color: #111827;
    font-size: 1rem;
}

.employer-row-copy small {
    color: #64748b;
    font-size: 0.82rem;
    line-height: 1.45;
}

.employer-avatar {
    align-items: center;
    background: linear-gradient(135deg, #ede9fe, #dbeafe);
    border-radius: 999px;
    color: #4f46e5;
    display: inline-flex;
    font-weight: 800;
    height: 3rem;
    justify-content: center;
    text-transform: uppercase;
    width: 3rem;
}

.employers-ghost-button,
.employers-secondary-button {
    align-items: center;
    background: #fff;
    border: 1px solid #ddd6fe;
    border-radius: var(--btn-radius);
    color: #4f46e5;
    display: inline-flex;
    font-size: 0.82rem;
    font-weight: 800;
    gap: 0.4rem;
    justify-content: center;
    min-height: var(--btn-height-md);
    padding: 0 1rem;
    text-decoration: none;
}

.employers-ghost-button {
    color: #475569;
}

.employers-empty {
    align-items: center;
    color: #64748b;
    display: grid;
    justify-items: center;
    padding: 2.5rem 0;
    text-align: center;
}

.employers-empty i {
    color: #7c3aed;
    font-size: 3rem;
}

.employers-empty strong {
    color: #111827;
    font-size: 1.1rem;
}

.employers-empty .dashboard-primary-button {
    margin-top: 0.65rem;
}

.employers-table {
    background: #fff;
    border: 1px solid #e7e4f5;
    border-radius: 1.1rem;
    overflow-x: auto;
}

.employers-data-table {
    border-collapse: collapse;
    table-layout: auto;
    width: 100%;
}

.employers-data-table th,
.employers-data-table td {
    border-bottom: 1px solid #efedf9;
    padding: 0.85rem 1rem;
    text-align: left;
    vertical-align: middle;
    white-space: nowrap;
}

.employers-data-table tbody tr:hover {
    background: var(--planning-purple-surface-3);
}

.employers-data-row {
    cursor: pointer;
}

.employers-data-row:focus-visible {
    outline: 2px solid var(--planning-purple);
    outline-offset: -2px;
}

.employers-data-table thead tr {
    background: var(--planning-surface-soft);
}

.employers-data-table th {
    color: var(--planning-text-tertiary);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.employers-sort-link {
    align-items: center;
    color: inherit;
    display: inline-flex;
    gap: 0.3rem;
    justify-content: inherit;
    text-decoration: none;
}

.employers-sort-link:hover {
    color: var(--planning-purple-dark);
}

.employers-sort-link span {
    color: var(--planning-purple);
    display: inline-flex;
    font-size: 0.7rem;
    min-width: 0.55rem;
}

.employers-sort-link--compact {
    gap: 0.2rem;
    justify-content: center;
}

.employers-sort-link--compact span {
    font-size: 0.62rem;
    min-width: 0.45rem;
}

.employers-data-table tbody tr:last-child td {
    border-bottom: 0;
}

.employers-data-table td:nth-child(3) {
    white-space: normal;
}

.employers-data-table-contracts-head {
    border-bottom: 0 !important;
    text-align: center !important;
}

.employers-data-table-contract-subhead {
    font-size: 0.58rem !important;
    padding-left: 0.45rem !important;
    padding-right: 0.45rem !important;
    text-align: center !important;
    width: 1%;
}

.employers-table-actions-head {
    text-align: right;
}

.employers-contract-count-cell {
    color: var(--planning-text-secondary);
    font-size: 0.86rem;
    font-variant-numeric: tabular-nums;
    font-weight: 800;
    padding-left: 0.45rem !important;
    padding-right: 0.45rem !important;
    text-align: center !important;
    width: 1%;
}

.employers-contract-badge {
    align-items: center;
    border-radius: 999px;
    display: inline-flex;
    justify-content: center;
    min-width: 1.8rem;
    padding: 0.25rem 0.55rem;
}

.employers-contract-badge--active {
    background: var(--planning-green-surface);
    color: var(--planning-green-dark);
}

.employers-contract-badge--draft {
    background: var(--planning-purple-surface);
    color: var(--planning-purple-dark);
}

.employers-pagination {
    margin-top: 1rem;
}

.contracts-table {
    border-radius: 1.1rem;
    overflow: visible;
}
.contracts-data-table thead tr:first-child th:first-child {
    border-top-left-radius: calc(1.1rem - 1px);
}

.contracts-data-table thead tr:first-child th:last-child {
    border-top-right-radius: calc(1.1rem - 1px);
}

.contracts-data-table tbody tr:last-child td:first-child {
    border-bottom-left-radius: calc(1.1rem - 1px);
}

.contracts-data-table tbody tr:last-child td:last-child {
    border-bottom-right-radius: calc(1.1rem - 1px);
}

.contracts-data-table th,
.contracts-data-table td {
    padding-bottom: 0.95rem;
    padding-top: 0.95rem;
}

.contracts-data-row {
    position: relative;
}

.contracts-data-row--actions-open > td {
    position: relative;
    z-index: 35;
}

.contracts-data-row--actions-open .contracts-action-dropdown {
    z-index: 80;
}

.contracts-data-table td:nth-child(2),
.contracts-data-table td:nth-child(3) {
    white-space: normal;
}

.contracts-data-row {
    height: 4.25rem;
}

.contracts-type-cell {
    font-weight: 800;
}

.contract-type-badge {
    align-items: center;
    border: 1px solid transparent;
    border-radius: 999px;
    display: inline-flex;
    font-size: 0.72rem;
    font-weight: 900;
    justify-content: center;
    min-height: 1.8rem;
    min-width: 3.35rem;
    padding: 0.25rem 0.7rem;
}

.contract-type-badge--cdi {
    background: var(--planning-green-surface);
    border-color: var(--planning-green-border);
    color: var(--planning-green-dark);
}

.contract-type-badge--cdd {
    background: var(--contract-type-blue-surface);
    border-color: var(--contract-type-blue-border);
    color: var(--contract-type-blue);
}

.contracts-status-cell .contract-status-badge {
    display: inline-flex;
    height: auto;
    line-height: 1.2;
    max-width: 14rem;
    min-height: 30px;
    text-align: left;
    white-space: normal;
    width: max-content;
}

.contracts-action-dropdown {
    min-width: 15rem;
}

.contracts-action-dropdown form {
    margin: 0;
}

.contracts-mobile-list {
    display: none;
}

.contract-mobile-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 1.1rem;
    cursor: pointer;
    display: grid;
    gap: 14px;
    padding: 20px;
    position: relative;
}

.contract-mobile-card-link {
    display: grid;
    gap: 4px;
}

.contract-mobile-card-name {
    font-size: 1.2rem;
    font-weight: 800;
    margin: 0;
    padding-right: 2.25rem;
}

.contract-mobile-card-name a {
    color: inherit;
    text-decoration: none;
}

.contract-mobile-card-meta {
    color: #8b85a8;
    font-size: 0.9rem;
    margin: 0;
}

.contract-mobile-card-badges {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.contract-mobile-card-date-pill {
    align-items: center;
    background: #f4f2fe;
    border-radius: 999px;
    color: #4c3fa5;
    display: inline-flex;
    font-size: 12.5px;
    font-weight: 700;
    height: 30px;
    padding: 0 12px;
    white-space: nowrap;
}

.contract-mobile-card-stats {
    display: flex;
    gap: 24px;
}

.contract-mobile-card-stats div {
    display: grid;
    gap: 2px;
}

.contract-mobile-card-stat-label {
    color: #8b85a8;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.contract-mobile-card-stats strong {
    font-size: 1.05rem;
}

.contracts-row-actions.contract-mobile-card-actions {
    position: absolute;
    right: 16px;
    top: 16px;
}

.employers-mobile-list {
    display: none;
}

.employer-mobile-card-children {
    align-items: center;
    border-top: 1px solid #f0eef8;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding-top: 0.85rem;
}

.employer-mobile-card-child {
    display: inline-flex;
}

@media (max-width: 1024px) {
    .employers-table {
        display: none;
    }

    .employers-mobile-list {
        display: grid;
        gap: 14px;
    }

    .contracts-list-page .contracts-table {
        display: none;
    }

    .contracts-mobile-list {
        display: grid;
        gap: 14px;
    }
}

.app-breadcrumb-row {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: space-between;
    margin-bottom: 0;
}

.app-breadcrumb {
    align-items: center;
    color: #8b85a8;
    display: flex;
    flex-wrap: wrap;
    font-size: 13px;
    font-weight: 400;
    gap: 8px;
}

.app-breadcrumb a {
    align-items: center;
    color: #6d28d9;
    display: inline-flex;
    font-weight: 600;
    gap: 0.4rem;
    text-decoration: none;
}

.app-breadcrumb a:hover {
    color: #4c1d95;
    text-decoration: underline;
}

.app-breadcrumb strong {
    color: #4a466a;
    font-weight: 600;
}

.employer-wizard {
    display: block;
}

.employer-step-number {
    align-items: center;
    background: #ede9fe;
    border-radius: 999px;
    color: #5b21b6;
    display: inline-flex;
    font-weight: 900;
    height: 2.3rem;
    justify-content: center;
    width: 2.3rem;
}

.employer-wizard-main {
    display: grid;
    gap: 1rem;
}

.contracts-page,
.contract-wizard-form,
.contract-form-columns {
    display: grid;
    gap: 1rem;
}

.contract-form-columns {
    align-items: start;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.contract-layout {
    align-items: start;
    display: grid;
    gap: 1.25rem;
    grid-template-columns: minmax(0, 1fr) 22rem;
}

.contract-main {
    align-content: start;
    display: grid;
    gap: 1rem;
    min-width: 0;
}

.contract-sidebar {
    align-content: start;
    display: grid;
    gap: 1rem;
    position: sticky;
    top: 1rem;
}

.contract-assistant-manual {
    display: grid;
    gap: 0.85rem;
    margin-top: 1rem;
}

.contract-assistant-manual-heading {
    color: #1c1b29;
    font-size: 0.85rem;
    font-weight: 800;
    margin: 0;
}

.contract-field-grid-4 {
    align-items: start;
    display: grid;
    gap: 0.85rem;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

@container (max-width: 760px) {
    .contract-field-grid-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.contract-frame-fields-group {
    display: contents;
}

.contract-page-header {
    align-items: center;
    background: #fff;
    border: 1px solid #e7e4f5;
    border-radius: 18px;
    display: flex;
    gap: 32px;
    justify-content: space-between;
    margin-bottom: 0;
    min-height: 0;
    padding: 22px 26px;
}

.contract-page-header h1 {
    color: #1c1b29;
    font-size: 25px;
    font-weight: 800;
    letter-spacing: -0.02em;
    margin: 0 0 5px;
}

.employer-family-header > div {
    flex: 1 1 auto;
    min-width: 0;
}

.employer-family-header h1 {
    align-items: baseline;
    display: flex;
    gap: 0.5rem;
}

.employer-family-name-input {
    background: transparent;
    border: none;
    border-radius: 8px;
    color: inherit;
    flex: 1 1 auto;
    font: inherit;
    letter-spacing: inherit;
    min-width: 0;
    padding: 2px 6px;
    width: 100%;
    border: 1px solid transparent;
}

.employer-family-name-input:hover,
.employer-family-name-input:focus {
    background: #f6f6f6;
    outline: none;
    border-color: #e9ebf3;
}

.contract-page-header .dashboard-welcome-copy {
    color: #6b6788;
    font-size: 14px;
    line-height: 1.4;
    margin: 0;
}

.contract-completion-tracker {
    align-content: start;
    column-gap: 0.75rem;
    display: grid;
    grid-template-columns: auto 1fr;
    min-width: 210px;
    row-gap: 7px;
}

.contract-completion-tracker>span {
    color: #4a466a;
    font-size: 12px;
    font-weight: 700;
    justify-self: start;
}

.contract-completion-tracker>strong {
    color: #4a466a;
    font-size: 12px;
    font-weight: 700;
    justify-self: end;
    white-space: nowrap;
}

.contract-draft-badge-group {
    align-items: center;
    display: flex;
    gap: 0.5rem;
}

.contract-draft-badge-group small {
    color: #94a3b8;
    font-size: 0.75rem;
    font-weight: 600;
}

.contract-header-link {
    background: #f3efff;
    border-radius: 999px;
    color: #5b35c8;
    font-size: 0.75rem;
    font-weight: 800;
    justify-self: end;
    padding: 0.3rem 0.75rem;
    white-space: nowrap;
}

.contract-header-pill {
    background: #eef2ff;
    border-radius: 999px;
    color: #5b35c8;
    font-size: 0.75rem;
    font-weight: 800;
    justify-self: end;
    padding: 0.3rem 0.75rem;
    white-space: nowrap;
}

.contract-header-pill--warning {
    background: #fff7ed;
    color: #9a3412;
    cursor: help;
    position: relative;
}

.contract-header-pill-tooltip {
    background: #273452;
    border-radius: 0.42rem;
    bottom: calc(100% + 0.55rem);
    box-shadow: 0 0.65rem 1.4rem #273b6b26;
    color: #fff;
    font-size: 0.64rem;
    font-weight: 600;
    line-height: 1.45;
    max-width: min(15rem, 78vw);
    opacity: 0;
    padding: 0.65rem 0.75rem;
    pointer-events: none;
    position: absolute;
    right: 0;
    text-transform: none;
    transform: translateY(0.25rem);
    transition: opacity 160ms ease, transform 160ms ease;
    visibility: hidden;
    white-space: normal;
    width: max-content;
    z-index: 70;
}

.contract-header-pill-tooltip::after {
    border: 0.35rem solid transparent;
    border-top-color: #273452;
    content: "";
    position: absolute;
    right: 0.9rem;
    top: 100%;
}

.contract-header-pill--warning:hover .contract-header-pill-tooltip,
.contract-header-pill--warning:focus-within .contract-header-pill-tooltip {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
}

.contract-header-pill--peach {
    background: #fdf1e0;
    color: #b45309;
}

.contract-header-pills {
    display: flex;
    gap: 0.4rem;
    justify-self: end;
}

.contract-link-button {
    background: transparent;
    border: 0;
    color: #6d28d9;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    justify-self: end;
    padding: 0;
    white-space: nowrap;
}

.contract-link-button:hover {
    color: #4c1d95;
    text-decoration: underline;
}

.contract-wizard-form .contract-child-card .employer-section-header {
    align-items: center;
    grid-template-columns: minmax(0, 1fr) auto;
}

.contract-completion-bar {
    background: #efedf9;
    border-radius: 999px;
    grid-column: 1 / -1;
    height: 7px;
    overflow: hidden;
}

.contract-completion-bar span {
    background: linear-gradient(90deg, #6d28d9, #ec4899);
    display: block;
    height: 100%;
    transition: width 0.2s ease;
}

.contract-completion-tracker small {
    color: #9c97b4;
    font-size: 11.5px;
    font-weight: 400;
    grid-column: 1 / -1;
    justify-self: start;
}

.contract-draft-badge,
.contract-status-badge {
    align-items: center;
    background: #eefbf5;
    border: 1px solid #cfe8dd;
    border-radius: 999px;
    color: #0e7c5a;
    display: flex;
    flex: 0 0 auto;
    font-size: 12px;
    font-weight: 700;
    gap: 7px;
    padding: 0 12px;
    height: 30px;
    white-space: nowrap;
}

.contract-draft-badge i,
.contract-status-badge i {
    color: #22a97c;
    font-size: 0.5rem;
}

.contract-status-badge--ended {
    background: #f1f2f6;
    border-color: #e1e3ec;
    color: #566079;
}

.contract-status-badge--ended i {
    color: #566079;
}

.contract-status-badge--draft {
    background: #f3efff;
    border-color: #ded6fb;
    color: #6d28d9;
}

.contract-status-badge--draft i {
    color: #6d28d9;
}

.contract-status-badge--to-sign {
    background: #fdf1e0;
    border-color: #fbe2b8;
    color: #b45309;
}

.contract-status-badge--to-sign i {
    color: #b45309;
}

.contract-status-badge--cancelled {
    background: #fdecea;
    border-color: #f6cbc6;
    color: #b3261e;
}

.contract-status-badge--cancelled i {
    color: #b3261e;
}

.contracts-list-header {
    align-items: flex-start;
    flex-wrap: wrap;
}

.contracts-list-header-actions {
    align-items: center;
    display: flex;
    gap: 0.65rem;
}

.contract-parent-create-card {
    margin-top: 1rem;
}

@media (min-width: 1025px) {
    .contract-field-grid-4.contract-parent-create-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* Choix de l'enfant par son avatar (création d'un contrat côté parent). */
.contract-child-choices {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.contract-child-choice {
    align-items: center;
    background: #fff;
    border: 1px solid var(--app-border-lilac);
    border-radius: 1rem;
    color: var(--planning-text-secondary-2);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    font: inherit;
    gap: 0.45rem;
    min-width: 6.5rem;
    padding: 0.85rem 1rem 0.7rem;
    transition: border-color 120ms ease, box-shadow 120ms ease, background 120ms ease;
}

.contract-child-choice:hover {
    border-color: var(--planning-border-hover);
}

.contract-child-choice:focus-visible {
    outline: 2px solid var(--planning-purple);
    outline-offset: 2px;
}

.contract-child-choice.is-selected {
    background: var(--app-lilac-bg);
    border-color: var(--planning-purple);
    box-shadow: 0 0 0 3px rgba(109, 40, 217, 0.14);
}

.contract-child-choice-name {
    font-size: 0.82rem;
    font-weight: 700;
}

.contract-child-choices-error {
    color: var(--btn-danger-color);
    display: block;
    font-size: 0.78rem;
    margin-top: 0.5rem;
}

.contract-assistant-lookup {
    display: grid;
    gap: 0.5rem;
}

.contract-models-intro {
    align-items: flex-start;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 1rem;
    display: flex;
    gap: 12px;
    padding: 18px 20px;
}

.contract-models-intro i {
    background: var(--app-lilac-bg);
    border-radius: 10px;
    color: #6d28d9;
    flex: 0 0 auto;
    font-size: 1.3rem;
    padding: 8px;
}

.contract-models-intro p {
    color: var(--app-ink-muted);
    font-size: 13.5px;
    line-height: 1.55;
    margin: 0;
}

.contract-parent-create-result {
    display: grid;
}

.contract-parent-create-result-placeholder {
    align-items: center;
    background: #fbfafe;
    border: 1px dashed #e1ddf2;
    border-radius: 12px;
    color: #9c97b4;
    display: flex;
    font-size: 12.5px;
    gap: 8px;
    padding: 12px 14px;
}

.contract-parent-create-result-placeholder i {
    flex: 0 0 auto;
    font-size: 1.2rem;
}

@media (max-width: 1024px) {
    .contract-field-grid-4.contract-parent-create-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

.contract-changes-banner {
    background: #fff8ec;
    border: 1px solid #f6d9a8;
    border-radius: 0.85rem;
    color: #6b4a12;
    display: grid;
    gap: 0.5rem;
    padding: 1rem 1.15rem;
}

.contract-changes-banner strong {
    align-items: center;
    display: flex;
    gap: 0.45rem;
}

.contract-changes-banner p {
    font-size: 0.82rem;
    margin: 0;
}

.contract-changes-banner ul {
    display: grid;
    gap: 0.3rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.contract-changes-banner li {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    font-size: 0.82rem;
    gap: 0.45rem;
}

.contract-changes-banner li > span {
    font-weight: 700;
}

.contract-changes-banner del {
    opacity: 0.7;
}

.contract-field-changed {
    background: #fff8ec;
    border-radius: 0.65rem;
    box-shadow: 0 0 0 2px #f2b84b;
}

.contract-assistant-picker-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    justify-content: flex-end;
}

.contract-assistant-lookup-field {
    grid-column: span 2;
}

.contract-assistant-lookup-field .profile-unit-group input,
.contract-assistant-lookup-field .profile-unit-group .profile-unit-button {
    min-height: calc(3.1rem - 2px);
}

.contract-assistant-lookup-error {
    align-self: center;
    grid-column: -2 / -1;
    margin: 0;
}

@media (max-width: 1024px) {
    .contract-assistant-lookup-field {
        grid-column: auto;
    }
}

.contract-assistant-lookup-spinner {
    animation: contract-assistant-lookup-spin 0.8s linear infinite;
}

@keyframes contract-assistant-lookup-spin {
    from {
        transform: rotate(0deg);
    }

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

.contract-field-grid-2 {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

@container (max-width: 420px) {
    .contract-field-grid-2 {
        grid-template-columns: minmax(0, 1fr);
    }
}

.contracts-search {
    align-items: center;
    background: #fff;
    border: 1px solid #e1ddf2;
    border-radius: 0.75rem;
    display: flex;
    gap: 0.5rem;
    height: 2.5rem;
    min-width: 230px;
    padding: 0 0.75rem;
}

.contracts-search i {
    color: #9c97b4;
    font-size: 1rem;
}

.contracts-search input {
    background: transparent;
    border: 0;
    color: #1c1b29;
    flex: 1;
    font-size: 0.84rem;
    min-width: 0;
    outline: 0;
}

.contracts-tabs {
    align-items: center;
    border-bottom: 1px solid #e7e4f5;
    display: flex;
    gap: 0.5rem;
    padding-bottom: 2px;
}

.contracts-tabs-spacer {
    flex: 1;
}

.contracts-tab {
    align-items: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 0.75rem 0.75rem 0 0;
    color: #6b6788;
    cursor: pointer;
    display: inline-flex;
    font-size: 0.84rem;
    font-weight: 700;
    gap: 0.5rem;
    height: 2.5rem;
    margin-bottom: -3px;
    padding: 0 0.9rem;
    text-decoration: none;
    white-space: nowrap;
}

.contracts-tab.is-active {
    background: #fff;
    border-color: #e7e4f5;
    border-bottom-color: #fff;
    color: #4c1d95;
}

.contracts-tab-count {
    align-items: center;
    background: #efedf9;
    border-radius: 999px;
    color: #8b85a8;
    display: inline-flex;
    font-size: 0.72rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    height: 1.25rem;
    justify-content: center;
    min-width: 1.25rem;
    padding: 0 0.4rem;
}

.contracts-tab-count.is-active {
    background: #f1eefe;
    color: #4c1d95;
}

.contracts-panel {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.contracts-row {
    align-items: center;
    background: #fff;
    border: 1px solid #e7e4f5;
    border-radius: 1.1rem;
    display: grid;
    gap: 1.25rem;
    grid-template-columns: minmax(0, 1.3fr) 150px 150px 170px minmax(0, 220px);
    padding: 1.1rem 1.25rem;
    position: relative;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.contracts-row:hover {
    border-color: #c9bcf7;
    box-shadow: 0 12px 28px rgba(109, 40, 217, 0.08);
}

.contracts-clickable-link {
    border-radius: inherit;
    inset: 0;
    position: absolute;
    z-index: 0;
}

.contracts-clickable-link:focus-visible {
    outline: 2px solid #6d28d9;
    outline-offset: 2px;
}

.contracts-row-identity {
    align-items: center;
    display: flex;
    gap: 0.85rem;
    min-width: 0;
}

.contracts-row-avatar {
    flex: 0 0 auto;
}

.contracts-row-copy {
    display: grid;
    gap: 0.2rem;
    min-width: 0;
}

.contracts-row-name-line {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
}

.contracts-row-name {
    color: #1c1b29;
    font-size: 0.97rem;
    font-weight: 700;
}

.contracts-row-name-link {
    text-decoration: none;
}

.contracts-row-name-link:hover {
    color: var(--planning-purple-dark);
}

.contracts-row-meta {
    color: #8b85a8;
    font-size: 0.78rem;
}

.contracts-row-stat {
    display: grid;
    gap: 0.15rem;
}

.contracts-row-stat-label {
    color: #9c97b4;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.contracts-row-stat-value {
    color: #1c1b29;
    font-size: 0.9rem;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
}

.contracts-row-actions {
    align-items: center;
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
    position: relative;
    z-index: 1;
}

.contracts-ghost-button,
.contracts-icon-button {
    align-items: center;
    background: #fff;
    border: 1px solid #e1ddf2;
    border-radius: var(--btn-radius);
    color: #4a466a;
    cursor: pointer;
    display: inline-flex;
    font-size: 0.8rem;
    font-weight: 700;
    height: 2.25rem;
    justify-content: center;
    padding: 0 0.85rem;
}

.contracts-ghost-button:hover,
.contracts-icon-button:hover {
    border-color: #c9bcf7;
}

.contracts-icon-button {
    padding: 0;
    width: 2.25rem;
}

.contracts-icon-button i {
    color: #6b6788;
    margin-right: 0 !important;
}

.contracts-row-delete-form {
    display: inline-flex;
}

.contracts-icon-button--danger {
    background: var(--btn-danger-bg);
    border-color: var(--btn-danger-color);
}

.contracts-icon-button--danger:hover {
    border-color: var(--btn-danger-color);
}

.contracts-icon-button--danger i {
    color: var(--btn-danger-color);
}

.contracts-delete-link {
    background: transparent;
    border: 0;
    color: #b01055;
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 600;
    margin-left: auto;
    padding: 0;
}

.contracts-panel-draft-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.contracts-panel-draft-grid .employers-empty {
    grid-column: 1 / -1;
}

.contracts-draft-card {
    background: #fff;
    border: 1px solid #e7e4f5;
    border-radius: 1.1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.25rem 1.35rem;
    position: relative;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.contracts-draft-card:hover {
    border-color: #c9bcf7;
    box-shadow: 0 12px 28px rgba(109, 40, 217, 0.08);
}

.contracts-draft-card-header {
    align-items: flex-start;
    display: flex;
    gap: 0.85rem;
    justify-content: space-between;
}

.contracts-draft-progress {
    align-items: center;
    display: flex;
    gap: 0.75rem;
    grid-column: 1 / -1;
}

.contracts-draft-progress-value {
    color: #3b2e7e;
    font-size: 1.6rem;
    font-variant-numeric: tabular-nums;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.contracts-draft-progress .contract-completion-bar {
    flex: 1;
}

.contracts-draft-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.contracts-draft-tag {
    align-items: center;
    background: #fff6ec;
    border: 1px solid #f8e1c4;
    border-radius: 999px;
    color: #8a5a17;
    display: inline-flex;
    font-size: 0.72rem;
    font-weight: 700;
    height: 1.75rem;
    padding: 0 0.7rem;
}

.contracts-draft-tag--muted {
    background: #f4f2fe;
    border-color: transparent;
    color: #4c3fa5;
}

.contracts-draft-actions {
    align-items: center;
    display: flex;
    gap: 0.6rem;
    position: relative;
    z-index: 1;
}

.contracts-done-table {
    background: #fff;
    border: 1px solid #e7e4f5;
    border-radius: 1.1rem;
    overflow: hidden;
}

.contracts-done-row {
    align-items: center;
    border-bottom: 1px solid #efedf9;
    display: grid;
    gap: 1.25rem;
    grid-template-columns: minmax(0, 1.2fr) 150px 130px 150px 160px;
    padding: 0.9rem 1.25rem;
    position: relative;
}

.contracts-done-row:last-child {
    border-bottom: 0;
}

.contracts-done-row .contracts-row-stat-label {
    display: none;
}

.contracts-done-row--head {
    background: #fbfafe;
}

.contracts-done-row--head span {
    color: #9c97b4;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.contracts-done-actions-head {
    text-align: right;
}

.contracts-done-avatar {
    height: 2.1rem;
    width: 2.1rem;
}

.contracts-done-name {
    color: #4a466a;
    font-size: 0.84rem;
    font-weight: 700;
}

.contracts-done-meta {
    color: #6b6788;
    font-size: 0.8rem;
}

.contracts-row-actions--table {
    justify-content: flex-end;
}

.contracts-done-view {
    cursor: pointer;
}

.contracts-types-intro {
    align-items: center;
    background: #f8f6fe;
    border: 1px solid #efedf9;
    border-radius: 1rem;
    display: flex;
    gap: 1.25rem;
    justify-content: space-between;
    padding: 0.9rem 1.15rem;
}

.contracts-types-intro span {
    color: #4a466a;
    font-size: 0.82rem;
}

.contracts-types-create {
    min-height: 2.35rem;
    white-space: nowrap;
}

.contracts-types-grid {
    display: grid;
    gap: 0.85rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.contracts-template-card {
    background: #fff;
    border: 1px solid #e7e4f5;
    border-radius: 1.1rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    padding: 1.25rem 1.35rem;
}

.contracts-template-card-header {
    align-items: flex-start;
    display: flex;
    gap: 0.75rem;
    justify-content: space-between;
}

.contracts-template-badge {
    align-items: center;
    background: #f1eefe;
    border-radius: 999px;
    color: #4c1d95;
    display: inline-flex;
    font-size: 0.72rem;
    font-weight: 700;
    height: 1.6rem;
    padding: 0 0.65rem;
    white-space: nowrap;
}

.contracts-template-facts {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.contracts-template-fact {
    align-items: center;
    display: flex;
    font-size: 0.82rem;
    justify-content: space-between;
}

.contracts-template-fact span {
    color: #8b85a8;
}

.contracts-template-fact strong {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
}

.contracts-template-actions {
    align-items: center;
    display: flex;
    gap: 0.5rem;
    margin-top: auto;
}

.contracts-template-use {
    flex: 1;
    justify-content: center;
    min-height: 2.4rem;
}

@media (max-width: 1100px) {
    .contracts-row {
        grid-template-columns: minmax(0, 1fr);
    }

    .contracts-row-actions {
        justify-content: flex-start;
    }

    .contracts-panel-draft-grid,
    .contracts-types-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .contracts-done-row {
        border: 1px solid #e7e4f5;
        border-radius: 0.85rem;
        gap: 0.5rem;
        grid-template-columns: minmax(0, 1fr);
        margin-bottom: 0.6rem;
    }

    .contracts-done-table {
        background: transparent;
        border: 0;
    }

    .contracts-done-row--head {
        display: none;
    }

    .contracts-done-row .contracts-row-stat-label {
        display: block;
    }

    .contracts-row-identity {
        margin-bottom: 0.15rem;
    }

    .contracts-row-actions--table {
        justify-content: flex-start;
        margin-top: 0.2rem;
    }

    .contract-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .contract-sidebar {
        position: static;
        top: auto;
    }
}

.contract-sim-section {
    margin-bottom: 1rem;
}

.contract-sim-section-title {
    color: #64748b;
    display: block;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    margin: 0 0 0.35rem;
    text-transform: uppercase;
}

.contract-sim-section-title--purple {
    color: #7146d8;
}

.contract-sim-section-title--green {
    color: #16a34a;
}

.contract-sim-line {
    align-items: baseline;
    display: grid;
    gap: 0.15rem 0.4rem;
    grid-template-columns: auto 1fr auto;
    padding: 0.25rem 0;
}

.contract-sim-line--inline {
    grid-template-columns: auto auto 1fr auto;
}

.contract-sim-line>span:first-child {
    color: #111827;
    font-size: 0.78rem;
    font-weight: 700;
    white-space: nowrap;
}

.contract-sim-line--inline>span:first-child {
    grid-column: 1;
}

.contract-sim-leader {
    align-self: end;
    border-bottom: 1px dotted #cbd5e1;
    margin-bottom: 0.35rem;
}

.contract-sim-line--inline .contract-sim-leader {
    grid-column: 3;
}

.contract-sim-line strong {
    color: #111827;
    font-size: 0.85rem;
    font-weight: 800;
    white-space: nowrap;
}

.contract-sim-line--inline>strong {
    grid-column: 4;
}

.contract-sim-line small {
    color: #94a3b8;
    font-size: 0.72rem;
    font-weight: 600;
    grid-column: 1 / -1;
}

.contract-sim-line--inline small {
    grid-column: 2;
    white-space: nowrap;
}

.contract-sim-line--inline .contract-sim-line-annual {
    grid-column: 1 / -1;
    white-space: normal;
}

.contract-sim-line--deduction strong {
    color: #16a34a;
}

.contract-sim-line-label-toggle {
    align-items: center;
    display: inline-flex;
    gap: 0.3rem;
}

.contract-cmg-detail-toggle {
    align-items: center;
    background: transparent;
    border: 0;
    color: #16a34a;
    cursor: pointer;
    display: inline-flex;
    justify-content: center;
    padding: 0;
}

.contract-cmg-detail-toggle i {
    font-size: 0.85rem;
    margin-left: 0;
    transition: transform 0.2s ease;
}

.contract-cmg-detail-toggle.is-open i {
    transform: rotate(90deg);
}

.contract-cmg-detail-panel {
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 0.65rem;
    margin: 0.35rem 0 0.75rem;
    padding: 0.75rem 0.85rem;
}

.contract-cmg-detail-lines {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.contract-cmg-detail-row {
    align-items: baseline;
    display: grid;
    gap: 0.4rem;
    grid-template-columns: auto 1fr auto;
}

.contract-cmg-detail-row > span:first-child {
    color: #475569;
    font-size: 0.72rem;
    font-weight: 600;
    white-space: nowrap;
}

.contract-cmg-detail-row strong {
    color: #111827;
    font-size: 0.75rem;
    font-weight: 800;
    white-space: nowrap;
}

.contract-cmg-detail-formula {
    color: #64748b;
    font-size: 0.68rem;
    line-height: 1.5;
    margin: 0.2rem 0 0;
}

.contract-cmg-detail-formula--filled {
    color: #111827;
    font-weight: 700;
}

.contract-cmg-detail-divider {
    border-top: 1px dashed #e2e8f0;
    margin: 0.15rem 0;
}

.contract-cmg-detail-subtitle {
    color: #64748b;
    display: block;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.contract-cmg-detail-empty {
    color: #64748b;
    font-size: 0.72rem;
    font-weight: 600;
    margin: 0;
}

.contract-sim-total {
    align-items: center;
    background: #eef2ff;
    border-radius: 0.65rem;
    display: flex;
    justify-content: space-between;
    margin: 0.75rem 0;
    padding: 0.65rem 0.85rem;
}

.contract-sim-total span {
    color: #4338ca;
    font-size: 0.78rem;
    font-weight: 800;
}

.contract-sim-total strong {
    color: #4338ca;
    font-size: 0.95rem;
    font-weight: 900;
}

.contract-sim-bar {
    background: #f1f5f9;
    border-radius: 999px;
    display: flex;
    height: 0.55rem;
    margin: 0.5rem 0 0.6rem;
    overflow: hidden;
}

.contract-sim-bar span {
    display: block;
    height: 100%;
}

.contract-sim-bar-cmg {
    background: #16a34a;
}

.contract-sim-bar-credit {
    background: #6ee7b7;
}

.contract-sim-bar-remainder {
    background: #312e81;
}

.contract-sim-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem 0.9rem;
    margin-bottom: 0.25rem;
}

.contract-sim-legend small {
    align-items: center;
    color: #64748b;
    display: flex;
    font-size: 0.65rem;
    font-weight: 700;
    gap: 0.3rem;
}

.contract-sim-legend i {
    border-radius: 50%;
    display: inline-block;
    height: 0.5rem;
    width: 0.5rem;
}

.contract-sim-legend-cmg {
    background: #16a34a;
}

.contract-sim-legend-credit {
    background: #6ee7b7;
}

.contract-sim-legend-remainder {
    background: #312e81;
}

.contract-sim-cost-real {
    background: #2e1065;
    border-radius: 0.75rem;
    color: #fff;
    margin: 0.85rem 0;
    padding: 1rem;
}

.contract-sim-cost-real-label {
    color: #c4b5fd;
    display: block;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    margin-bottom: 0.4rem;
    text-transform: uppercase;
}

.contract-sim-cost-real-row {
    align-items: flex-end;
    display: flex;
    gap: 0.5rem;
    justify-content: space-between;
}

.contract-sim-cost-real-row>div:first-child {
    align-items: baseline;
    display: flex;
    gap: 0.3rem;
}

.contract-sim-cost-real strong {
    font-size: 1.6rem;
    font-weight: 900;
}

.contract-sim-cost-real-row small {
    color: #94a3b8;
    font-size: 0.75rem;
    font-weight: 700;
}

.contract-sim-cost-real-secondary {
    text-align: right;
}

.contract-sim-cost-real-secondary small {
    display: block;
}

.contract-sim-footnote {
    align-items: center;
    color: #94a3b8;
    display: flex;
    font-size: 0.75rem;
    font-weight: 700;
    justify-content: space-between;
    margin-top: 0.5rem;
}

.contract-sim-footnote button {
    background: transparent;
    border: 0;
    color: #7146d8;
    cursor: pointer;
    font-size: 0.75rem;
    font-weight: 800;
    padding: 0;
}

.contract-sim-detail {
    background: #fbfcff;
    border: 1px solid #e5e7eb;
    border-radius: 0.65rem;
    display: grid;
    gap: 0.35rem;
    margin-top: 0.6rem;
    padding: 0.75rem;
}

.contract-sim-detail small {
    color: #44506a;
    display: block;
    font-size: 0.68rem;
    font-weight: 600;
}

.contract-sim-helper {
    color: #64748b;
    font-size: 0.75rem;
    font-weight: 600;
    margin-top: 0.75rem;
}

.contract-action-bar-spacer {
    height: 50px;
}

.contract-action-bar {
    align-items: center;
    background: #fff;
    border-top: 1px solid #e7e4f5;
    bottom: 0;
    box-shadow: 0 -8px 24px rgba(46, 29, 107, 0.08);
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: space-between;
    left: 232px;
    padding: 14px 28px;
    position: fixed;
    right: 0;
    z-index: 30;
}

.contract-action-bar-status {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    min-width: 0;

    span {
        color: #8b85a8;
        font-size:.8rem;
    }
}

.contract-action-bar-status .contract-sim-helper {
    margin-top: 0;
}

.contract-action-errors {
    color: var(--planning-pink-darker);
    display: grid;
    flex-basis: 100%;
    font-size: 0.72rem;
    font-weight: 700;
    gap: 3px;
}

.contract-action-errors strong {
    color: var(--planning-pink-darker);
    font-size: 0.76rem;
}

.contract-action-errors ul {
    margin: 0;
    padding-left: 18px;
}

.contract-action-bar-actions {
    align-items: center;
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
}

.contract-action-bar-actions .dashboard-primary-button,
.contract-action-bar-actions .employers-secondary-button,
.contract-action-bar-actions .profile-danger-button {
    white-space: nowrap;
    width: auto;
}

.contract-action-bar-actions--split {
    flex: 1 1 auto;
    width: 100%;
}

.contract-action-bar-actions--split > a,
.contract-action-bar-actions--split > form {
    flex: 1 1 0;
    min-width: 0;
}

.contract-action-bar-actions--split .employers-secondary-button,
.contract-action-bar-actions--split .profile-danger-button {
    white-space: nowrap;
    width: 100%;
}

.contract-action-bar-actions .contract-draft-button {
    background: #f3efff;
    border-color: #ded6fb;
}

.contract-wizard-form .employer-section-header {
    align-items: center;
    grid-template-columns: minmax(0, 1fr) auto;
}

.contract-wizard-form .employer-section-header > p {
    grid-column: 1 / -1;
}

.employer-step-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 0.9rem;
    container-type: inline-size;
    display: grid;
    min-width: 0;
    overflow: hidden;
}

.employer-step-card--overflow-visible {
    overflow: visible;
}

@media (max-width: 1024px) {
    .employer-step-card--overflow-visible {
        overflow: hidden;
    }
}

.employer-step-card-collapsed {
    background: #f8fafc;
}

.employer-section-header,
.employer-accordion-header {
    align-items: center;
    background: #fff;
    border: 0;
    border-top-left-radius: calc(0.9rem - 1px);
    border-top-right-radius: calc(0.9rem - 1px);
    color: #111827;
    cursor: pointer;
    display: grid;
    gap: 0.85rem;
    grid-template-columns: auto minmax(0, 1fr) auto;
    padding: 1.25rem;
    text-align: left;
    width: 100%;
}

.employer-section-header {
    cursor: default;
}

.employer-section-toggle {
    cursor: pointer;
}

.employer-section-toggle i {
    color: #7c3aed;
    justify-self: end;
    transition: transform 0.2s ease;
}

.employer-section-toggle[aria-expanded="true"] i {
    transform: rotate(180deg);
}

.employer-step-card-collapsed .employer-accordion-header {
    background: #f8fafc;
}

.employer-section-header strong,
.employer-section-header small,
.employer-accordion-header strong,
.employer-accordion-header small {
    display: block;
}

.employer-section-header strong,
.employer-accordion-header strong {
    font-size: 1rem;
}

.contract-header-inline {
    align-items: baseline;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.contract-header-inline strong,
.contract-header-inline small {
    display: inline !important;
    margin-top: 0 !important;
}

.employer-section-header small,
.employer-accordion-header small {
    color: #64748b;
    font-size: 0.76rem;
    margin-top: 0.15rem;
}

.employer-accordion-header i {
    color: #7c3aed;
    font-size: 1.1rem;
    transition: transform 0.2s ease;
}

.employer-accordion-body {
    border-top: 1px solid #e5e7eb;
    display: grid;
    gap: 1rem;
    min-width: 0;
    padding: 1.25rem;
}

.contract-schedule-grid {
    display: grid;
    gap: 0.75rem;
}

.contract-child-autocomplete {
    position: relative;
}

.contract-child-suggestions {
    margin-top: 0;
    max-height: min(22rem, calc(100vh - 8rem));
    overscroll-behavior: contain;
    overflow-x: hidden;
    overflow-y: auto;
    right: auto;
    -webkit-overflow-scrolling: touch;
    z-index: 30;
}

.contract-child-suggestion-group {
    display: grid;
}

.contract-child-suggestion-heading {
    background: #fbfafe;
    border-bottom: 1px solid #eef0f5;
    color: #4a466a;
    font-size: 0.72rem;
    font-weight: 900;
    padding: 0.55rem 0.75rem;
    position: sticky;
    top: 0;
    z-index: 1;
}

.contract-selected-child {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.contract-selected-child:has(> .contract-selected-child-card:only-child) {
    grid-template-columns: minmax(0, 1fr);
}

.contract-selected-child-card {
    background: #fbfafe;
    border: 1px solid #efedf9;
    border-radius: 12px;
    color: inherit;
    display: grid;
    gap: 3px;
    padding: 12px 14px;
    text-decoration: none;
}

.contract-selected-child span {
    color: #9c97b4;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
}

.contract-selected-child-title {
    text-transform: uppercase;
    align-items: center;
    display: flex;
    gap: 0.55rem;
    justify-content: space-between;
    min-width: 0;
}

.contract-selected-child-title i {
    color: #7146d8;
    flex: 0 0 auto;
    font-size: 1rem;
}

.contract-selected-child small {
    color: #8b85a8;
    font-size: 12.5px;
    font-weight: 400;
}

.contract-selected-child strong {
    color: #1c1b29;
    font-size: 14.5px;
    font-weight: 700;
}

.contract-child-info-card {
    align-content: start;
    height: 115px;
    overflow: hidden;
}

.contract-child-info-card strong,
.contract-child-info-card small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.contract-selected-child-card--with-avatar {
    column-gap: 0.75rem;
    grid-template-columns: auto minmax(0, 1fr);
}

.contract-selected-child-card--with-avatar .contract-selected-child-title {
    grid-column: 1 / -1;
}

.contract-selected-child-card--with-avatar .contract-selected-child-avatar {
    grid-column: 1;
    grid-row: 2 / span 2;
    height: 3.25rem;
    width: 3.25rem;
}

.contract-selected-child-card--with-avatar strong,
.contract-selected-child-card--with-avatar small {
    grid-column: 2;
}

.contract-selected-child-card--link:hover,
.contract-selected-child-card--link:focus-visible {
    border-color: #c9bcf7;
    outline: 0;
}

.contract-selected-child-card--link:hover strong,
.contract-selected-child-card--link:focus-visible strong {
    color: #7146d8;
}

.contract-selected-assistant-card {
    align-items: center;
    display: flex;
    gap: 0.75rem;
}

.contract-selected-child .contract-selected-assistant-avatar {
    align-items: center;
    background: var(--planning-purple-surface);
    border-radius: 10px;
    color: var(--planning-purple-dark);
    display: inline-flex;
    flex: 0 0 2.75rem;
    font-size: 0.86rem;
    font-weight: 900;
    height: 2.75rem;
    justify-content: center;
    letter-spacing: 0;
    overflow: hidden;
    text-transform: uppercase;
    width: 2.75rem;
}

.contract-selected-child .contract-selected-assistant-avatar img {
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.contract-selected-child .contract-selected-assistant-avatar span {
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
    letter-spacing: 0;
}

.contract-selected-assistant-copy {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.contract-selected-child-action {
    font-size: 0.72rem;
    height: 1.9rem;
    justify-self: start;
    min-height: 0;
    padding: 0 0.55rem;
    text-transform: none;
    white-space: nowrap;
}

.contract-selected-child-action i {
    font-size: 0.95rem;
    margin-right: 0.35rem;
}

.contract-schedule-row {
    align-items: center;
    display: grid;
    gap: 0.75rem;
    grid-template-columns: minmax(8rem, 0.7fr) repeat(2, minmax(0, 1fr)) auto;
}

.profile-defaults-schedule .contract-schedule-row {
    grid-template-columns: minmax(8rem, 0.7fr) repeat(2, minmax(0, 1fr)) auto;
}

.contract-day-toggle {
    align-items: center;
    background: #fbfcff;
    border: 1px solid #e3e8f2;
    border-radius: 0.65rem;
    color: #273452;
    display: inline-flex;
    font-size: 0.82rem;
    font-weight: 800;
    gap: 0.55rem;
    min-height: 3.1rem;
    padding: 0 0.85rem;
}

.contract-day-toggle input[type="checkbox"] {
    accent-color: #7146d8;
    height: 1rem;
    width: 1rem;
}

.contract-weeks-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.contract-weeks-months {
    display: grid;
    gap: 0.85rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.contract-weeks-month-label {
    background: transparent;
    border: 0;
    color: #64748b;
    cursor: pointer;
    display: block;
    font-size: 0.75rem;
    font-weight: 800;
    margin-bottom: 0.35rem;
    padding: 0;
    text-transform: uppercase;
}

.contract-weeks-month-label:hover {
    color: #7146d8;
    text-decoration: underline;
}

.contract-weeks-grid {
    display: grid;
    gap: 0.5rem;
    grid-template-columns: repeat(auto-fill, minmax(3.4rem, 1fr));
}

.contract-week-toggle {
    align-items: center;
    background: #fbfcff;
    border: 1px solid #e3e8f2;
    border-radius: 0.5rem;
    color: #273452;
    cursor: pointer;
    display: flex;
    font-size: 0.75rem;
    font-weight: 800;
    justify-content: center;
    padding: 0.6rem 0.35rem;
    text-align: center;
}

.contract-week-toggle:has(input:checked) {
    background: #f3efff;
    border-color: #c7b8f5;
    color: #5b35c8;
}

.contract-rest-columns {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
}

.contract-rest-columns .contract-holidays-fieldset {
    margin-top: 0;
}

.contract-holidays-fieldset {
    border: 0;
    margin: 1rem 0 0;
    min-width: 0;
    padding: 0;
}

.contract-fieldset-legend {
    align-items: center;
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.contract-holidays-fieldset legend {
    color: #64748b;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    margin-bottom: 0.5rem;
    padding: 0;
    text-transform: uppercase;
}

.contract-fieldset-counter {
    color: #94a3b8;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: none;
}

.contract-holidays-grid {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.4rem;
    min-width: 0;
    overflow-x: auto;
    padding-bottom: 0.15rem;
}

.contract-holiday-toggle {
    align-items: center;
    background: #fbfcff;
    border: 1px solid #e3e8f2;
    border-radius: 0.65rem;
    color: #273452;
    cursor: pointer;
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    font-size: 0.7rem;
    font-weight: 700;
    gap: 0.35rem;
    justify-content: space-between;
    min-width: 3.4rem;
    padding: 0.55rem 0.3rem;
    text-align: center;
}

.contract-holiday-toggle i {
    color: #7146d8;
    font-size: 1.35rem;
}

.contract-holiday-toggle:has(input:checked) {
    background: #f3efff;
    border-color: #c7b8f5;
}

.contract-schedule-actions {
    align-items: center;
    display: flex;
    gap: 0.45rem;
    justify-content: flex-end;
}

.contract-schedule-actions .employers-secondary-button {
    aspect-ratio: 1;
    min-height: 3.1rem;
    padding: 0;
    width: 3.1rem;
}

.employers-secondary-button:disabled {
    cursor: not-allowed;
    opacity: 0.45;
}

.contract-schedule-columns {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(7, minmax(6.5rem, 1fr));
    min-width: 0;
    overflow-x: auto;
}

.contract-schedule-day {
    background: #fbfafe;
    border: 1px dashed #e1ddf2;
    border-radius: 0.65rem;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 0.75rem;
}

.contract-schedule-day:has(input:checked) {
    border-color: #c9bcf7;
    border-style: solid;
}

.contract-schedule-day .profile-schedule-day-toggle input[type="checkbox"] {
    height: 1px;
    opacity: 0;
    position: absolute;
    width: 1px;
}

.contract-planning-card {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 20px 22px;
}

.contract-schedule-day-check {
    align-items: center;
    background: #6d28d9;
    border-radius: 5px;
    color: #fff;
    display: flex;
    flex: 0 0 auto;
    font-size: 10px;
    height: 18px;
    justify-content: center;
    width: 18px;
}

.contract-schedule-day-check i {
    font-size: 10px;
}

.contract-schedule-day:not(:has(input:checked)) .contract-schedule-day-check {
    background: #fff;
    border: 1.5px solid #b9b2d6;
}

.contract-schedule-day:not(:has(input:checked)) .contract-schedule-day-check i {
    display: none;
}

.contract-schedule-day:not(:has(input:checked)) .profile-schedule-day-name {
    color: #a9a4bf;
}

.contract-schedule-day--locked {
    background: #f7f6fc;
    border-color: #edeaf7;
    opacity: .72;
}

.contract-schedule-day--locked .profile-schedule-day-toggle {
    cursor: not-allowed;
}

.contract-schedule-day--rest {
    background: #fff7ed;
    border-color: #fed7aa;
}

.contract-schedule-day-rest-badge {
    background: #fff1de;
    border-radius: 0.4rem;
    color: #9a3412;
    cursor: help;
    font-size: 0.62rem;
    font-weight: 800;
    line-height: 1.3;
    margin: 0;
    padding: 0.25rem 0.4rem;
    text-align: center;
}

.contract-schedule-day-head {
    align-items: center;
    display: flex;
    justify-content: space-between;
}

.contract-schedule-day .contract-day-toggle {
    background: transparent;
    border: 0;
    min-height: 0;
    padding: 0;
}

.contract-schedule-day-copy {
    aspect-ratio: 1;
    background: transparent;
    border: 1px solid #e3e8f2;
    border-radius: 0.4rem;
    color: #7146d8;
    cursor: pointer;
    padding: 0.3rem;
}

.contract-schedule-day-copy:disabled {
    color: #cbd5e1;
    cursor: not-allowed;
}

.contract-schedule-day-times {
    display: grid;
    gap: 0.4rem;
}

.contract-schedule-day-times input[type="time"] {
    background: #fff;
    border: 1px solid #dfe4ef;
    border-radius: 0.5rem;
    color: #17213d;
    font: inherit;
    font-size: 0.78rem;
    padding: 0.4rem 0.5rem;
    width: 100%;
}

.contract-schedule-day-times input[type="time"]:disabled {
    background: #f1f3f9;
    color: #a7b0c2;
    cursor: not-allowed;
}

.contract-schedule-day-times small {
    color: #7146d8;
    display: block;
    font-size: 0.75rem;
    font-weight: 800;
    text-align: center;
}

.contract-summary-grid {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 0;
}

.contract-summary-grid div {
    background: #fbfcff;
    border: 1px solid #e5e7eb;
    border-radius: 0.65rem;
    display: grid;
    gap: 0.25rem;
    padding: 0.85rem;
}

.contract-summary-grid dt {
    color: #64748b;
    font-size: 0.75rem;
    font-weight: 800;
}

.contract-summary-grid dd {
    color: #111827;
    font-size: 1rem;
    font-weight: 900;
    margin: 0;
}

.contract-summary-grid small {
    color: #64748b;
    font-size: 0.68rem;
    font-weight: 700;
}

.contract-summary-total {
    background: #eef2ff !important;
    border-color: #c7d2fe !important;
}

.contract-summary-total dd {
    color: #4338ca;
    font-size: 1.15rem;
}

.contract-warning {
    align-items: center;
    background: #fff7ed;
    border: 1px solid #fed7aa;
    border-radius: 0.65rem;
    color: #9a3412;
    font-size: 0.78rem;
    font-weight: 700;
    gap: 0.55rem;
    margin: 0;
    padding: 0.85rem;
}

.contract-warning i {
    font-size: 1.1rem;
}

.contract-warning--sim-section {
    display: block;
    line-height: 1.45;
}

.contract-cmg-detail {
    display: grid;
    gap: 0.75rem;
}

.employer-parent-heading {
    align-items: center;
    display: flex;
    gap: 0.75rem;
    justify-content: space-between;
    min-height: 2.35rem;
}

.employer-parent-heading h2 {
    color: #111827;
    font-size: 0.95rem;
    margin: 0;
}

.employer-parents-grid {
    align-items: stretch;
    display: grid;
    gap: 1.25rem;
    grid-auto-rows: 1fr;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.employer-parent-block,
.employer-coparent-block {
    background: #fbf7ff;
    border-radius: 0.85rem;
    display: grid;
    gap: 1rem;
    grid-template-rows: auto 1fr;
    padding: 1rem;
}

.employer-coparent-block:not(.employer-coparent-block-active) {
    align-content: center;
    grid-template-rows: 1fr;
    justify-items: center;
    place-items: center;
    text-align: center;
}

.employer-coparent-block:not(.employer-coparent-block-active) .employer-coparent-heading {
    align-self: center;
    display: grid;
    gap: 0.8rem;
    justify-items: center;
    justify-self: center;
    width: auto;
}

.employer-coparent-block:not(.employer-coparent-block-active) .employer-coparent-actions {
    display: grid;
    justify-content: center;
    justify-self: center;
    place-items: center;
    width: auto;
}

.employer-coparent-block:not(.employer-coparent-block-active) .employer-coparent-heading h2 {
    display: none;
}

.employer-coparent-actions {
    align-items: center;
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: flex-end;
}

.employer-coparent-toggle {
    background: #fff;
    border-color: #b8a5f2;
    color: #5e39cf;
    font-size: 0.78rem;
    font-weight: 800;
    min-height: 2.5rem;
    padding: 0.55rem 0.75rem;
}

.employer-coparent-block-active .employer-coparent-actions {
    gap: 0.45rem;
}

.employer-coparent-block-active .employer-coparent-toggle {
    border-color: #c8b8ff;
    border-radius: 0.55rem;
    font-size: 0.75rem;
    min-height: 2.15rem;
    padding: 0.35rem 0.55rem;
}

.employer-coparent-block-active .employer-toggle-switch {
    height: 1.05rem;
    padding: 0.12rem;
    width: 1.95rem;
}

.employer-coparent-block-active .employer-toggle-switch::before {
    height: 0.81rem;
    width: 0.81rem;
}

.employer-coparent-block-active .employer-toggle input:checked+.employer-toggle-switch::before {
    transform: translateX(0.9rem);
}

.employer-coparent-block-active .employer-coparent-clear {
    border-radius: 0.55rem;
    font-size: 0.75rem;
    min-height: 2.15rem;
    padding: 0.35rem 0.55rem;
}

.employer-coparent-block:not(.employer-coparent-block-active) .employer-coparent-toggle {
    border-style: dashed;
    flex-direction: column;
    gap: 0.45rem;
    margin: 0 auto;
    min-height: 7rem;
    min-width: min(16rem, 100%);
}

.employer-coparent-block:not(.employer-coparent-block-active) .employer-toggle-switch {
    display: none;
}

.employer-coparent-block:not(.employer-coparent-block-active) .employer-coparent-toggle::before {
    align-items: center;
    border: 1px solid #d9cdfb;
    border-radius: 999px;
    content: "+";
    display: inline-flex;
    font-size: 1.4rem;
    font-weight: 800;
    height: 2.5rem;
    justify-content: center;
    line-height: 1;
    width: 2.5rem;
}

.employer-coparent-clear {
    font-size: 0.76rem;
    min-height: 2.5rem;
    padding: 0.55rem 0.75rem;
}

.employer-coparent-fields {
    display: grid;
    gap: 1rem;
}

.employer-identity-row {
    align-items: start;
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.employer-identity-row .profile-gender-card-group {
    margin: 0;
}

.employer-civility-group label {
    min-height: 2.6rem;
}

.employer-civility-group div {
    gap: 0.35rem;
}

.employer-civility-group legend,
.employer-identity-row .profile-field span {
    min-height: 1.2rem;
}

.employer-toggle {
    align-items: center;
    background: transparent;
    border-radius: 0.8rem;
    color: #5e39cf;
    cursor: pointer;
    display: inline-flex;
    font-size: 0.85rem;
    gap: 0.65rem;
    position: relative;
    width: fit-content;
}

.employer-toggle input {
    height: 1px;
    opacity: 0;
    position: absolute;
    width: 1px;
}

.employer-toggle-switch {
    background: #cbd5e1;
    border-radius: 999px;
    display: inline-flex;
    height: 1.35rem;
    padding: 0.16rem;
    transition: background 0.2s ease;
    width: 2.45rem;
}

.employer-toggle-switch::before {
    background: #fff;
    border-radius: 999px;
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.18);
    content: "";
    height: 1.03rem;
    transition: transform 0.2s ease;
    width: 1.03rem;
}

.employer-toggle input:checked+.employer-toggle-switch {
    background: #7046d5;
}

.employer-toggle input:checked+.employer-toggle-switch::before {
    transform: translateX(1.1rem);
}

.employer-toggle:has(input:focus-visible) {
    border-color: #8c72e4;
    box-shadow: 0 0 0 3px rgba(112, 70, 213, 0.12);
}

.employer-section-heading-row {
    align-items: center;
    display: flex;
    gap: 10px;
}

.profile-section-heading-title .employer-section-count-badge {
    align-items: center;
    background: #F4F2FE;
    border-radius: 999px;
    color: #4C3FA5;
    display: inline-flex;
    font-size: 0.72rem;
    font-weight: 700;
    height: 1.4rem;
    justify-content: center;
    padding: 0 0.55rem;
}

.employer-toggle-row-with-field {
    align-items: center;
    background: #FBFAFE;
    border: 1px solid #EFEDF9;
    border-radius: 0.9rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.25rem;
    padding: 0.6rem 0.9rem;
}

.employer-child-shared-name-field {
    min-width: 15rem;
}

.employer-child-table-scroll {
    overflow-x: auto;
}

.employer-child-table-header {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: 2.75rem minmax(7rem, 1.1fr) minmax(7rem, 1.1fr) 9.5rem 7.5rem 2.75rem;
    min-width: 40.25rem;
    padding: 0 0.25rem 0.35rem;
}

.employer-child-table-header span {
    color: #9C97B4;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.employer-child-table-header-aeeh {
    align-items: center;
    display: inline-flex;
    gap: 0.3rem;
}

.employer-child-table-header-aeeh i {
    color: #C0BAD6;
    font-size: 0.9rem;
    letter-spacing: 0;
}

.employer-children-list {
    display: grid;
    gap: 0.8rem;
}

.employer-child-row,
.employer-child-edit-row {
    align-items: center;
    display: grid;
    gap: 0.75rem;
    grid-template-columns: 2.75rem minmax(7rem, 1.1fr) minmax(7rem, 1.1fr) 9.5rem 7.5rem 2.75rem;
    min-width: 40.25rem;
}

.employer-child-row .child-row-field-label,
.employer-child-edit-row .child-row-field-label {
    display: none;
}

.employer-child-row .profile-field,
.employer-child-edit-row .profile-field {
    gap: 0;
}

.employer-child-actions-group .child-gender-field {
    grid-column: 1;
    grid-row: 1;
}

.employer-child-edit-row label[for$="_first_name"],
.employer-child-row label:has(input[name$="[first_name]"]) {
    grid-column: 2;
    grid-row: 1;
}

.employer-child-edit-row label[for$="_last_name"],
.employer-child-row label:has(input[name$="[last_name]"]) {
    grid-column: 3;
    grid-row: 1;
}

.employer-child-edit-row label[for$="_birth_date"],
.employer-child-row label:has(input[name$="[birth_date]"]) {
    grid-column: 4;
    grid-row: 1;
}

.employer-child-actions-group .child-aeeh-field {
    grid-column: 5;
    grid-row: 1;
}

.employer-child-remove {
    grid-column: 6;
    grid-row: 1;
}

.employer-child-remove {
    align-items: center;
    aspect-ratio: 1;
    background: transparent;
    border: 0;
    border-radius: 0.7rem;
    color: #B9B3CC;
    cursor: pointer;
    display: flex;
    height: 2.75rem;
    justify-content: center;
    padding: 0;
    width: 2.75rem;
}

.employer-child-remove:hover,
.employer-child-remove:focus-visible {
    background: var(--btn-danger-bg);
    color: var(--btn-danger-color);
    outline: 0;
}

.employer-child-remove--hidden {
    display: none;
}

.employer-child-remove .employer-child-remove-label {
    display: none;
}

.employer-child-remove i {
    align-items: center;
    display: inline-flex;
    font-size: 1.05rem;
    justify-content: center;
    line-height: 1;
    margin: 0;
}

.employer-error {
    color: #c83251;
    font-size: 0.75rem;
    font-weight: 700;
}

.employer-submit-actions {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 0.9rem;
    display: flex;
    justify-content: flex-end;
    padding: 1.25rem;
}

.employer-review-grid,
.employer-data-list {
    display: grid;
    gap: 0.75rem;
}

.employer-review-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.employer-review-grid span,
.employer-data-list dt {
    color: #64748b;
    font-size: 0.9rem;
}

.employer-review-grid strong,
.employer-data-list dd {
    color: #111827;
    font-weight: 800;
    margin: 0;
}

.employer-confirm-card {
    align-items: center;
    display: flex;
    justify-content: space-between;
}

.employer-detail-grid {
    align-items: start;
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
}

.employer-detail-column {
    align-content: start;
    display: grid;
    gap: 1rem;
}

.employer-detail-column-left .employer-parents-grid {
    grid-template-columns: minmax(0, 1fr);
}

.employer-section-header--plain {
    grid-template-columns: minmax(0, 1fr);
}

.employer-data-list div {
    border-bottom: 1px solid #eef2f7;
    display: grid;
    gap: 0.2rem;
    padding-bottom: 0.75rem;
}

.employer-child-list {
    display: grid;
    gap: 0;
}

.employer-child-edit-row {
    border-bottom: 1px solid #eef2f7;
    padding: 0.9rem 0;
}

.parent-children-add-list {
    gap: 0;
}

.parent-children-add-list .employer-child-row {
    border-bottom: 1px solid #eef2f7;
    padding: 0.9rem 0;
}

.parent-children-add-list .employer-child-row:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

@container (max-width: 640px) {
    .employer-child-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .contract-weeks-months {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .contract-selected-child {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@container (max-width: 420px) {
    .contract-weeks-months {
        grid-template-columns: minmax(0, 1fr);
    }

    .contract-selected-child {
        grid-template-columns: minmax(0, 1fr);
    }

    .contract-sim-line > span:first-child,
    .contract-sim-line--inline > span:first-child {
        white-space: normal;
    }
}

@media (max-width: 1024px) {
    .contract-selected-child {
        grid-template-columns: minmax(0, 1fr);
    }

    .contract-frame-fields-group {
        display: grid;
        gap: 0.85rem;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .contract-frame-fields-group .contract-field-grid-4 {
        display: contents;
    }

    .contract-field-grid-4 label[for="cdd_reason"] {
        grid-column: 1;
    }

    .contract-field-grid-4 label[for="cdd_reason_details"] {
        grid-column: 2;
    }

    .contract-holidays-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        overflow-x: visible;
        padding-bottom: 0;
    }

    .contract-holiday-toggle {
        min-width: 0;
    }
}

.employer-child-edit-row:first-child {
    padding-top: 0;
}

.employer-child-inline-form {
    align-items: end;
    display: contents;
    gap: 0.75rem;
}

.employer-child-actions-group {
    display: contents;
}

.child-gender-field {
    height: 2.75rem;
    position: relative;
    width: 2.75rem;
}

.child-gender-toggle {
    align-items: center;
    background: #F4F2FE;
    border: 0;
    border-radius: 0.85rem;
    cursor: pointer;
    display: grid;
    height: 2.75rem;
    overflow: hidden;
    place-items: center;
    padding: 0;
    width: 2.75rem;
}

.child-gender-toggle i {
    font-size: 1.25rem;
}

.child-gender-toggle--unknown i {
    color: #8B7BD8;
}

.child-gender-toggle--male {
    background: var(--child-avatar-male-bg);
}

.child-gender-toggle--male i {
    color: #2f6fed;
}

.child-gender-toggle--female {
    background: var(--child-avatar-female-bg);
}

.child-gender-toggle--female i {
    color: #ec4899;
}

.child-gender-toggle[aria-expanded="true"] {
    outline: 2px solid #8c72e4;
    outline-offset: 1px;
}

.child-avatar-thumb {
    align-self: end;
    height: 100%;
    object-fit: contain;
    object-position: center bottom;
    width: 100%;
}

.child-avatar-modal {
    align-items: center;
    display: flex;
    inset: 0;
    justify-content: center;
    padding: 1rem;
    position: fixed;
    z-index: 60;
}

.child-avatar-modal[x-cloak] {
    display: none;
}

.child-avatar-modal-backdrop {
    background: rgba(21, 33, 62, 0.45);
    inset: 0;
    position: absolute;
}

.child-avatar-modal-panel {
    background: #fff;
    border-radius: 1.25rem;
    box-shadow: 0 24px 60px rgba(21, 33, 62, 0.25);
    display: grid;
    gap: 1rem;
    max-height: 100%;
    max-width: 34rem;
    overflow-y: auto;
    padding: 1.5rem;
    position: relative;
    width: 100%;
}

.child-avatar-modal-hint {
    color: var(--landing-muted);
    font-size: 0.95rem;
    margin: 0;
}

.child-avatar-group h3 {
    color: var(--landing-muted);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    margin: 0 0 0.5rem;
    text-transform: uppercase;
}

.child-avatar-row {
    display: grid;
    gap: 0.6rem;
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.child-avatar-option {
    aspect-ratio: 1;
    background: var(--landing-lilac);
    border: 2px solid transparent;
    border-radius: 1rem;
    cursor: pointer;
    display: flex;
    overflow: hidden;
    padding: 0;
    width: 100%;
}

.child-avatar-row--male .child-avatar-option {
    background: var(--child-avatar-male-bg);
}

.child-avatar-row--female .child-avatar-option {
    background: var(--child-avatar-female-bg);
}

.child-avatar-option img {
    align-self: flex-end;
    height: 100%;
    object-fit: contain;
    object-position: center bottom;
    width: 100%;
}

.child-avatar {
    align-items: flex-end;
    background: var(--landing-lilac);
    border-radius: 0.85rem;
    display: inline-flex;
    flex: 0 0 auto;
    height: 2.75rem;
    overflow: hidden;
    width: 2.75rem;
}

.child-avatar--male {
    background: var(--child-avatar-male-bg);
}

.child-avatar--female {
    background: var(--child-avatar-female-bg);
}

.child-avatar img {
    height: 100%;
    object-fit: contain;
    object-position: center bottom;
    width: 100%;
}

.child-avatar--lg {
    height: 3.5rem;
    width: 3.5rem;
}

.child-avatar--sm {
    border-radius: 0.7rem;
    height: 2.25rem;
    width: 2.25rem;
}

.employers-child-list {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.employers-child-chip {
    display: inline-flex;
    position: relative;
}

/* Le prénom apparaît au survol, sans le délai de l'infobulle native. */
.employers-child-chip[data-name]::after {
    background: var(--landing-ink);
    border-radius: 0.45rem;
    bottom: calc(100% + 0.35rem);
    color: #fff;
    content: attr(data-name);
    font-size: 0.72rem;
    font-weight: 700;
    left: 50%;
    opacity: 0;
    padding: 0.25rem 0.55rem;
    pointer-events: none;
    position: absolute;
    transform: translateX(-50%);
    transition: opacity 120ms ease;
    white-space: nowrap;
    z-index: 5;
}

.employers-child-chip[data-name]:hover::after {
    opacity: 1;
}

.contracts-row-child {
    align-items: center;
    display: flex;
    gap: 0.75rem;
}

.contract-mobile-card-name--with-avatar {
    align-items: center;
    display: flex;
    gap: 0.75rem;
}

.child-avatar-option:hover,
.child-avatar-option:focus-visible {
    border-color: var(--landing-purple);
}

.child-avatar-option--selected {
    border-color: var(--landing-purple);
    box-shadow: 0 0 0 2px var(--landing-lilac);
}

.child-avatar-modal-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    justify-content: flex-end;
}

.child-aeeh-field {
    min-width: 0;
}

.child-aeeh-toggle {
    padding-right: 0;
}

.child-health {
    grid-column: 1 / -1;
    grid-row: 2;
}

.child-health summary {
    align-items: center;
    color: var(--landing-purple-dark);
    cursor: pointer;
    display: inline-flex;
    font-size: 0.85rem;
    font-weight: 700;
    gap: 0.4rem;
    padding: 0.25rem 0;
}

.child-health-fields {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding-top: 0.5rem;
}

.child-health-wide {
    grid-column: 1 / -1;
}

.child-health .child-health-label {
    color: var(--landing-muted);
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.child-health .profile-field {
    gap: 0;
}

@media (max-width: 640px) {
    .child-health-fields {
        grid-template-columns: minmax(0, 1fr);
    }
}

.child-lastname-input-wrap {
    position: relative;
}

.child-lastname-input-wrap i {
    display: none;
}

.child-lastname-field--linked .child-lastname-input-wrap i {
    align-items: center;
    bottom: 0;
    color: #C0BAD6;
    display: flex;
    font-size: 0.85rem;
    left: 0.7rem;
    position: absolute;
    top: 0;
}

.child-lastname-field--linked .child-lastname-input-wrap input {
    background: #FBFAFE;
    color: #6B6588;
    cursor: default;
    padding-left: 1.9rem;
}

.employer-child-actions-toggle[aria-expanded="true"] {
    border-color: #8c72e4;
    color: #4f2fc0;
}

.employer-action-dropdown {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 0.55rem;
    box-shadow: 0 18px 38px rgba(15, 23, 42, 0.12);
    display: grid;
    gap: 0.15rem;
    min-width: 13.5rem;
    padding: 0.35rem;
    position: absolute;
    right: 0;
    top: calc(100% + 0.45rem);
    z-index: 20;
}

.employer-action-dropdown a,
.employer-action-dropdown button {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 0.45rem;
    color: #273452;
    cursor: pointer;
    display: inline-flex;
    font: inherit;
    font-size: 0.8rem;
    font-weight: 800;
    gap: 0.45rem;
    justify-content: flex-start;
    min-height: 2.45rem;
    padding: 0.6rem 0.7rem;
    text-align: left;
    text-decoration: none;
    width: 100%;
}

.employer-action-dropdown a:hover,
.employer-action-dropdown button:hover,
.employer-action-dropdown a:focus-visible,
.employer-action-dropdown button:focus-visible {
    background: #f5f3ff;
    color: #4f2fc0;
    outline: 0;
}

.employer-action-dropdown .employer-action-danger {
    color: var(--btn-danger-color);
}

.employer-action-dropdown .employer-action-danger:hover,
.employer-action-dropdown .employer-action-danger:focus-visible {
    background: var(--btn-danger-bg);
    color: var(--btn-danger-color);
}

.employer-child-edit-row>form:not(.employer-child-inline-form),
.employer-child-actions-menu+form {
    display: none;
}

.employer-add-child-form {
    border-top: 1px solid #eef2f7;
    display: grid;
    gap: 0.75rem;
    margin-top: 0.25rem;
    padding-top: 1rem;
}

.employer-add-child-toggle {
    justify-self: end;
    margin-top: 0.5rem;
}

@media (max-width: 1180px) {
    .employer-detail-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 1024px) {

    .employers-header,
    .employer-confirm-card {
        align-items: stretch;
        flex-direction: column;
    }

    .employers-hero-stats,
    .employers-card-grid,
    .employer-review-grid {
        grid-template-columns: 1fr;
    }

    .employer-parents-grid {
        grid-template-columns: 1fr;
    }

    .employer-child-table-header {
        display: none;
    }

    .employer-child-row .child-row-field-label,
    .employer-child-edit-row .child-row-field-label {
        display: inline;
    }

    .employer-child-row .profile-field,
    .employer-child-edit-row .profile-field {
        gap: 0.35rem;
    }

    .employer-toggle-row-with-field {
        flex-direction: column;
        align-items: stretch;
    }

    .employer-child-shared-name-field {
        margin-left: 0;
        min-width: 0;
        width: 100%;
    }

    .employer-child-row,
    .employer-child-edit-row {
        align-items: center;
        grid-template-columns: auto 1fr auto;
        min-width: 0;
        row-gap: 0.65rem;
    }

    .employer-child-actions-group {
        display: contents;
    }

    .employer-child-actions-group .child-gender-field {
        grid-column: 1;
        grid-row: 1;
    }

    .employer-child-actions-group .employer-action-dropdown {
        left: 0;
        min-width: 13.5rem;
        right: auto;
    }

    .employer-child-actions-group .child-aeeh-field {
        grid-column: 2;
        grid-row: 1;
        justify-self: stretch;
    }

    .child-aeeh-toggle {
        background: #FBFAFE;
        border: 1px solid #EFEDF9;
        border-radius: 0.85rem;
        gap: 0.65rem;
        min-height: 2.9rem;
        padding: 0 0.85rem;
        width: 100%;
    }

    .child-aeeh-toggle .child-row-field-label {
        color: #3B3757;
        font-size: 0.85rem;
        font-weight: 700;
    }

    .employer-child-remove {
        grid-column: 3;
        grid-row: 1;
    }

    .employer-child-edit-row label[for$="_first_name"],
    .employer-child-row label:has(input[name$="[first_name]"]) {
        grid-column: 1 / -1;
        grid-row: 2;
    }

    .employer-child-edit-row label[for$="_last_name"],
    .employer-child-row label:has(input[name$="[last_name]"]) {
        grid-column: 1 / -1;
        grid-row: 3;
    }

    .employer-child-row .child-lastname-field--linked,
    .employer-child-edit-row .child-lastname-field--linked {
        display: none;
    }

    .employer-child-edit-row label[for$="_birth_date"],
    .employer-child-row label:has(input[name$="[birth_date]"]) {
        grid-column: 1 / -1;
        grid-row: 4;
    }

    .child-health {
        grid-row: 5;
    }

}

@media (max-width: 800px) {
    .landing-header-actions {
        gap: 0.35rem;
    }

    .landing-header-action {
        font-size: 0.75rem;
        padding: 0.55rem 0.6rem;
    }

    .landing-desktop-only {
        display: none;
    }

    .landing-feature-grid {
        grid-template-columns: 1fr 1fr;
    }

    .landing-feature-card h3 {
        font-size: 0.76rem;
    }

    .landing-feature-card p {
        font-size: 0.75rem;
    }
}
.dashboard-shell {
    color: #1c1b29;
    font-family: "Plus Jakarta Sans", "Trebuchet MS", "Segoe UI", sans-serif;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

.dashboard-app-frame {
    align-items: flex-start;
    display: flex;
}

.dashboard-navigation {
    align-self: flex-start;
    flex: 0 0 232px;
    min-height: 100vh;
    position: sticky;
    top: 0;
    z-index: 20;
}

.dashboard-sidebar {
    background: #fff;
    border-right: 1px solid #edeaf7;
    display: flex;
    flex-direction: column;
    gap: 26px;
    min-height: 100vh;
    padding: 22px 16px;
    position: static;
    width: 232px;
}

.dashboard-brand {
    display: inline-flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    padding: 6px 8px 0;
}

.dashboard-brand img {
    display: block;
    max-width: 150px;
    width: 150px;
}

.dashboard-sidebar-brand small {
    color: #9c97b4;
    font-size: 13px;
    margin-top: 0;
}

.dashboard-menu {
    display: grid;
    gap: 2px;
}

.dashboard-menu-heading {
    color: #a9a4bf;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.12em;
    margin: 22px 0 4px;
    padding: 0 12px;
    text-transform: uppercase;
}

.dashboard-menu-heading:first-of-type {
    margin-top: 4px;
}

.dashboard-menu-link {
    align-items: center;
    border-radius: 12px;
    color: #4a466a;
    display: flex;
    font-size: 14px;
    font-weight: 700;
    gap: 12px;
    min-height: 40px;
    padding: 0 12px;
}

.dashboard-menu-link i {
    color: #7b7796;
    display: inline-flex;
    font-size: 1.1rem;
    justify-content: center;
    width: 1.1rem;
}

.dashboard-menu-link:hover {
    background: #f8f6fe;
    color: #4a466a;
}

.dashboard-menu-link.dashboard-menu-active {
    background: #f1eefe;
    color: #4c1d95;
}

.dashboard-menu-link.dashboard-menu-active i {
    color: #6d28d9;
}

.dashboard-menu-link.dashboard-menu-link-disabled {
    color: #c3c0d4;
    cursor: not-allowed;
    pointer-events: none;
}

.dashboard-menu-link.dashboard-menu-link-disabled i {
    color: #d8d5e8;
}

.dashboard-help-card {
    align-items: center;
    background: #fcfbff;
    border: 1px solid #eeeafd;
    border-radius: 0.55rem;
    bottom: 1.2rem;
    display: flex;
    gap: 0.5rem;
    left: 0.8rem;
    padding: 0.7rem;
    position: absolute;
    width: calc(100% - 1.6rem);
}

.dashboard-help-card strong {
    display: block;
    font-size: 0.75rem;
}

.dashboard-help-card p {
    color: #7b849b;
    font-size: 0.75rem;
    line-height: 1.4;
    margin: 0.25rem 0 0.45rem;
}

.dashboard-help-avatar {
    background: #f9c5a7;
    border-radius: 50%;
    flex: 0 0 2.4rem;
    height: 2.4rem;
    position: relative;
}

.dashboard-help-avatar::after {
    background: #9670dc;
    border-radius: 50% 50% 20% 20%;
    bottom: 0;
    content: "";
    height: 1.45rem;
    left: 0.35rem;
    position: absolute;
    width: 1.7rem;
}

.dashboard-help-avatar span {
    background: #5e3c38;
    border-radius: 50%;
    height: 1.1rem;
    left: 0.65rem;
    position: absolute;
    top: 0.25rem;
    width: 1.1rem;
    z-index: 1;
}

.dashboard-outline-button {
    background: #fff;
    border: 1px solid #8164e3;
    border-radius: 0.25rem;
    color: #6844d1;
    font-size: 0.75rem;
    padding: 0.32rem 0.55rem;
}

.dashboard-user-avatar {
    align-items: center;
    background: #d9ccff;
    border-radius: 50%;
    color: #6f46d4;
    display: flex;
    font-size: 0.8rem;
    height: 2rem;
    justify-content: center;
    width: 2rem;
}

.dashboard-user-copy {
    display: grid;
    gap: 0.1rem;
}

.dashboard-user-copy strong {
    font-size: 0.75rem;
}

.dashboard-user-copy span {
    color: #7e879b;
    font-size: 0.75rem;
}

.dashboard-sidebar-user {
    border-top: 1px solid #edeaf7;
    display: grid;
    gap: 4px;
    margin-top: auto;
    padding: 18px 0 0;
}

.dashboard-sidebar-user-name {
    color: #273452;
    font-size: 0.75rem;
    overflow: hidden;
    padding: 0 12px 0.25rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-sidebar-greeting {
    display: none;
}

.dashboard-sidebar-user form {
    margin: 0;
}

.dashboard-sidebar-action {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 12px;
    color: #6b6788;
    cursor: pointer;
    display: flex;
    font: inherit;
    font-size: 13.5px;
    gap: 12px;
    min-height: 36px;
    padding: 0 12px;
    text-align: left;
    width: 100%;
}

.dashboard-sidebar-action i {
    color: #9c97b4;
    font-size: 1.05rem;
}

.dashboard-sidebar-action:hover {
    background: #f8f6fe;
    color: #6b6788;
}

.dashboard-sidebar-action:hover i {
    color: #9c97b4;
}

.dashboard-sidebar-action.dashboard-menu-active {
    background: #f1eefe;
    color: #4c1d95;
}

.dashboard-sidebar-action.dashboard-menu-active i {
    color: #6d28d9;
}

.dashboard-sidebar-profile,
.dashboard-menu-link .dashboard-menu-chevron,
.dashboard-menu-heading--mobile-only {
    display: none;
}

.dashboard-mobile-bar {
    display: none;
}

.dashboard-main {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 18px;
    min-height: 100vh;
    min-width: 0;
    padding: 20px 28px 40px;
}

@media (min-width: 1921px) {
    .dashboard-main {
        margin-inline: auto;
        max-width: 1600px;
    }
}

.toast-stack {
    display: grid;
    gap: 0.65rem;
    max-width: min(24rem, calc(100vw - 2rem));
    position: fixed;
    right: 1.2rem;
    top: 1.2rem;
    z-index: 60;
}

.app-toast {
    align-items: flex-start;
    background: #fff;
    border: 1px solid #e9ebf3;
    border-radius: 0.55rem;
    box-shadow: 0 0.75rem 1.7rem #273b6b1c;
    color: #273452;
    display: flex;
    gap: 0.65rem;
    padding: 0.8rem 0.9rem;
}

.app-toast>i {
    flex: 0 0 auto;
    font-size: 1.2rem;
    margin-top: 0.05rem;
}

.app-toast p {
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.45;
    margin: 0;
}

.app-toast button {
    background: transparent;
    border: 0;
    color: inherit;
    cursor: pointer;
    margin: -0.2rem -0.25rem 0 auto;
    padding: 0.15rem;
}

.app-toast-success {
    border-color: #ccebdc;
}

.app-toast-success>i {
    color: #3f9c72;
}

.app-toast-error {
    border-color: #f7c9d3;
}

.app-toast-error>i,
.app-toast-error button {
    color: #c83251;
}

.dashboard-welcome {
    align-items: center;
    background: linear-gradient(120deg, #F3EEFE 0%, #FBF6FF 52%, #FFF4F8 100%);
    border-radius: 0.65rem;
    display: flex;
    justify-content: space-between;
    overflow: hidden;
    padding: 1.8rem 2.4rem;
    position: relative;
    border: 1px solid #e7e0ff;
}

.dashboard-kicker {
    color: #7146d8;
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    margin: 0;
    text-transform: uppercase;
}

.dashboard-welcome h1 {
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: -0.04em;
    margin: 0.25rem 0 0.8rem;
}

.dashboard-welcome h1 span {
    font-size: 1.25rem;
}

.dashboard-welcome-copy {
    color: #566079;
    font-size: 0.92rem;
    line-height: 1.55;
    margin: 0 0 1rem;
}

.dashboard-welcome-meta {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem;
}

.dashboard-welcome-meta > span {
    color: #8991a5;
    font-size: 0.85rem;
    font-weight: 600;
}

.dashboard-primary-button {
    align-items: center;
    background: linear-gradient(110deg, #7146d8, #6231c6);
    border: 0;
    border-radius: var(--btn-radius);
    box-shadow: 0 0.45rem 1rem #6e46d82b;
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    font-size: 0.82rem;
    font-weight: 800;
    gap: 0.4rem;
    justify-content: center;
    min-height: var(--btn-height-md);
    padding: 0.7rem 1rem;
    text-decoration: none;
}

.dashboard-primary-button:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

button i,
.dashboard-primary-button span {
    font-size: 0.9rem;
    margin-left: 0.5rem;
}

button i {
    margin-left: 0;
}

.dashboard-primary-button.employers-success-button,
.employers-secondary-button.employers-success-button {
    background: var(--planning-green);
    border-color: var(--planning-green);
    box-shadow: 0 0.45rem 1rem rgba(21, 128, 61, .22);
    color: #fff;
}

.dashboard-primary-button.employers-success-button:hover,
.employers-secondary-button.employers-success-button:hover {
    background: var(--planning-green-dark);
    border-color: var(--planning-green-dark);
}

.dashboard-primary-button.employers-danger-button,
.employers-secondary-button.employers-danger-button {
    background: var(--planning-pink-darker);
    border-color: var(--planning-pink-darker);
    box-shadow: 0 0.45rem 1rem rgba(157, 23, 77, .2);
    color: #fff;
}

.dashboard-primary-button.employers-danger-button:hover,
.employers-secondary-button.employers-danger-button:hover {
    background: var(--planning-pink-dark);
    border-color: var(--planning-pink-dark);
}

.dashboard-sprite {
    background-image: url('../images/sprite1.png');
    background-repeat: no-repeat;
    background-size: 768px 512px;
    display: inline-block;
    flex: 0 0 auto;
}

.dashboard-hero-illustration {
    flex: 0 0 auto;
    height: auto;
    position: relative;
    width: min(300px, 32vw);
    z-index: 1;
}

@media (max-width: 1100px) {
    .dashboard-welcome {
        align-items: flex-start;
        flex-direction: column;
    }

    .dashboard-hero-illustration {
        align-self: center;
        margin-top: 1.25rem;
        width: min(240px, 55vw);
    }
}

.dashboard-assistant {
    background-position: -648px -24px;
    bottom: -90px;
    height: 250px;
    position: absolute;
    right: 2.5rem;
    width: 185px;
    z-index: 1;
}

.dashboard-section {
    margin-top: 1.35rem;
}

.dashboard-section-heading {
    align-items: baseline;
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.dashboard-panel-heading h2 {
    font-size: 0.9rem;
    margin: 0;
}

.dashboard-section-heading h2 {
    font-size: 1.15rem;
    font-weight: 800;
    margin: 0;
}

.dashboard-section-heading>span {
    color: #9097a9;
    font-size: 0.75rem;
}

.dashboard-config-progress {
    align-items: center;
    display: flex;
    gap: 0.6rem;
}

.dashboard-config-progress > span:first-child {
    color: #566079;
    font-size: 0.75rem;
    font-weight: 700;
    white-space: nowrap;
}

.dashboard-config-progress-track {
    background: #eeeafd;
    border-radius: 999px;
    display: block;
    height: 0.3rem;
    position: relative;
    width: 6.5rem;
}

.dashboard-config-progress-fill {
    background: linear-gradient(110deg, #7146d8, #f4869e);
    border-radius: inherit;
    display: block;
    height: 100%;
    min-width: 0.3rem;
}

.dashboard-config-progress-dot {
    background: #7146d8;
    border: 2px solid #fff;
    border-radius: 50%;
    box-shadow: 0 0 0 1px #d8cff8;
    height: 0.55rem;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 0.55rem;
}

.dashboard-progress {
    background: #eeeafd;
    border-radius: 999px;
    height: 0.42rem;
    margin: -0.25rem 0 0.8rem;
    overflow: hidden;
    width: 100%;
}

.dashboard-progress span {
    background: linear-gradient(110deg, #7146d8, #f4869e);
    border-radius: inherit;
    display: block;
    height: 100%;
    min-width: 0;
}

.dashboard-step-cards {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(2, 1fr);
}

.dashboard-step-card {
    align-items: flex-start;
    background: #fff;
    border: 1px solid #e9ebf3;
    border-radius: 0.75rem;
    box-shadow: 0 0.3rem 0.8rem #273b6b08;
    color: inherit;
    display: flex;
    gap: 0.85rem;
    padding: 1rem;
    position: relative;
    text-decoration: none;
    transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.dashboard-step-card-body {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.dashboard-step-card:hover,
.dashboard-step-card:focus-visible {
    border-color: #d8cff8;
    box-shadow: 0 0.45rem 1rem #273b6b12;
    outline: 0;
    transform: translateY(-1px);
}

.dashboard-step-card-success {
    border-color: #ccebdc;
    box-shadow: 0 0.35rem 0.9rem rgba(63, 156, 114, 0.08);
}

.dashboard-step-card-current {
    background: #f8f6fe;
    border-color: #d8cff8;
}

.dashboard-step-card-locked {
    background: #f7f7fa;
    cursor: not-allowed;
    opacity: 0.6;
    pointer-events: none;
}

.dashboard-step-card-locked:hover,
.dashboard-step-card-locked:focus-visible {
    border-color: #e9ebf3;
    box-shadow: 0 0.3rem 0.8rem #273b6b08;
    transform: none;
}

.dashboard-step-badge {
    display: none;
}

.dashboard-step-card-head {
    align-items: baseline;
    display: flex;
    gap: 0.5rem;
    justify-content: space-between;
}

.dashboard-step-count {
    color: #9097a9;
    font-size: 0.8rem;
    font-weight: 700;
}

.dashboard-step-icon {
    align-items: center;
    aspect-ratio: 1;
    border-radius: 50%;
    display: inline-flex;
    flex: 0 0 52px;
    font-size: 1.4rem;
    height: 52px;
    justify-content: center;
    width: 52px;
}

.dashboard-icon-purple {
    background: #f2edff;
    color: #9570df;
}

.dashboard-icon-green {
    background: #eafaf2;
    color: #50c795;
}

.dashboard-icon-blue {
    background: #eef7ff;
    color: #67a7f6;
}

.dashboard-icon-orange {
    background: #fff1e5;
    color: #ff914c;
}

.dashboard-icon-success {
    background: #eafaf2;
    color: #3f9c72;
}

.dashboard-step-card h3 {
    font-size: 0.92rem;
    font-weight: 700;
    margin: 0;
}

.dashboard-step-card p {
    color: #788197;
    font-size: 0.78rem;
    line-height: 1.45;
    margin: 0;
}

.dashboard-step-cta {
    color: #9097a9;
    font-size: 0.75rem;
    font-weight: 700;
    margin-top: 0.4rem;
}

.dashboard-step-cta-active {
    color: #6340d0;
}

.dashboard-text-button {
    background: transparent;
    border: 0;
    color: #6340d0;
    cursor: pointer;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0;
}

.dashboard-text-button-success {
    color: #3f9c72;
}

.dashboard-step-card .dashboard-text-button {
    margin-top: 0.5rem;
}

.dashboard-text-button span {
    margin-left: 0.25rem;
}

.dashboard-overview-grid {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    margin-top: 1rem;
}

@media (max-width: 1100px) {
    .dashboard-overview-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

.dashboard-config-column {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
}

.dashboard-config-column .dashboard-security-banner {
    flex: 1;
    margin-top: 0;
}

.dashboard-panel {
    background: #fff;
    border: 1px solid #e9ebf3;
    border-radius: 0.55rem;
    box-shadow: 0 0.3rem 0.8rem #273b6b08;
    min-height: 225px;
    padding: 1rem;
}

.dashboard-config-panel,
.dashboard-benefits-panel {
    border-color: #ece8fb;
    border-radius: 1rem;
    padding: 1.5rem;
}

.dashboard-panel-heading {
    align-items: center;
    display: flex;
    justify-content: space-between;
}

.dashboard-panel-heading>span {
    color: #747d92;
    font-size: 0.75rem;
}

.dashboard-heading-icon {
    color: #7044d9;
    margin-right: 0.35rem;
}

.dashboard-metrics {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin: 1.8rem 0 1.4rem;
}

.dashboard-metrics>div {
    border-right: 1px solid #eef0f5;
    padding: 0 0.5rem;
    text-align: center;
}

.dashboard-metrics>div:last-child {
    border-right: 0;
}

.dashboard-metrics strong {
    display: block;
    font-size: 0.95rem;
    margin-bottom: 0.35rem;
}

.dashboard-metrics span {
    color: #727c92;
    font-size: 0.75rem;
    line-height: 1;
}

.dashboard-empty-planning-panel {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    grid-column: 1 / -1;
    justify-content: center;
    padding: 2.5rem 1.5rem;
    text-align: center;
}

.dashboard-empty-planning-panel i {
    color: #c0bad6;
    font-size: 2.25rem;
}

.dashboard-empty-planning-panel h2 {
    font-size: 1.05rem;
    font-weight: 800;
    margin: 0;
}

.dashboard-empty-planning-panel p {
    color: #788197;
    font-size: 0.85rem;
    margin: 0;
    max-width: 26rem;
}

.dashboard-empty-note {
    align-items: center;
    background: #eff7ff;
    border: 1px solid #dfedff;
    border-radius: 0.35rem;
    color: #5e6a80;
    display: flex;
    font-size: 0.75rem;
    gap: 0.6rem;
    padding: 0.7rem;
}

.dashboard-benefits-panel h2 {
    font-size: 1.15rem;
    font-weight: 800;
    margin: 0 0 0.4rem;
}

.dashboard-benefits-list {
    display: grid;
    gap: 0;
}

.dashboard-benefit-item {
    border-top: 1px solid #eef0f5;
    display: flex;
    gap: 0.75rem;
    padding: 1rem 0;
}

.dashboard-benefit-item i {
    color: #7146d8;
    flex: 0 0 auto;
    font-family: "Phosphor-Duotone" !important;
    font-size: 1.05rem;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    margin-top: 0.15rem;
}
.dashboard-benefit-item i.ph-calendar-blank:before {
    content: "\e10b";
}

.dashboard-benefit-item i.ph-calculator:before {
    content: "\e539";
}

.dashboard-benefit-item i.ph-paper-plane-tilt:before {
    content: "\e399";
}

.dashboard-benefit-item i.ph-umbrella:before {
    content: "\e685";
}

.dashboard-benefit-item strong {
    display: block;
    font-size: 0.88rem;
    margin-bottom: 0.25rem;
}

.dashboard-benefit-item p {
    color: #788197;
    font-size: 0.8rem;
    line-height: 1.5;
    margin: 0;
}

.dashboard-empty-note>i {
    color: #377fe4;
    font-size: 1rem;
}

.dashboard-empty-note strong {
    font-size: 0.75rem;
}

.dashboard-empty-note p {
    margin: 0.2rem 0 0;
}

.dashboard-todo-list {
    display: grid;
    gap: 0.85rem;
    list-style: none;
    margin: 1.4rem 0 0;
    padding: 0;
}

.dashboard-todo-list li {
    align-items: center;
    color: #505a71;
    display: flex;
    font-size: 0.75rem;
    gap: 0.6rem;
}

.dashboard-todo-check {
    border: 1px solid #d5dbe8;
    border-radius: 50%;
    height: 1rem;
    width: 1rem;
}

.dashboard-deadline-empty {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 175px;
    text-align: center;
}

.dashboard-calendar-illustration {
    color: #a087ea;
    font-size: 3.3rem;
    line-height: 1;
    opacity: 0.6;
}

.dashboard-deadline-empty strong {
    font-size: 0.75rem;
    margin-top: 0.7rem;
}

.dashboard-deadline-empty p {
    color: #7d8599;
    font-size: 0.75rem;
    margin: 0.35rem 0 0.8rem;
}

.dashboard-security-banner {
    align-items: center;
    background: #fffaf0;
    border: 1px solid #f9e8c0;
    border-radius: 0.55rem;
    display: flex;
    gap: 0.8rem;
    margin-top: 1rem;
    padding: 0.75rem 1rem;
}

.dashboard-bulb {
    color: #f3ad2d;
    font-size: 1.5rem;
}

.dashboard-security-banner strong {
    font-size: 0.75rem;
}

.dashboard-security-banner p {
    color: #6f7481;
    font-size: 0.75rem;
    margin: 0.2rem 0 0;
}

.dashboard-security-banner .dashboard-text-button {
    margin-left: auto;
    white-space: nowrap;
}

.dashboard-security-banner-trust {
    background: #eefbf5;
    border-color: #cfe8dd;
}

.dashboard-security-banner-trust .dashboard-bulb {
    color: #22a97c;
}
.dashboard-home-header {
    align-items: flex-start;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    margin-bottom: 1.25rem;
}

.dashboard-home-header h1 {
    font-size: clamp(1.3rem, 2.5vw, 1.85rem);
    font-weight: 800;
    letter-spacing: -0.04em;
    margin: 0 0 0.35rem;
}

.dashboard-home-subtitle {
    color: #788197;
    font-size: 0.85rem;
    margin: 0;
}

.dashboard-home-header-actions {
    align-items: center;
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.dashboard-home-header-actions .dashboard-outline-button {
    min-height: 2.75rem;
    padding: 0.7rem 1rem;
}

.dashboard-home-main,
.dashboard-home-side {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
}

.dashboard-overview-grid > .dashboard-stats-panel {
    grid-column: 1 / -1;
    min-height: 0;
}

.dashboard-overview-grid > .dashboard-week-panel {
    grid-column: 1 / -1;
}

.dashboard-overview-grid > .dashboard-parent-planning-panel {
    grid-column: 1 / -1;
}

.dashboard-pill {
    background: #f1eefe;
    border-radius: 999px;
    color: #6340d0;
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 700;
    margin-left: 0.4rem;
    padding: 0.22rem 0.55rem;
    vertical-align: middle;
}

.dashboard-avatar {
    align-items: center;
    border-radius: 999px;
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 0.78rem;
    font-weight: 800;
    height: 2.6rem;
    justify-content: center;
    width: 2.6rem;
}

.dashboard-avatar-green {
    background: #eafaf2;
    color: #2f9d6f;
}

.dashboard-avatar-purple {
    background: #f2edff;
    color: #7146d8;
}

.dashboard-avatar-pink {
    background: #fdeef3;
    color: #d6336c;
}

.dashboard-week-panel {
    min-height: 0;
}

.dashboard-week-heading {
    align-items: center;
    gap: 1rem;
}

.dashboard-week-actions {
    align-items: center;
    display: flex;
    flex: 0 0 auto;
    gap: 1rem;
}

.dashboard-week-toggle {
    align-items: center;
    background: var(--planning-surface-soft);
    border: 1px solid var(--planning-border-control);
    border-radius: 999px;
    display: inline-flex;
    padding: 0.25rem;
}
.planning-field .dashboard-week-toggle {
    align-self: flex-start;
}

.dashboard-week-toggle-button {
    border-radius: 999px;
    color: var(--planning-text-tertiary);
    font-size: 0.74rem;
    font-weight: 900;
    padding: 0.42rem 0.65rem;
    text-decoration: none;
}

.dashboard-week-toggle-button-active {
    background: var(--planning-purple);
    color: var(--planning-surface);
}

.dashboard-week-ics {
    position: relative;
}

.dashboard-week-ics-popover {
    background: var(--planning-surface);
    border-radius: 16px;
    box-shadow: 0 16px 40px rgba(28, 27, 41, .18);
    padding: 16px;
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    width: 320px;
    z-index: 20;
}

.dashboard-week-ics-text {
    color: var(--planning-text-secondary-2);
    font-size: 12.5px;
    margin: 0 0 10px;
}

.dashboard-week-grid {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    margin-top: 1.4rem;
}

.dashboard-week-grid-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.dashboard-week-grid-weekend {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.dashboard-week-day {
    background: var(--planning-surface-soft-3);
    border: 1px solid var(--planning-border);
    border-radius: 0.8rem;
    min-height: 8.2rem;
    padding: 0.9rem;
    text-decoration: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.dashboard-week-day:hover {
    border-color: var(--planning-purple-border);
    box-shadow: 0 0.45rem 1.1rem rgba(76, 29, 149, 0.08);
    transform: translateY(-1px);
}

.dashboard-week-day-selected {
    background: var(--planning-purple-surface-3);
    border-color: var(--planning-purple-border);
    box-shadow: 0 0 0 1px var(--planning-purple-border);
}

.dashboard-week-day-muted {
    color: var(--planning-text-weak);
}

.dashboard-week-day-head {
    align-items: center;
    display: flex;
    justify-content: space-between;
}

.dashboard-week-day-head span {
    color: var(--planning-lavender);
    font-size: 0.73rem;
    font-weight: 900;
    text-transform: uppercase;
}

.dashboard-week-day-head strong {
    color: var(--planning-text-secondary);
    font-size: 0.9rem;
}

.dashboard-week-day-children {
    border-top: 1px solid var(--planning-border-grid);
    display: grid;
    gap: 0.45rem;
    margin-top: 0.8rem;
    padding-top: 0.75rem;
}

.dashboard-week-child-line {
    align-items: center;
    background: var(--planning-pink-surface-2);
    border-radius: 0.35rem;
    color: var(--planning-pink-darker);
    display: flex;
    font-size: 0.72rem;
    font-weight: 800;
    gap: 0.45rem;
    justify-content: space-between;
    min-height: 1.35rem;
    padding: 0.2rem 0.45rem;
}

.dashboard-week-child-line:nth-child(even) {
    background: var(--contract-type-blue-surface);
    color: var(--contract-type-blue);
}

.dashboard-week-child-line-absent,
.dashboard-week-child-line-absent:nth-child(even) {
    background: var(--planning-surface-soft);
    color: var(--planning-text-tertiary);
}

.dashboard-week-child-line span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-week-child-line strong {
    flex: 0 0 auto;
    font-size: 0.7rem;
}

.dashboard-week-day-empty {
    color: var(--planning-text-weak);
    font-size: 0.74rem;
    font-weight: 700;
}

.dashboard-week-day-events {
    display: grid;
    gap: 0.5rem;
    margin-top: 0.65rem;
}

.dashboard-week-activity-card,
.dashboard-week-holiday-card {
    background: var(--planning-surface);
    border: 1px solid var(--planning-lavender-border);
    border-left: 4px solid var(--planning-lavender);
    border-radius: 0.55rem;
    color: var(--planning-text-tertiary);
    display: grid;
    gap: 0.28rem;
    min-height: 3.1rem;
    overflow: hidden;
    padding: 0.55rem 0.65rem;
}

.dashboard-week-holiday-card {
    border-color: var(--planning-orange-border);
    border-left-color: var(--planning-orange);
}

.dashboard-week-activity-card strong,
.dashboard-week-holiday-card strong {
    color: var(--planning-text);
    font-size: 0.78rem;
    font-weight: 900;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-week-activity-card span,
.dashboard-week-holiday-card span {
    align-items: center;
    color: var(--planning-text-weak);
    display: flex;
    font-size: 0.72rem;
    font-weight: 800;
    gap: 0.25rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-week-activity-card i,
.dashboard-week-holiday-card i {
    flex: 0 0 auto;
}

.dashboard-week-holiday-card strong,
.dashboard-week-holiday-card span {
    color: var(--planning-orange-dark);
}

.dashboard-week-detail {
    background: var(--planning-surface-soft);
    border: 1px solid var(--planning-border);
    border-radius: 0.9rem;
    margin-top: 1rem;
    padding: 1rem;
}

.dashboard-week-leave-card {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.dashboard-week-leave-card p {
    color: var(--planning-text-secondary-2);
    font-size: 13px;
    margin: 0;
}

.dashboard-week-detail-heading {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.8rem;
}

.dashboard-week-detail-heading h3 {
    color: var(--planning-text);
    font-size: 0.98rem;
    font-weight: 900;
    margin: 0;
}

.dashboard-week-detail-heading span {
    color: var(--planning-text-tertiary-2);
    font-size: 0.8rem;
}

.dashboard-week-detail-list {
    display: grid;
    gap: 0.65rem;
}

.dashboard-week-detail-row {
    align-items: center;
    background: var(--planning-surface);
    border: 1px solid var(--planning-border);
    border-radius: 0.75rem;
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(0, 1.6fr) minmax(7rem, 0.7fr) minmax(5rem, 0.45fr) auto;
    padding: 0.75rem 0.9rem;
}

.dashboard-week-detail-row-clickable {
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.dashboard-week-detail-row-clickable:hover,
.dashboard-week-detail-row-clickable:focus-visible {
    border-color: var(--planning-purple-border);
    box-shadow: 0 0.45rem 1.1rem rgba(76, 29, 149, 0.08);
    outline: 0;
    transform: translateY(-1px);
}

.dashboard-week-detail-row-locked {
    background: var(--planning-surface-soft-2);
}

.dashboard-week-detail-row > div:not(.dashboard-today-row-child) {
    display: grid;
    gap: 0.2rem;
}

.dashboard-week-detail-row > div:not(.dashboard-today-row-child) span {
    color: var(--planning-text-weak);
    font-size: 0.64rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.dashboard-week-detail-row > div:not(.dashboard-today-row-child) strong {
    color: var(--planning-text-secondary);
    font-size: 0.82rem;
}

.dashboard-week-status {
    align-items: center;
    background: var(--planning-green-surface);
    border-radius: 999px;
    color: var(--planning-green-dark);
    display: inline-flex;
    font-size: 0.74rem;
    font-weight: 900;
    gap: 0.35rem;
    justify-content: center;
    padding: 0.45rem 0.75rem;
    white-space: nowrap;
}

.dashboard-week-status-pending {
    background: var(--planning-purple-surface);
    color: var(--planning-purple-dark);
}

.dashboard-week-status-locked {
    background: var(--planning-surface-soft);
    color: var(--planning-text-tertiary);
}
.child-badge {
    align-items: center;
    border-radius: 999px !important;
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 0.78rem;
    font-weight: 800;
    height: 2.6rem;
    justify-content: center;
    text-transform: uppercase;
    width: 2.6rem;
}

.child-badge--blue {
    background: var(--contract-type-blue-surface);
    color: var(--contract-type-blue);
}

.child-badge--green {
    background: var(--planning-green-surface);
    color: var(--planning-green-dark);
}

.child-badge--dark-yellow {
    background: var(--planning-yellow-surface);
    color: var(--planning-yellow-dark);
}

.child-badge--pink {
    background: var(--planning-pink-surface);
    color: var(--planning-pink-darker);
}

.child-badge--orange {
    background: var(--planning-orange-surface);
    color: var(--planning-orange-dark);
}

.child-badge--red {
    background: var(--planning-red-surface);
    color: var(--planning-red-dark);
}

.child-badge--neutral {
    background: #f1f2f6;
    color: #69748e;
}

.dashboard-today-list {
    display: flex;
    flex-direction: column;
}

.dashboard-today-row {
    align-items: center;
    border-top: 1px solid #eef0f5;
    display: grid;
    gap: 0.85rem;
    grid-template-columns: minmax(0, 1fr) 13.5rem 16.5rem;
    padding: 0.9rem 0;
}

.dashboard-today-row-head {
    align-items: end;
}

.dashboard-today-row-child {
    align-items: center;
    display: flex;
    gap: 0.85rem;
    min-width: 0;
}

.dashboard-today-row:first-child {
    border-top: 0;
    padding-top: 0.5rem;
}

.dashboard-today-row-head {
    border-top: 0;
    padding: 0 0 0.6rem;
}

.dashboard-today-row-head span {
    color: #9097a9;
    font-size: 0.64rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    white-space: nowrap;
}

.dashboard-today-row-copy {
    display: grid;
    gap: 0.1rem;
    min-width: 0;
}

.dashboard-today-row-copy strong {
    font-size: 0.85rem;
}

.dashboard-today-row-copy span {
    color: #9097a9;
    font-size: 0.75rem;
}

.dashboard-today-row-time {
    color: #566079;
    font-size: 0.8rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.dashboard-planning-days {
    display: flex;
    gap: 0.3rem;
}

.dashboard-day-badge {
    align-items: center;
    background: #f4f5f8;
    border-radius: 0.4rem;
    color: #a4abba;
    display: inline-flex;
    font-size: 0.66rem;
    font-weight: 700;
    height: 1.6rem;
    justify-content: center;
    width: 1.9rem;
}

.dashboard-day-badge-active {
    background: #f1eefe;
    color: #6340d0;
}


.dashboard-metrics-trend small {
    color: #9097a9;
    display: block;
    font-size: 0.7rem;
    font-weight: 700;
    margin-top: 0.3rem;
}

.dashboard-trend-up {
    color: #22a97c !important;
}

.dashboard-trend-new {
    color: #d6336c !important;
}

.dashboard-revenue-heading {
    align-items: flex-start;
    gap: 1rem;
}

.dashboard-revenue-heading h2 {
    margin-bottom: 0.2rem;
}

.dashboard-revenue-heading span {
    color: #747d92;
    font-size: 0.75rem;
}

.dashboard-revenue-nav {
    align-items: center;
    background: #f7f5fd;
    border: 1px solid #e7e1fb;
    border-radius: 999px;
    display: inline-flex;
    flex: 0 0 auto;
    gap: 0.45rem;
    padding: 0.25rem;
}

.dashboard-revenue-nav > span,
.dashboard-week-date-jump span {
    color: #4a466a;
    font-size: 0.78rem;
    font-weight: 800;
    min-width: 8.25rem;
    text-align: center;
}
.dashboard-week-date-jump span {
    cursor: pointer;
}

.dashboard-revenue-nav-button {
    align-items: center;
    background: #fff;
    border: 1px solid #e4def7;
    border-radius: 999px;
    color: #7044d9;
    cursor: pointer;
    display: inline-flex;
    height: 2rem;
    justify-content: center;
    text-decoration: none;
    width: 2rem;
}

.dashboard-revenue-totals {
    gap: 0.85rem;
    margin: 1.25rem 0 1rem;
}

.dashboard-revenue-totals > div {
    background: #fbfaff;
    border: 1px solid #ece7fb;
    border-radius: 0.5rem;
    padding: 0.95rem 1rem;
    text-align: left;
}

.dashboard-revenue-totals > div:last-child,
.dashboard-revenue-totals > div:nth-child(2) {
    border-right: 1px solid #ece7fb;
}

.dashboard-revenue-totals span {
    display: block;
    font-weight: 800;
    letter-spacing: 0.02em;
    margin-bottom: 0.45rem;
    text-transform: uppercase;
}

.dashboard-revenue-totals strong {
    color: #24283a;
    font-size: 1.05rem;
    margin-bottom: 0;
}

.dashboard-revenue-note {
    background: #fff8e8;
    border: 1px solid #f1d99d;
    border-radius: 0.5rem;
    color: #7a5a12;
    font-size: 0.78rem;
    font-weight: 700;
    margin: 0 0 1rem;
    padding: 0.75rem 0.9rem;
}

.dashboard-revenue-table {
    display: flex;
    flex-direction: column;
}

.dashboard-revenue-row {
    align-items: center;
    border-top: 1px solid #eef0f5;
    display: grid;
    gap: 0.85rem;
    grid-template-columns: minmax(0, 1.5fr) repeat(5, minmax(5.5rem, 0.65fr));
    padding: 0.85rem 0;
}

.dashboard-revenue-row-head {
    border-top: 0;
    padding-top: 0;
}

.dashboard-revenue-row-head span {
    color: #9097a9;
    font-size: 0.64rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.dashboard-revenue-row > strong,
.dashboard-revenue-row > span {
    color: #566079;
    font-size: 0.8rem;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.dashboard-revenue-row > strong {
    color: #24283a;
}

.dashboard-revenue-row-clickable {
    cursor: pointer;
    transition: background-color .12s ease-out;
}

.dashboard-revenue-row-clickable:hover,
.dashboard-revenue-row-clickable:focus-visible {
    background-color: #f7f6fb;
}

.dashboard-revenue-detail-days {
    display: flex;
    flex-direction: column;
    max-height: 260px;
    overflow-y: auto;
}

.dashboard-revenue-detail-day-row {
    border-top: 1px solid #eef0f5;
    display: grid;
    font-size: 0.8rem;
    gap: 0.5rem;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 0.8fr);
    padding: 0.5rem 0;
}

.dashboard-revenue-detail-day-row span:last-child {
    color: #24283a;
    font-weight: 700;
    text-align: right;
}

.dashboard-revenue-detail-total {
    border-top: 1px solid var(--planning-border-strong);
    font-size: 15px;
    font-weight: 800;
    margin-top: 4px;
    padding-top: 12px;
}

.dashboard-detail-toggle-bar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 12px;
}
.dashboard-detail-body {
    align-items: stretch;
    display: grid;
    gap: 16px;
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
}
.dashboard-detail-calendar-card {
    border: 1px solid var(--planning-border-strong);
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    padding: 14px;
}

.dashboard-detail-calendar-card > .planning-section-label {
    display: block;
    margin: 0 0 10px;
}

.dashboard-detail-calendar-head {
    display: grid;
    gap: 6px;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    margin-bottom: 8px;
}

.dashboard-detail-calendar-head span {
    color: var(--planning-text-weak);
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-align: center;
    text-transform: uppercase;
}

.dashboard-detail-calendar-row {
    display: grid;
    gap: 6px;
    grid-template-columns: repeat(7, minmax(0, 1fr));
}

.dashboard-detail-calendar-row + .dashboard-detail-calendar-row {
    margin-top: 6px;
}

.dashboard-detail-calendar-cell {
    align-items: center;
    aspect-ratio: 1;
    background: var(--planning-surface-soft);
    border: 1px solid var(--planning-border-grid);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
}

.dashboard-detail-calendar-cell--empty {
    background: transparent;
    border-color: transparent;
}

.dashboard-detail-calendar-cell--garde {
    background: var(--planning-purple-surface-2);
    border-color: var(--planning-purple-border);
}

.dashboard-detail-calendar-cell--leave {
    background: var(--planning-orange-surface);
    border-color: var(--planning-orange-border);
}
.dashboard-detail-calendar-cell--leave-annual {
    background: var(--planning-green-surface);
    border-color: var(--planning-green-border);
}

.dashboard-detail-calendar-cell--leave-unpaid {
    background: var(--planning-yellow-surface);
    border-color: var(--planning-yellow-border);
}

.dashboard-detail-calendar-cell--leave-sick {
    background: var(--planning-pink-surface);
    border-color: var(--planning-pink-border);
}

.dashboard-detail-calendar-cell--leave-other {
    background: var(--planning-surface-soft);
    border-color: var(--planning-border-strong);
}

.dashboard-detail-calendar-cell--leave-annual .dashboard-detail-calendar-day,
.dashboard-detail-calendar-cell--leave-annual .dashboard-detail-calendar-leave-icon {
    color: var(--planning-green-dark);
}

.dashboard-detail-calendar-cell--leave-unpaid .dashboard-detail-calendar-day,
.dashboard-detail-calendar-cell--leave-unpaid .dashboard-detail-calendar-leave-icon {
    color: var(--planning-yellow-dark);
}

.dashboard-detail-calendar-cell--leave-sick .dashboard-detail-calendar-day,
.dashboard-detail-calendar-cell--leave-sick .dashboard-detail-calendar-leave-icon {
    color: var(--planning-pink-darker);
}

.dashboard-detail-calendar-cell--leave-other .dashboard-detail-calendar-day,
.dashboard-detail-calendar-cell--leave-other .dashboard-detail-calendar-leave-icon {
    color: var(--planning-text-secondary);
}

.dashboard-detail-calendar-cell > div {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.dashboard-detail-calendar-day {
    color: var(--planning-text-secondary);
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1;
}

.dashboard-detail-calendar-cell--garde .dashboard-detail-calendar-day,
.dashboard-detail-calendar-cell--leave .dashboard-detail-calendar-day {
    color: var(--planning-purple-dark);
}

.dashboard-detail-calendar-hours {
    color: var(--planning-purple);
    font-size: 0.56rem;
    font-weight: 700;
    line-height: 1;
}

.dashboard-detail-calendar-leave-icon {
    color: #b8752e;
    font-size: 0.8rem;
}
.dashboard-detail-weeks {
    background: var(--planning-surface-soft);
    border: 1px solid var(--planning-border-strong);
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    padding: 14px;
}

.dashboard-detail-weeks .planning-section-label {
    display: block;
    margin: 0 0 10px;
}

.dashboard-detail-week-row {
    align-items: center;
    background: var(--planning-surface);
    border: 1px solid var(--planning-border-strong);
    border-radius: 10px;
    display: flex;
    gap: 8px;
    padding: 8px 10px;
}

.dashboard-detail-week-row + .dashboard-detail-week-row {
    margin-top: 6px;
}

.dashboard-detail-week-badge {
    align-items: center;
    background: var(--planning-purple-surface-4);
    border-radius: 999px;
    color: var(--planning-text-secondary-2);
    display: inline-flex;
    flex: 0 0 22px;
    font-size: 0.6rem;
    font-weight: 800;
    height: 22px;
    justify-content: center;
}

.dashboard-detail-week-main {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
}

.dashboard-detail-week-main span:first-child {
    color: #24283a;
    font-size: 0.72rem;
    font-weight: 700;
}

.dashboard-detail-week-main span:last-child {
    color: var(--planning-text-tertiary);
    font-size: 0.66rem;
}

.dashboard-detail-week-row > strong {
    color: #24283a;
    font-size: 0.78rem;
    font-weight: 800;
    white-space: nowrap;
}

.dashboard-detail-week-total {
    align-items: center;
    border-top: 1px solid var(--planning-border-strong);
    display: flex;
    font-size: 0.75rem;
    font-weight: 800;
    justify-content: space-between;
    margin-top: auto;
    padding-top: 12px;
}
.dashboard-detail-cost {
    border: 1px solid var(--planning-border-strong);
    border-radius: 14px;
    padding: 16px;
}
.dashboard-detail-cost-title {
    align-items: center;
    color: var(--planning-text-weak);
    display: flex;
    font-size: 11px;
    font-weight: 800;
    gap: 6px;
    letter-spacing: 0.1em;
    margin: 0;
    text-transform: uppercase;
}

.dashboard-detail-cost-group {
    margin-top: 18px;
}

.dashboard-detail-cost-row {
    align-items: baseline;
    display: grid;
    gap: 0.4rem;
    grid-template-columns: minmax(0, 1fr) auto minmax(6rem, auto);
    padding: 6px 0;
}

.dashboard-detail-cost-row > span:first-child {
    color: #24283a;
    font-size: 0.8rem;
    font-weight: 600;
}

.dashboard-detail-cost-row small {
    color: var(--planning-text-tertiary);
    font-size: 0.72rem;
    text-align: right;
    white-space: nowrap;
}

.dashboard-detail-cost-row strong {
    color: #24283a;
    font-size: 0.82rem;
    font-weight: 800;
    text-align: right;
    white-space: nowrap;
}

.dashboard-detail-cost-row--subtotal {
    border-top: 1px solid var(--planning-border-strong);
    margin-top: 4px;
    padding-top: 10px;
}

.dashboard-detail-cost-row--subtotal > span:first-child {
    font-weight: 800;
}

.dashboard-detail-cost-row--subtotal strong {
    font-size: 0.9rem;
    font-weight: 900;
}
.dashboard-detail-cost-subhead {
    color: var(--planning-text-tertiary);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    margin: 0 0 4px;
    text-transform: uppercase;
}
.dashboard-detail-cost-row--muted > span:first-child,
.dashboard-detail-cost-row--muted strong {
    color: var(--planning-text-tertiary);
    font-weight: 600;
}

.dashboard-detail-net {
    align-items: center;
    background: var(--planning-purple-surface-2);
    border: 1px solid var(--planning-purple-border);
    border-radius: 12px;
    display: flex;
    justify-content: space-between;
    margin-top: 14px;
    padding: 14px 16px;
}

.dashboard-detail-net span {
    color: var(--planning-purple-dark);
    font-size: 0.85rem;
    font-weight: 800;
}

.dashboard-detail-net strong {
    color: var(--planning-purple-dark);
    font-size: 1.2rem;
    font-weight: 900;
}
.dashboard-detail-aids {
    border: 1px solid var(--planning-border-strong);
    border-radius: 14px;
    padding: 16px;
}

.dashboard-detail-aids .contract-sim-section,
.dashboard-detail-aids .contract-sim-cost-real {
    margin-bottom: 0;
}

@media (max-width: 1024px) {
    .dashboard-detail-body {
        grid-template-columns: minmax(0, 1fr);
    }
}

.dashboard-salary-card {
    background: linear-gradient(135deg, #7146d8, #5a2ec7);
    border-radius: 1rem;
    color: #fff;
    padding: 1.5rem;
}

.dashboard-salary-card-head {
    align-items: center;
    display: flex;
    font-size: 0.8rem;
    font-weight: 700;
    justify-content: space-between;
    opacity: 0.85;
}

.dashboard-salary-card-head i {
    font-size: 1.1rem;
}

.dashboard-salary-amount {
    align-items: baseline;
    display: flex;
    gap: 0.4rem;
    margin: 0.6rem 0 1.25rem;
}

.dashboard-salary-amount strong {
    font-size: 1.9rem;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.dashboard-salary-amount span {
    font-size: 0.8rem;
    opacity: 0.75;
}

.dashboard-salary-list {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.dashboard-salary-row {
    align-items: center;
    display: grid;
    font-size: 0.8rem;
    gap: 0.5rem;
    grid-template-columns: minmax(0, 1fr) auto auto;
}

.dashboard-salary-row span:first-child {
    opacity: 0.85;
}

.dashboard-salary-row strong {
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.dashboard-salary-status {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 0.2rem 0.55rem;
    white-space: nowrap;
}

.dashboard-salary-status-ok {
    background: rgba(255, 255, 255, 0.22);
}

.dashboard-salary-cta {
    align-items: center;
    background: rgba(255, 255, 255, 0.16);
    border: 0;
    border-radius: 0.5rem;
    color: #fff;
    cursor: pointer;
    display: flex;
    font-size: 0.8rem;
    font-weight: 700;
    gap: 0.4rem;
    justify-content: center;
    margin-top: 1.25rem;
    min-height: 2.75rem;
    padding: 0.7rem 1rem;
    width: 100%;
}

.dashboard-salary-cta:hover {
    background: rgba(255, 255, 255, 0.24);
}

.dashboard-families-list {
    display: flex;
    flex-direction: column;
}

.dashboard-family-row {
    align-items: center;
    border-top: 1px solid #eef0f5;
    color: inherit;
    display: flex;
    gap: 0.75rem;
    padding: 0.75rem 0;
    text-decoration: none;
}

.dashboard-family-row:first-child {
    border-top: 0;
    padding-top: 0.35rem;
}

.dashboard-family-row-copy {
    display: grid;
    flex: 1;
    gap: 0.1rem;
    min-width: 0;
}

.dashboard-family-row-copy strong {
    font-size: 0.84rem;
}

.dashboard-family-row-copy span {
    color: #9097a9;
    font-size: 0.74rem;
}

.dashboard-family-row > i {
    color: #c3c7d3;
    flex: 0 0 auto;
    font-size: 0.9rem;
}

.dashboard-families-empty {
    color: #9097a9;
    font-size: 0.8rem;
    margin: 0;
    padding: 0.75rem 0;
}

.profile-hero {
    gap: 2rem;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.profile-hero>div {
    max-width: 570px;
    position: relative;
    z-index: 1;
}

.profile-completion-card {
    background: #fff;
    border: 1px solid #e9ebf3;
    border-radius: 0.55rem;
    box-shadow: 0 0.45rem 1.1rem #273b6b0c;
    min-width: 230px;
    padding: 1rem;
    position: relative;
    z-index: 1;
}

.profile-completion-card span {
    color: #7046d5;
    font-size: 0.75rem;
    font-weight: 700;
}

.profile-completion-card strong {
    display: block;
    font-size: 1.8rem;
    line-height: 1;
    margin: 0.45rem 0;
}

.profile-completion-card p {
    color: #68738a;
    font-size: 0.75rem;
    line-height: 1.45;
    margin: 0.7rem 0 0;
}

.profile-progress {
    margin: 0;
}

.profile-grid {
    display: grid;
    align-items: start;
    gap: 0.85rem;
    grid-template-columns: minmax(0, 1.55fr) minmax(280px, 0.75fr);
}

.profile-panel {
    min-height: 0;
}

.profile-panel-heading h2 {
    align-items: center;
    display: flex;
}

.profile-main-panel {
    padding: 1.15rem;
}

.profile-main-form {
    gap: 0.85rem;
    margin-top: 0;
}

.profile-form-card {
    display: grid;
    gap: 1rem;
    min-height: 0;
}

.profile-section-toggle {
    align-items: center;
    background: transparent;
    border: 0;
    cursor: pointer;
    display: flex;
    gap: 10px;
    justify-content: space-between;
    padding: 0;
    text-align: left;
    width: 100%;
}

.profile-section-caret {
    color: #7044d9;
    flex: 0 0 auto;
    font-size: 1rem;
    transition: transform 160ms ease;
}

.profile-section-toggle[aria-expanded="false"] .profile-section-caret {
    transform: rotate(-90deg);
}

.profile-section-body {
    display: grid;
    gap: 1rem;
}

.profile-submit-card {
    padding: 0.85rem 1rem;
}

.profile-side-stack {
    display: grid;
    gap: 0.85rem;
    align-content: start;
    align-self: start;
}

.profile-form {
    display: grid;
    gap: 1rem;
}

.profile-compact-form {
    gap: 0.8rem;
    margin-top: 1.15rem;
}

.profile-media-row {
    align-items: stretch;
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.profile-avatar-block {
    align-items: center;
    background: #fcfbff;
    border: 1px solid #eeeafd;
    border-radius: 0.55rem;
    display: flex;
    gap: 1rem;
    height: 100%;
    padding: 0.85rem;
    width: 100%;
}

.profile-avatar-preview {
    align-items: center;
    background: #f2edff;
    border-radius: 50%;
    color: #9570df;
    display: inline-flex;
    flex: 0 0 5rem;
    height: 5rem;
    justify-content: center;
    overflow: hidden;
    position: relative;
    width: 5rem;
}

.profile-avatar-preview img {
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.profile-avatar-preview i {
    font-size: 3rem;
}

.profile-avatar-delete {
    align-items: center;
    background: #17213da8;
    border: 0;
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    inset: 0;
    height: 100%;
    justify-content: center;
    opacity: 0;
    padding: 0;
    position: absolute;
    transition: opacity 160ms ease;
    width: 100%;
    z-index: 2;
}

.profile-avatar-delete i {
    color: #fff;
    font-size: 1.55rem;
}

.profile-avatar-preview:hover .profile-avatar-delete,
.profile-avatar-delete:focus {
    opacity: 1;
}

.profile-avatar-upload {
    display: grid;
    min-width: 0;
    width: 100%;
}

.profile-avatar-upload input {
    height: 1px;
    opacity: 0;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

.profile-avatar-upload-control {
    height: 100%;
    min-height: 5rem;
    padding: 0.75rem;
}

.profile-gender-card-group {
    border: 0;
    display: grid;
    flex: 1 1 auto;
    gap: 0.5rem;
    margin: 0;
    min-width: 0;
    padding: 0;
}

.profile-gender-card-group legend {
    color: #44506a;
    font-size: 0.75rem;
    font-weight: 700;
    margin-bottom: 0.35rem;
}

.profile-gender-card-group legend .profile-required {
    color: #d3435c;
    margin-left: 0.12rem;
}

.profile-gender-card-group>div {
    display: grid;
    gap: 0.7rem;
    grid-template-columns: repeat(2, 6.35rem);
}

.profile-gender-card-group label {
    align-items: center;
    aspect-ratio: 1;
    background: #fff;
    border: 1px solid #e9ebf3;
    border-radius: 0.7rem;
    box-shadow: 0 0.3rem 0.8rem #273b6b08;
    color: #556078;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    font-size: 0.76rem;
    font-weight: 700;
    gap: 0.45rem;
    justify-content: center;
    line-height: 1.2;
    height: 6.35rem;
    padding: 0.65rem 0.35rem;
    position: relative;
    text-align: center;
    width: 6.35rem;
}

.profile-gender-card-group input {
    opacity: 0;
    position: absolute;
}

.profile-gender-card-group i {
    color: #69748e;
    font-size: 1.6rem;
}

.profile-gender-card-group label:has(input:checked) {
    background: #f3efff;
    border-color: #ded6fb;
    color: #5e39cf;
}

.profile-gender-card-group label:has(input:checked) i {
    color: #6c42d9;
}

.profile-gender-card-group label:focus-within {
    border-color: #8c72e4;
    box-shadow: 0 0 0 3px #7146d81a;
}

.profile-gender-card-group small {
    color: #d3435c;
    font-size: 0.64rem;
}

.profile-hero-card {
    align-items: center;
    background: #fff;
    border: 1px solid #e7e4f5;
    border-radius: 18px;
    display: grid;
    gap: 24px;
    grid-template-columns: minmax(0, 1fr) 1px minmax(280px, 400px);
    padding: 20px 24px;
    margin-bottom: 19px;
}

.profile-hero-identity {
    align-items: center;
    display: flex;
    gap: 16px;
    min-width: 0;
}

.profile-hero-avatar-wrap {
    flex: 0 0 auto;
    height: 64px;
    position: relative;
    width: 64px;
}

.profile-hero-avatar {
    align-items: center;
    background: linear-gradient(140deg, #ede7fe, #fbe7f1);
    border: 1px solid #e7e4f5;
    border-radius: 20px;
    color: #6d28d9;
    cursor: pointer;
    display: flex;
    font-size: 20px;
    font-weight: 800;
    height: 64px;
    justify-content: center;
    overflow: hidden;
    text-transform: uppercase;
    width: 64px;
}

.profile-hero-avatar:hover {
    border-color: #c9bcf7;
}

.profile-hero-avatar img {
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.profile-hero-avatar-edit {
    align-items: center;
    background: #6d28d9;
    border: 2px solid #fff;
    border-radius: 9px;
    bottom: -5px;
    color: #fff;
    cursor: pointer;
    display: flex;
    height: 26px;
    justify-content: center;
    position: absolute;
    right: -5px;
    width: 26px;
}

.profile-hero-avatar-edit:hover {
    background: #5b21b6;
}

.profile-hero-avatar-edit i {
    font-size: 13px;
}

.profile-avatar-menu {
    background: #fff;
    border: 1px solid #e7e4f5;
    border-radius: 14px;
    box-shadow: 0 12px 30px rgba(46, 29, 107, 0.14);
    left: 0;
    position: absolute;
    top: 74px;
    width: 250px;
    z-index: 20;
}

.profile-avatar-menu-header {
    align-items: center;
    border-bottom: 1px solid #efedf9;
    display: flex;
    gap: 10px;
    padding: 11px 12px;
}

.profile-avatar-menu-avatar {
    align-items: center;
    background: linear-gradient(140deg, #ede7fe, #fbe7f1);
    border-radius: 11px;
    color: #6d28d9;
    display: flex;
    flex: 0 0 auto;
    font-size: 12.5px;
    font-weight: 800;
    height: 34px;
    justify-content: center;
    overflow: hidden;
    text-transform: uppercase;
    width: 34px;
}

.profile-avatar-menu-avatar img {
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.profile-avatar-menu-header strong {
    font-size: 12.5px;
    font-weight: 700;
}

.profile-avatar-menu-header small {
    color: #9c97b4;
    font-size: 11px;
}

.profile-avatar-menu-header-text {
    display: flex;
    flex-direction: column;
}

.profile-avatar-menu-items {
    display: flex;
    flex-direction: column;
    padding: 6px;
}

.profile-avatar-menu-item {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 9px;
    color: #4a466a;
    cursor: pointer;
    display: flex;
    font-size: 13px;
    font-weight: 600;
    gap: 9px;
    height: 34px;
    padding: 0 10px;
    text-align: left;
    width: 100%;
}

.profile-avatar-menu-item:hover {
    background: #f8f6fe;
}

.profile-avatar-menu-item i {
    color: #6d28d9;
    font-size: 15px;
}

.profile-avatar-menu-item--danger {
    color: var(--btn-danger-color);
}

.profile-avatar-menu-item--danger i {
    color: var(--btn-danger-color);
}

.profile-avatar-menu-item--danger:hover {
    background: var(--btn-danger-bg);
}

.profile-avatar-menu-hint {
    background: #fbfafe;
    border-radius: 0 0 14px 14px;
    border-top: 1px solid #efedf9;
    color: #9c97b4;
    display: block;
    font-size: 11px;
    padding: 9px 12px;
}

.profile-hidden-file-input {
    height: 1px;
    opacity: 0;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

.profile-hidden-form {
    display: none;
}

.profile-nanny-avatar-picker {
    display: flex;
    margin-bottom: 16px;
}

.profile-nanny-avatar-toggle {
    align-items: center;
    background: #fff;
    border: 1px solid #e7e4f5;
    border-radius: 11px;
    color: #4c1d95;
    cursor: pointer;
    display: inline-flex;
    font-size: 13.5px;
    font-weight: 700;
    gap: 10px;
    min-height: 48px;
    padding: 5px 14px 5px 5px;
}

.profile-nanny-avatar-toggle:hover {
    background: #f8f6fe;
    border-color: #c9bcf7;
}

.profile-nanny-avatar-toggle img {
    background: #f1eefe;
    border-radius: 8px;
    height: 38px;
    object-fit: contain;
    width: 38px;
}

.profile-nanny-avatar-toggle i {
    color: #6d28d9;
    font-size: 25px;
    margin: 6px;
}

.profile-nanny-avatar-modal-panel {
    max-width: 42rem;
}

.profile-nanny-avatar-grid {
    display: grid;
    gap: 0.6rem;
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.profile-nanny-avatar-grid .child-avatar-option {
    background: #f1eefe;
}

.profile-nanny-avatar-grid .child-avatar-option img {
    object-fit: contain;
}

@media (max-width: 640px) {
    .profile-nanny-avatar-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.profile-hero-name-column {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.profile-hero-name-row {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.profile-hero-name {
    font-size: 23px;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.profile-hero-name--editable {
    align-items: baseline;
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
}

.profile-hero-role-badge {
    background: #f4f2fe;
    border-radius: 999px;
    color: #4c3fa5;
    display: inline-flex;
    font-size: 11.5px;
    font-weight: 700;
    height: 24px;
    align-items: center;
    padding: 0 10px;
}

.profile-hero-meta-row {
    align-items: center;
    color: #8b85a8;
    display: flex;
    flex-wrap: wrap;
    font-size: 12.5px;
    gap: 14px;
}

.profile-hero-meta-row span {
    color: #8b85a8;
}

.profile-hero-share-code {
    align-items: center;
    background: transparent;
    border: 0;
    color: #8b85a8;
    cursor: pointer;
    display: inline-flex;
    font-size: 12.5px;
    gap: 6px;
    padding: 0;
}

.profile-hero-share-code:hover {
    color: #4c3fa5;
}

.profile-hero-share-code strong {
    color: #4c3fa5;
    letter-spacing: 0.04em;
}

.profile-hero-share-code--linked {
    color: #0e7c5a;
    cursor: default;
}

.profile-hero-share-code--linked strong {
    color: #0e7c5a;
}

.profile-hero-divider {
    align-self: stretch;
    background: #efedf9;
}

.profile-hero-completion {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.profile-hero-completion-head {
    align-items: baseline;
    display: flex;
    justify-content: space-between;
}

.profile-hero-completion-head>span:first-child {
    color: #4a466a;
    font-size: 12px;
    font-weight: 700;
}

.profile-hero-completion-head>span:last-child {
    color: #8b85a8;
    font-size: 12px;
}

.profile-hero-completion-bar-row {
    align-items: center;
    display: flex;
    gap: 12px;
}

.profile-hero-completion-value {
    color: #3b2e7e;
    font-size: 26px;
    font-variant-numeric: tabular-nums;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.profile-hero-completion-bar-row .contract-completion-bar {
    flex: 1;
    height: 8px;
}

.contract-completion-bar .profile-completion-bar-fill {
    background: linear-gradient(90deg, #6d28d9, #ec4899);
    display: block;
    height: 100%;
}

.profile-hero-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.profile-hero-reassurance {
    color: #0e7c5a;
    font-size: 12.5px;
    font-weight: 600;
    margin: 0;
}

.profile-layout-grid {
    align-items: start;
    display: grid;
    gap: 18px;
    grid-template-columns: 216px minmax(0, 1fr);
}

.profile-rail {
    display: flex;
    flex-direction: column;
    gap: 12px;
    position: sticky;
    top: 20px;
}

.profile-rail-nav {
    background: #fff;
    border: 1px solid #e7e4f5;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px;
}

.profile-rail-link {
    align-items: center;
    border-radius: 10px;
    color: #4a466a;
    display: flex;
    font-size: 13px;
    font-weight: 600;
    gap: 9px;
    height: 36px;
    padding: 0 11px;
}

.profile-rail-link:hover {
    background: #f8f6fe;
    text-decoration: none;
}

.profile-rail-link.is-active {
    background: #f1eefe;
    color: #4c1d95;
    font-weight: 700;
}

.profile-rail-dot {
    border-radius: 50%;
    flex: 0 0 auto;
    height: 7px;
    width: 7px;
}

.profile-rail-dot--complete {
    background: #22a97c;
}

.profile-rail-dot--missing {
    background: #f0a62e;
}

.profile-rail-dot--partial {
    background: #8c72e4;
}

.profile-rail-dot--neutral {
    background: #c9c3e4;
}

.profile-rail-badge {
    color: #8a5a17;
    font-size: 11px;
    font-weight: 800;
    margin-left: auto;
}

.profile-documents-card {
    background: #fff;
    border: 1px solid #e7e4f5;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px;
    position: relative;
}

.profile-loading-overlay {
    align-items: center;
    background: rgba(255, 255, 255, 0.85);
    border-radius: inherit;
    display: flex;
    inset: 0;
    justify-content: center;
    position: absolute;
    z-index: 5;
}

.profile-loading-overlay i {
    animation: profile-loading-spin 0.8s linear infinite;
    color: #6d28d9;
    font-size: 1.8rem;
}

@keyframes profile-loading-spin {
    to {
        transform: rotate(360deg);
    }
}

.profile-documents-title {
    color: #9c97b4;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.profile-documents-row {
    align-items: center;
    color: #4a466a;
    display: flex;
    font-size: 12.5px;
    font-weight: 600;
    justify-content: space-between;
}

.profile-documents-status--ok {
    color: #0e7c5a;
    font-weight: 700;
}

.profile-documents-status--missing {
    color: #8a5a17;
    font-weight: 700;
}

.profile-sections {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}

.profile-section-card {
    background: #fff;
    border: 1px solid #e7e4f5;
    border-radius: 18px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
    padding: 20px 22px;
    scroll-margin-top: 20px;
}

.profile-section-heading {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: space-between;
}

.profile-section-heading-title {
    align-items: baseline;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.profile-section-heading-title strong {
    font-size: 15.5px;
    font-weight: 700;
}

.profile-section-heading-title span {
    color: #8b85a8;
    font-size: 12.5px;
}

.profile-section-heading-title--stacked {
    align-items: flex-start;
    flex-direction: column;
    gap: 3px;
}

.profile-section-subgroup {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.profile-section-subgroup-title {
    color: #9c97b4;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.profile-tariff-grid-4 {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.profile-tariff-grid-3 {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.profile-flat-input {
    background: #fff;
    border: 1px solid #e1ddf2;
    border-radius: 10px;
    box-sizing: border-box;
    color: #1c1b29;
    font-size: 14px;
    height: 40px;
    padding: 0 12px;
    width: 100%;
}

.profile-flat-input:focus {
    border-color: #8c72e4;
    box-shadow: 0 0 0 3px #7146d81a;
    outline: 0;
}

.profile-flat-input::placeholder {
    color: #a9a4bf;
}

.profile-compact-form > div > small {
    color: #d3435c;
    display: block;
    font-size: 0.64rem;
    margin-top: 0.3rem;
}

.profile-outline-button {
    align-self: flex-start;
    background: #f8f6fe;
    border: 1px solid #c9bcf7;
    border-radius: 11px;
    color: #4c1d95;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    font-size: 13.5px;
    font-weight: 700;
    height: 38px;
    padding: 0 16px;
}

.profile-outline-button:hover {
    background: #f1eefe;
}

@media (max-width: 1100px) {
    .profile-tariff-grid-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .profile-tariff-grid-3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .profile-field-grid--3,
    .profile-field-grid--4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 1024px) {
    .profile-tariff-grid-4,
    .profile-tariff-grid-3 {
        grid-template-columns: minmax(0, 1fr);
    }

    .profile-insurance-card-head {
        align-items: flex-start;
        flex-direction: column;
        gap: 4px;
    }
}

.profile-gender-tabs {
    border: 0;
    display: flex;
    gap: 8px;
    margin: 0;
    padding: 0;
}

.profile-gender-tabs label {
    align-items: center;
    background: #fff;
    border: 1px solid #e7e4f5;
    border-radius: 11px;
    color: #6b6788;
    cursor: pointer;
    display: flex;
    font-size: 13.5px;
    font-weight: 700;
    height: 40px;
    padding: 0 18px;
    white-space: nowrap;
}

.profile-gender-tabs input {
    height: 1px;
    opacity: 0;
    position: absolute;
    width: 1px;
}

.profile-gender-tabs label:has(input:checked) {
    background: #f1eefe;
    border-color: #c9bcf7;
    color: #4c1d95;
}

.profile-gender-tabs label:has(input:focus-visible) {
    outline: 2px solid #8c72e4;
    outline-offset: 2px;
}

.profile-document-preview-card {
    background: #fbfafe;
    border: 1px solid #e7e4f5;
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px;
}

.profile-document-preview-file {
    align-items: center;
    display: flex;
    gap: 10px;
}

.profile-document-preview-info {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
}

.profile-document-preview-icon {
    align-items: center;
    background: #f1eefe;
    border-radius: 10px;
    color: #6d28d9;
    display: flex;
    flex: 0 0 auto;
    font-size: 17px;
    height: 34px;
    justify-content: center;
    width: 34px;
}

.profile-document-preview-name {
    font-size: 13px;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-document-preview-meta {
    color: #8b85a8;
    font-size: 11.5px;
}

.profile-document-preview-actions {
    display: flex;
    gap: 8px;
}

.profile-document-preview-actions label,
.profile-document-preview-actions a {
    align-items: center;
    border-radius: 9px;
    cursor: pointer;
    display: flex;
    flex: 1;
    font-size: 12.5px;
    font-weight: 700;
    height: 32px;
    justify-content: center;
}

.profile-document-preview-actions label {
    background: #f8f6fe;
    border: 1px solid #c9bcf7;
    color: #4c1d95;
}

.profile-document-preview-actions label:hover {
    background: #f1eefe;
}

.profile-document-preview-actions a {
    border: 1px solid #e1ddf2;
    color: #4a466a;
}

.profile-document-preview-actions a:hover {
    border-color: #c9bcf7;
    color: #4c1d95;
    text-decoration: none;
}

.profile-insurance-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.profile-insurance-card {
    border: 1px solid #e7e4f5;
    border-radius: 15px;
    display: flex;
    flex-direction: column;
    gap: 13px;
    padding: 16px;
}

.profile-insurance-card--optional {
    background: #fffcf7;
    border-color: #f8e1c4;
}

.profile-insurance-card-head {
    align-items: center;
    display: flex;
    gap: 10px;
    justify-content: space-between;
}

.profile-insurance-card-head strong {
    font-size: 13.5px;
    font-weight: 700;
}

.profile-insurance-status--ok {
    color: #0e7c5a;
    font-size: 11.5px;
    font-weight: 700;
}

.profile-insurance-status--optional {
    color: #8a5a17;
    font-size: 11.5px;
    font-weight: 700;
}

.profile-insurance-file-row {
    align-items: center;
    background: #fbfafe;
    border: 1px solid #efedf9;
    border-radius: 12px;
    display: flex;
    gap: 10px;
    padding: 10px 12px;
}

.profile-insurance-file-row label {
    color: #6d28d9;
    cursor: pointer;
    flex: 0 0 auto;
    font-size: 12px;
    font-weight: 700;
}

.profile-insurance-file-row label:hover {
    color: #4c1d95;
    text-decoration: underline;
}

.profile-insurance-file-row a.profile-document-preview-name:hover {
    color: #4c1d95;
    text-decoration: underline;
}

.profile-insurance-drop-row {
    align-items: center;
    background: #fff;
    border: 1px dashed #f0c98f;
    border-radius: 12px;
    cursor: pointer;
    display: flex;
    gap: 10px;
    padding: 10px 12px;
}

.profile-insurance-drop-row:hover {
    border-color: #e0a75a;
}

.profile-insurance-drop-icon {
    align-items: center;
    background: #fdf1e1;
    border-radius: 9px;
    color: #b67319;
    display: flex;
    flex: 0 0 auto;
    font-size: 15px;
    height: 30px;
    justify-content: center;
    width: 30px;
}

.profile-insurance-drop-copy strong {
    color: #8a5a17;
    display: block;
    font-size: 12.5px;
    font-weight: 700;
}

.profile-insurance-drop-copy small {
    color: #a98247;
    font-size: 11px;
}

.profile-insurance-hint {
    color: #a98247;
    font-size: 11.5px;
}

.profile-schedule-grid {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(7, minmax(0, 1fr));
}

.contract-planning-card .profile-schedule-grid {
    grid-template-columns: repeat(auto-fill, minmax(135px, 1fr));
}

.profile-schedule-day {
    background: #fbfafe;
    border: 1px solid #c9bcf7;
    border-radius: 13px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 11px;
}

.profile-schedule-day--disabled {
    align-items: flex-start;
    border: 1px dashed #e1ddf2;
}

.profile-schedule-day-head {
    align-items: center;
    display: flex;
    justify-content: space-between;
    gap: 7px;
}

.profile-schedule-day-toggle {
    align-items: center;
    cursor: pointer;
    display: flex;
    gap: 7px;
    min-width: 0;
}

.profile-schedule-day-checkbox {
    height: 1px;
    opacity: 0;
    position: absolute;
    width: 1px;
}

.profile-schedule-day-check {
    align-items: center;
    background: #6d28d9;
    border-radius: 5px;
    color: #fff;
    cursor: pointer;
    display: flex;
    flex: 0 0 auto;
    font-size: 10px;
    height: 18px;
    justify-content: center;
    width: 18px;
}
.ph.ph-check {
    font-family: "Phosphor-Duotone" !important;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
}

.ph.ph-check:before {
    content: "\e183";
}

.profile-schedule-day--disabled .profile-schedule-day-check {
    background: #fff;
    border: 1.5px solid #b9b2d6;
}

.profile-schedule-day--disabled .profile-schedule-day-check i {
    display: none;
}

.profile-schedule-day-name {
    font-size: 13px;
    font-weight: 700;
}

.profile-schedule-day--disabled .profile-schedule-day-name {
    color: #a9a4bf;
}

.profile-schedule-day input[type="time"],
.contract-schedule-day input[type="time"] {
    background: #fff;
    border: 1px solid #e1ddf2;
    border-radius: 9px;
    box-sizing: border-box;
    font-size: 13px;
    height: 34px;
    padding: 0 9px;
    width: 100%;
}

.profile-schedule-day-duration {
    color: #7146d8;
    font-size: 12px;
    font-weight: 800;
    margin-top: auto;
    text-align: center;
}

.profile-schedule-summary-row {
    align-items: flex-start;
    display: flex;
    gap: 16px;
    justify-content: space-between;
}

.profile-schedule-summary-actions {
    align-items: center;
    display: flex;
    gap: 8px;
    white-space: nowrap;
}

.profile-schedule-summary-pill {
    align-items: center;
    background: #f4f2fe;
    border-radius: 999px;
    color: #4c3fa5;
    cursor: default;
    display: inline-flex;
    font-size: 12.5px;
    font-weight: 700;
    height: 28px;
    padding: 0 12px;
}

.profile-schedule-summary-pill--warning {
    background: #fff7ed;
    color: #9a3412;
}

.contract-schedule-notice-row {
    align-items: center;
    background: var(--app-lilac-bg);
    border-radius: 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding: 12px 14px;
}

.contract-schedule-notice-copy {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.contract-schedule-notice-copy > span:first-child {
    color: var(--app-ink-muted);
    font-size: 13px;
    font-weight: 600;
}

.contract-schedule-notice-row .profile-unit-group {
    width: 140px;
}

.contract-schedule-notice-row .profile-unit-group input {
    min-height: 36px;
}

.contract-schedule-notice-helper {
    color: var(--app-ink-muted);
    font-size: 12px;
    font-weight: 600;
}

.profile-notice-callout {
    align-items: center;
    background: var(--app-lilac-bg);
    border-radius: 12px;
    color: var(--app-ink-muted);
    display: flex;
    font-size: 12.5px;
    gap: 10px;
    grid-column: 1 / -1;
    padding: 10px 12px;
}

.profile-validation-summary {
    background: var(--btn-danger-bg);
    border: 1px solid var(--btn-danger-color);
    border-radius: 12px;
    color: var(--btn-danger-color);
    display: grid;
    gap: 6px;
    padding: 12px 14px;
}

.profile-validation-summary strong {
    font-size: 13px;
}

.profile-validation-summary ul {
    display: grid;
    gap: 3px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.profile-validation-summary a {
    color: inherit;
    font-size: 12px;
    text-decoration: underline;
}

.contract-info-banner {
    align-items: flex-start;
    background: var(--app-info-bg);
    border: 1px solid var(--app-info-border);
    border-radius: 12px;
    color: var(--app-info-text);
    display: flex;
    font-size: 12.5px;
    gap: 10px;
    line-height: 1.5;
    padding: 12px 14px;
}

.contract-info-banner i {
    color: var(--app-info-icon);
    flex: 0 0 auto;
    font-size: 1.2rem;
}

.profile-security-grid {
    align-items: stretch;
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-bottom: 24px;
}

.profile-data-actions {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.profile-data-action-row {
    align-items: center;
    background: #fbfafe;
    border: 1px solid #efedf9;
    border-radius: 12px;
    display: flex;
    gap: 12px;
    justify-content: space-between;
    padding: 12px 14px;
}

.profile-data-action-row--danger {
    background: var(--btn-danger-bg);
    border-color: var(--btn-danger-color);
}

.profile-data-action-row-copy {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.profile-data-action-row strong {
    color: #4a466a;
    font-size: 13px;
    font-weight: 600;
}

.profile-data-action-row--danger strong {
    color: var(--btn-danger-color);
    font-weight: 700;
}

.profile-data-action-row small {
    color: #b4849c;
    font-size: 11.5px;
}

.profile-data-action-row form {
    flex: 0 0 auto;
    margin: 0;
}

.profile-data-action-row a,
.profile-data-action-row button {
    background: transparent;
    border: 0;
    color: #6d28d9;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    padding: 0;
}

.profile-data-action-row--danger a,
.profile-data-action-row--danger button {
    color: var(--btn-danger-color);
}

@media (max-width: 1100px) {
    .profile-hero-card {
        grid-template-columns: minmax(0, 1fr);
    }

    .profile-hero-divider {
        display: none;
    }

    .profile-layout-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .profile-rail {
        position: static;
    }

    .profile-rail-nav {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .profile-schedule-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .profile-insurance-grid,
    .profile-security-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .dashboard-week-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .dashboard-week-actions {
        justify-content: space-between;
        width: 100%;
    }

    .dashboard-week-toggle {
        display: none;
    }

    .dashboard-week-grid,
    .dashboard-week-grid-5,
    .dashboard-week-grid-weekend {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dashboard-week-day:nth-child(n+3) {
        display: none;
    }

    .dashboard-week-detail-row {
        grid-template-columns: minmax(0, 1fr) repeat(2, minmax(6rem, 0.45fr)) auto;
    }

    .dashboard-revenue-row {
        grid-template-columns: minmax(0, 1.5fr) repeat(5, minmax(4.75rem, 1fr));
    }
}

@media (max-width: 1024px) {
    .profile-schedule-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .profile-rail {
        display: none;
    }

    .profile-gender-tabs label {
        flex: 1 1 0;
        justify-content: center;
        padding: 0 10px;
        text-align: center;
        white-space: normal;
    }

    #sec-identite {
        overflow: hidden;
    }

    .profile-section-heading-title {
        align-items: flex-start;
        flex-direction: column;
        gap: 2px;
        margin-bottom: 10px;
    }
}

.profile-field-grid {
    display: grid;
    gap: 0.85rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.profile-field-grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.profile-field-grid--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.profile-field-wide {
    grid-column: 1 / -1;
}

.profile-field {
    display: grid;
    gap: 0.35rem;
    position: relative;

    label {
        display: block;
        position: relative;
    }

    &:not(.profile-file-field)>span,
    &:not(.profile-file-field)>label>span {
        background: #fff;
        border-radius: 15px;
        color: #44506a;
        font-size: 0.75rem;
        font-weight: 700;
        left: 0.7rem;
        line-height: 1;
        max-width: calc(100% - 1.4rem);
        overflow: hidden;
        padding: 0 0.25rem;
        pointer-events: auto;
        position: absolute;
        text-overflow: ellipsis;
        top: 50%;
        transform: translateY(-50%);
        transition: color 160ms ease, font-size 160ms ease, top 160ms ease;
        white-space: nowrap;
        z-index: 1;
    }

    .profile-required {
        color: #d3435c;
        margin-left: 0.12rem;
        display: inline;
    }
}

.profile-insurance-subheading {
    color: #111827;
    font-size: 0.86rem;
    font-weight: 800;
    margin: 0.25rem 0 -0.1rem;
}

.profile-file-field input[type="file"] {
    height: 1px;
    opacity: 0;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

.profile-file-field {
    gap: 0;
}

.profile-document-row {
    align-items: start;
    display: grid;
    gap: 0.85rem;
    grid-template-columns: 280px minmax(0, 1fr);
}

.profile-document-fields {
    display: grid;
    gap: 0.85rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.profile-upload-control {
    align-content: center;
    align-items: center;
    background: #fbfcff;
    border: 1px dashed #cabcf8;
    border-radius: 0.42rem;
    color: #5030b2;
    cursor: pointer;
    display: grid;
    gap: 0.95rem;
    grid-template-columns: 1fr;
    height: 100%;
    padding: 0.62rem 0.75rem;
    text-align: center;
    transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.profile-upload-control i {
    align-items: center;
    background: #f3efff;
    border-radius: 0.42rem;
    display: inline-flex;
    font-size: 2.2rem;
    height: 1rem;
    justify-content: center;
    justify-self: center;
    width: 4rem;
}

.profile-upload-control span {
    min-width: 0;
}

.profile-upload-control strong,
.profile-upload-control small {
    display: block;
}

.profile-upload-control strong {
    color: #5030b2;
    font-size: 0.78rem;
    font-weight: 800;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-upload-control small {
    color: #68728a;
    font-size: 0.64rem;
    font-weight: 600;
}

.profile-file-field:focus-within .profile-upload-control,
.profile-upload-control:hover {
    background: #f8f5ff;
    border-color: #8c72e4;
    box-shadow: 0 0 0 3px #7146d81a;
}

.profile-label-with-info {
    align-items: center;
    display: inline-flex;
    gap: 0.35rem;
    width: fit-content;
}

.profile-label-with-info {
    overflow: visible !important;
}

.profile-info-tooltip {
    display: inline-flex;
    position: relative;
}

.profile-info-tooltip a,
.profile-info-tooltip button {
    align-items: center;
    color: #6844d1;
    cursor: help;
    display: inline-flex;
    height: 1.15rem;
    justify-content: center;
    padding: 0;
    width: 1.15rem;
}

.profile-info-tooltip i {
    font-size: 0.78rem;
}

.profile-info-tooltip [role="tooltip"] {
    background: #273452;
    border-radius: 0.42rem;
    bottom: calc(100% + 0.55rem);
    box-shadow: 0 0.65rem 1.4rem #273b6b26;
    color: #fff;
    font-size: 0.64rem;
    font-weight: 600;
    left: 50%;
    line-height: 1.45;
    opacity: 0;
    padding: 0.65rem 0.75rem;
    pointer-events: none;
    position: absolute;
    transform: translateX(-50%) translateY(0.25rem);
    transition: opacity 160ms ease, transform 160ms ease;
    visibility: hidden;
    white-space: normal;
    overflow-wrap: break-word;
    max-width: min(15rem, 78vw);
    width: max-content;
    z-index: 70;
}

.profile-info-tooltip [role="tooltip"]::after {
    border: 0.35rem solid transparent;
    border-top-color: #273452;
    content: "";
    left: 50%;
    position: absolute;
    top: 100%;
    transform: translateX(-50%);
}

.profile-info-tooltip:hover [role="tooltip"],
.profile-info-tooltip:focus-within [role="tooltip"] {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    visibility: visible;
}

.profile-info-tooltip--wide [role="tooltip"] {
    text-align: left;
    width: min(22rem, 90vw);
}

.profile-field input,
.profile-field textarea,
.profile-field select {
    background: #ffffff;
    border: 1px solid #dfe4ef;
    border-radius: 0.65rem;
    color: #17213d;
    font: inherit;
    font-size: 0.82rem;
    min-height: 3.1rem;
    padding: .5rem 0.9rem;
    width: 100%;
}

.profile-field select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237B7796' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-position: right 0.85rem center;
    background-repeat: no-repeat;
    background-size: 13px;
    padding-right: 2.4rem;
}

.profile-field-with-suffix input {
    padding-right: 3.6rem;
}

.profile-input-suffix {
    align-items: center;
    background: #eef2ff;
    border: 1px solid #dcd7ff;
    border-radius: 999px;
    color: #5b35c8;
    display: inline-flex;
    font-size: 0.75rem;
    font-style: normal;
    font-weight: 800;
    min-height: 1.45rem;
    padding: 0 0.5rem;
    pointer-events: none;
    position: absolute;
    right: 0.7rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
}

.profile-field-with-suffix input:disabled+.profile-input-suffix {
    background: #ffffff;
    border-color: #e2e8f0;
    color: #64748b;
}

.profile-unit-group {
    align-items: stretch;
    background: #ffffff;
    border: 1px solid #dfe4ef;
    border-radius: 0.65rem;
    display: flex;
    overflow: hidden;
}

.profile-unit-group input,
.profile-unit-group select {
    background: transparent;
    border: 0;
    border-radius: 0;
    min-height: 3.1rem;
    width: auto;
}

.profile-unit-group input {
    flex: 1 1 auto;
    min-width: 0;
    padding-right: 0.4rem;
}

.profile-unit-group select,
.profile-unit-suffix {
    background-color: var(--app-lilac-strong-bg);
    border-left: 1px solid var(--app-border-lilac);
    color: var(--app-purple-accent);
    font-size: 12px;
    font-weight: 700;
    text-align: center;
    white-space: nowrap;
    min-width: 50px;
}

.profile-unit-group select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B48C0' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-position: right 8px center;
    background-repeat: no-repeat;
    background-size: 11px;
    padding: 0 18px 0 8px;
}

.profile-unit-suffix {
    align-items: center;
    display: flex;
    font-style: normal;
    justify-content: center;
    padding: 0 8px;
}

.profile-unit-button {
    align-items: center;
    background-color: var(--app-lilac-strong-bg);
    border: 0;
    border-left: 1px solid var(--app-border-lilac);
    color: var(--app-purple-accent);
    cursor: pointer;
    display: inline-flex;
    font-size: 12px;
    font-weight: 800;
    gap: 0.35rem;
    justify-content: center;
    min-width: 86px;
    padding: 0 0.8rem;
    white-space: nowrap;
}

.profile-unit-button:hover {
    background-color: var(--planning-purple-surface);
}

.profile-unit-group:has(input:disabled) select,
.profile-unit-group:has(input:disabled) .profile-unit-suffix {
    background-color: #ffffff;
    color: #64748b;
}

.profile-field input::placeholder,
.profile-field textarea::placeholder {
    color: transparent;
}

.profile-field:not(.profile-file-field):has(input:focus),
.profile-field:not(.profile-file-field):has(input:not(:placeholder-shown)),
.profile-field:not(.profile-file-field):has(input[type="date"]),
.profile-field:not(.profile-file-field):has(select),
.profile-field:not(.profile-file-field):has(textarea:focus),
.profile-field:not(.profile-file-field):has(textarea:not(:placeholder-shown)),
.profile-field:not(.profile-file-field):has(input:focus),
.profile-field:not(.profile-file-field):has(input:not(:placeholder-shown)),
.profile-field:not(.profile-file-field):has(input[type="date"]),
.profile-field:not(.profile-file-field):has(select),
.profile-field:not(.profile-file-field):has(textarea:focus),
.profile-field:not(.profile-file-field):has(textarea:not(:placeholder-shown)) {

    >span,
    >label>span {
        color: #6a45d2;
        font-size: 0.75rem;
        top: 0;
    }

    &.disabled-field {
        >span,
        >label>span {
            color: #64748b;
        }
        input{
            background-color: #ffffff;
        }
    }
}

.profile-field textarea {
    line-height: 1.45;
    min-height: 7rem;
    resize: vertical;
}

.profile-field:not(.profile-file-field):has(textarea)>span,
.profile-field:not(.profile-file-field):has(textarea)>label>span {
    top: 1.1rem;
}

.profile-field input:focus,
.profile-field textarea:focus,
.profile-field select:focus {
    border-color: #8c72e4;
    box-shadow: 0 0 0 3px #7146d81a;
    outline: 0;
}

.profile-unit-group input:focus,
.profile-unit-group select:focus {
    box-shadow: none;
    outline: 0;
}

.profile-unit-group:has(input:focus),
.profile-unit-group:has(select:focus) {
    border-color: #8c72e4;
    box-shadow: 0 0 0 3px #7146d81a;
}

.profile-uppercase-input {
    text-transform: uppercase;
}

.profile-field small {
    font-size: 0.64rem;
}

.profile-address-field {
    position: relative;
}

.profile-address-row {
    display: grid;
    gap: 0.85rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.profile-address-suggestions {
    background: #fff;
    border: 1px solid #dfe4ef;
    border-radius: 0.42rem;
    box-shadow: 0 0.75rem 1.6rem #273b6b14;
    display: grid;
    left: 0;
    margin-top: 0.25rem;
    overflow: hidden;
    position: absolute;
    right: 0;
    top: 100%;
    z-index: 4;
}

.profile-address-suggestions button {
    background: #fff;
    border: 0;
    border-bottom: 1px solid #eef0f5;
    cursor: pointer;
    display: grid;
    gap: 0.18rem;
    padding: 0.65rem 0.75rem;
    text-align: left;
}

.profile-address-suggestions button:last-child {
    border-bottom: 0;
}

.profile-address-suggestions button:hover,
.profile-address-suggestions button:focus,
.profile-address-suggestions button.is-highlighted {
    background: #f3efff;
    outline: 0;
}

.profile-address-suggestions strong {
    color: #273452;
    font-size: 0.75rem;
}

.profile-address-suggestions span {
    color: #7b849b;
    font-size: 0.75rem;
}

.profile-helper {
    align-items: flex-start;
    background: #eff7ff;
    border: 1px solid #dfedff;
    border-radius: 0.42rem;
    color: #5e6a80;
    display: flex;
    font-size: 0.75rem;
    gap: 0.55rem;
    line-height: 1.45;
    margin: 0;
    padding: 0.7rem;
}

.profile-helper i {
    color: #377fe4;
    font-size: 1.05rem;
}

.profile-subheading {
    border-top: 1px solid #eef0f5;
    margin-top: 0.25rem;
    padding-top: 1rem;
}

.profile-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
    justify-content: flex-end;
    padding-top:.9rem;
}

.profile-saved-message {
    color: #3f9c72;
    font-size: 0.75rem;
    font-weight: 700;
}

.profile-rgpd-panel {
    background: #fffaf0;
    border-color: #f9e8c0;
}

.profile-rgpd-panel p {
    color: #6f7481;
    font-size: 0.75rem;
    line-height: 1.55;
    margin: 0.8rem 0 1rem;
}

.profile-secondary-button,
.profile-danger-button {
    align-items: center;
    border-radius: 0.35rem;
    cursor: pointer;
    display: inline-flex;
    font: inherit;
    font-size: 0.75rem;
    font-weight: 700;
    justify-content: center;
    min-height: 2.45rem;
    padding: 0.65rem 0.85rem;
    width: 100%;
}

.profile-secondary-button {
    background: #fff;
    border: 1px solid #cfc8ef;
    color: #5e39cf;
}

.profile-secondary-button:disabled {
    color: #8e96aa;
    cursor: not-allowed;
    opacity: 0.72;
}

.profile-danger-button {
    background: var(--btn-danger-bg);
    border: 1px solid var(--btn-danger-color);
    color: var(--btn-danger-color);
}

.profile-danger-button i {
    color: var(--btn-danger-color);
}

.profile-delete-modal {
    display: grid;
    gap: 1rem;
    padding: 1.5rem;
}

.profile-delete-modal h2 {
    font-size: 1rem;
    margin: 0;
}

.profile-delete-modal p {
    color: #667189;
    font-size: 0.76rem;
    line-height: 1.5;
    margin: 0;
}

.profile-modal-actions {
    display: flex;
    gap: 0.7rem;
    justify-content: flex-end;
}

.profile-modal-actions .profile-secondary-button,
.profile-modal-actions .profile-danger-button {
    margin-top: 0;
    width: auto;
}

.profile-primary-button {
    align-items: center;
    background: #5e39cf;
    border: 1px solid #5e39cf;
    border-radius: 0.35rem;
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    font: inherit;
    font-size: 0.75rem;
    font-weight: 700;
    justify-content: center;
    min-height: 2.45rem;
    padding: 0.65rem 0.95rem;
}

.profile-primary-button:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

.profile-export-modal {
    display: grid;
    gap: 1rem;
    padding: 1.5rem;
}

.profile-export-modal h2 {
    font-size: 1rem;
    margin: 0;
}

.profile-export-modal p {
    color: #667189;
    font-size: 0.76rem;
    line-height: 1.5;
    margin: 0;
}

.profile-export-options {
    display: grid;
    gap: 0.6rem;
}

.profile-export-option {
    align-items: flex-start;
    background: #fbfafe;
    border: 1px solid #efedf9;
    border-radius: 12px;
    cursor: pointer;
    display: flex;
    gap: 0.65rem;
    padding: 0.75rem 0.85rem;
}

.profile-export-option:has(input:checked) {
    background: #f4f0ff;
    border-color: #cfc8ef;
}

.profile-export-option input[type="checkbox"] {
    margin-top: 0.15rem;
}

.profile-export-option-copy {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.profile-export-option-copy strong {
    color: #4a466a;
    font-size: 0.8rem;
    font-weight: 600;
}

.profile-export-option-copy small {
    color: #7b8095;
    font-size: 0.72rem;
    line-height: 1.45;
}

.profile-export-error {
    color: #c83251;
    font-size: 0.74rem;
    margin: 0;
}

@media (max-width: 1050px) {
    .profile-grid {
        grid-template-columns: 1fr;
    }

    .profile-side-stack {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 1024px) {
    .dashboard-app-frame {
        display: block;
    }

    .dashboard-navigation {
        height: auto;
        min-height: 0;
        position: static;
    }

    .dashboard-sidebar {
        display: none;
    }

    .contract-action-bar-spacer {
        height: 88px;
    }

    .contract-action-bar {
        align-items: center;
        border: 1px solid #e7e4f5;
        border-radius: 1.1rem;
        bottom: 0.75rem;
        box-shadow: 0 12px 30px rgba(46, 29, 107, 0.16);
        left: 0.75rem;
        padding: 10px 12px;
        right: 0.75rem;
    }

    .contract-action-bar-status {
        display: none;
    }

    .contract-action-bar-actions {
        flex-wrap: nowrap;
        gap: 6px;
        justify-content: center;
        min-width: 0;
        width: 100%;
    }

    .contract-action-bar-actions .dashboard-primary-button,
    .contract-action-bar-actions .employers-secondary-button,
    .contract-action-bar-actions .profile-danger-button {
        flex: 1 1 0;
        font-size: 0.7rem;
        justify-content: center;
        line-height: 1.15;
        min-height: 2.5rem;
        min-width: 0;
        padding: 0 0.4rem;
        text-align: center;
        white-space: normal;
    }

    /* « Accepter » et « Télécharger » sont enveloppés : l'enveloppe prend la part de largeur, le bouton la remplit. */
    .contract-action-bar-actions .contract-accept-wrapper,
    .contract-action-bar-actions .contract-documents-menu {
        flex: 1 1 0;
        min-width: 0;
    }

    .contract-action-bar-actions .contract-accept-wrapper > button,
    .contract-action-bar-actions .contract-documents-menu > .contract-documents-menu-toggle {
        width: 100%;
    }

    .dashboard-sidebar.dashboard-sidebar-open {
        background: #fff;
        border-right: 0;
        bottom: 0;
        display: flex;
        gap: 1rem;
        left: 0;
        min-height: 0;
        overflow-y: auto;
        padding: 1.25rem 1.25rem 0;
        position: fixed;
        right: 0;
        top: 4rem;
        width: 100%;
        z-index: 45;
    }

    .dashboard-sidebar-open .dashboard-sidebar-brand,
    .dashboard-sidebar-open .dashboard-sidebar-greeting {
        display: none;
    }

    .dashboard-sidebar-open .dashboard-sidebar-profile {
        align-items: center;
        background: linear-gradient(100deg, var(--landing-lilac), color-mix(in srgb, var(--landing-pink) 12%, #fff));
        border-radius: 1.25rem;
        color: var(--landing-ink);
        display: flex;
        gap: 0.9rem;
        padding: 1rem;
        text-decoration: none;
    }

    .dashboard-sidebar-profile-initials {
        align-items: center;
        background: #fff;
        border-radius: 1rem;
        color: var(--landing-purple);
        display: flex;
        flex: 0 0 auto;
        font-size: 1.1rem;
        font-weight: 800;
        height: 3.5rem;
        justify-content: center;
        width: 3.5rem;
    }

    .dashboard-sidebar-profile-text {
        display: grid;
        flex: 1 1 auto;
        min-width: 0;
    }

    .dashboard-sidebar-profile-text strong {
        font-size: 1.05rem;
        font-weight: 800;
    }

    .dashboard-sidebar-profile-text small {
        color: var(--landing-purple);
        font-size: 0.85rem;
        font-weight: 600;
    }

    .dashboard-sidebar-profile > i {
        color: var(--landing-muted);
        font-size: 1.1rem;
    }

    .dashboard-sidebar-open .dashboard-menu {
        gap: 0.15rem;
    }

    .dashboard-sidebar-open .dashboard-menu-heading,
    .dashboard-sidebar-open .dashboard-menu-heading--mobile-only {
        display: block;
        font-size: 0.78rem;
        margin: 1.1rem 0 0.35rem;
        padding: 0 0.75rem;
    }

    .dashboard-sidebar-open .dashboard-menu-link {
        border-radius: 1.1rem;
        font-size: 1.05rem;
        gap: 1rem;
        min-height: 3.5rem;
        padding: 0 0.75rem;
    }

    .dashboard-sidebar-open .dashboard-menu-link i {
        font-size: 1.5rem;
        width: 1.5rem;
    }

    .dashboard-sidebar-open .dashboard-menu-link .dashboard-menu-chevron {
        color: var(--landing-muted);
        display: inline-flex;
        font-size: 1.1rem;
        margin-left: auto;
        width: auto;
    }

    .dashboard-sidebar-open .dashboard-menu-link--desktop-only {
        display: none;
    }

    .dashboard-sidebar-open .dashboard-menu-active {
        background: var(--landing-lilac);
        color: var(--landing-purple-dark);
    }

    .dashboard-sidebar-open .dashboard-sidebar-user {
        background: #fff;
        border-top: 1px solid #edeaf7;
        bottom: 0;
        margin: auto -1.25rem 0;
        padding: 0.75rem 1.25rem calc(0.75rem + env(safe-area-inset-bottom));
        position: sticky;
    }

    .dashboard-sidebar-open .dashboard-sidebar-user form {
        display: block;
        margin: 0;
    }

    .dashboard-sidebar-open .dashboard-sidebar-action {
        font-size: 1.05rem;
        font-weight: 700;
        gap: 1rem;
        min-height: 3.25rem;
        padding: 0 0.75rem;
    }

    .dashboard-sidebar-open .dashboard-sidebar-action i {
        font-size: 1.5rem;
    }

    .dashboard-mobile-bar {
        align-items: center;
        background: #fff;
        border-bottom: 1px solid #edf0f7;
        display: flex;
        height: 4rem;
        justify-content: space-between;
        left: 0;
        padding: 0 1rem;
        position: fixed;
        right: 0;
        top: 0;
        z-index: 40;
    }

    .dashboard-mobile-bar-start {
        align-items: center;
        display: flex;
        gap: 0.65rem;
        min-width: 0;
    }

    .dashboard-mobile-bar .dashboard-brand {
        margin: 0;
    }

    .dashboard-mobile-bar .dashboard-brand img {
        max-width: 125px;
    }

    .dashboard-mobile-back {
        align-items: center;
        border-radius: 999px;
        color: #4c3fa5;
        display: flex;
        flex: 0 0 auto;
        font-size: 1.3rem;
        height: 2.25rem;
        justify-content: center;
        width: 2.25rem;
    }

    .dashboard-mobile-back:active {
        background: #f1eefe;
    }

    .dashboard-mobile-menu {
        background: transparent;
        border: 0;
        display: grid;
        gap: 4px;
        padding: 0.5rem;
    }

    .dashboard-mobile-menu span {
        background: #5f47c8;
        display: block;
        height: 2px;
        transform-origin: center;
        transition: opacity 160ms ease, transform 160ms ease;
        width: 1.3rem;
    }

    .dashboard-mobile-menu-open span:nth-child(1) {
        transform: translateY(6px) rotate(45deg);
    }

    .dashboard-mobile-menu-open span:nth-child(2) {
        opacity: 0;
    }

    .dashboard-mobile-menu-open span:nth-child(3) {
        transform: translateY(-6px) rotate(-45deg);
    }

    .dashboard-main {
        min-height: calc(100vh - 4rem);
        padding: calc(4rem + 1rem) 1rem 1rem;
    }

    .toast-stack {
        left: 1rem;
        margin: 0 auto;
        right: 1rem;
        top: 4.8rem;
    }

    .app-toast-success {
        background: #fff;
        border: 0;
        border-bottom: 1px solid #edf0f7;
        border-radius: 0;
        box-shadow: none;
        height: 4rem;
        left: 0;
        padding: 0 1rem;
        position: fixed;
        right: 3.3rem;
        top: 0;
        z-index: 60;
    }

    .dashboard-welcome {
        flex-direction: column;
        min-height: 0;
        padding: 1.4rem;
    }

    .dashboard-assistant {
        bottom: -100px;
        right: -1rem;
        transform: scale(0.85);
        transform-origin: bottom right;
    }

    .dashboard-hero-illustration {
        align-self: center;
        margin-top: 1.25rem;
        width: min(220px, 60vw);
    }

    .dashboard-step-cards {
        grid-template-columns: 1fr;
    }

    .dashboard-overview-grid {
        grid-template-columns: 1fr;
    }

    .dashboard-config-panel,
    .dashboard-benefits-panel {
        padding: 1.1rem;
    }

    .profile-hero {
        align-items: stretch;
        flex-direction: column;
    }

    .profile-completion-card {
        min-width: 0;
    }

    .profile-side-stack {
        grid-template-columns: 1fr;
    }

    .contract-summary-grid,
    .contract-form-columns,
    .contract-layout,
    .contract-selected-child,
    .contract-sidebar {
        position: static;
        top: auto;
    }

    .contract-page-header {
        flex-direction: column;
    }

    .contract-completion-tracker {
        width: 100%;
    }

    .contracts-list-header {
        align-items: center;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0.75rem;
        padding: 16px 18px;
    }

    .contracts-list-header h1 {
        font-size: 19px;
    }

    .contracts-list-header-actions .dashboard-primary-button,
    .contracts-list-header-actions .employers-secondary-button {
        font-size: 0.76rem;
        min-height: 2.3rem;
        padding: 0 0.5rem;
        white-space: nowrap;
    }

    .contracts-list-header-action-label {
        display: none;
    }

    .contracts-list-header-actions .dashboard-primary-button i,
    .contracts-list-header-actions .employers-secondary-button i {
        font-size: 1.3rem;
    }

    .declaration-page-header {
        flex-direction: column;
    }

    .declaration-page-header h1 {
        font-size: 21px;
    }

    .declaration-header-actions {
        width: 100%;
    }

    .contract-schedule-grid {
        overflow-x: auto;
    }

    .profile-schedule-summary-row {
        flex-direction: column;
    }

    .profile-schedule-summary-actions {
        flex-wrap: wrap;
        white-space: normal;
    }

    .contract-schedule-notice-row {
        align-items: flex-start;
        flex-direction: column;
    }

    .contract-schedule-notice-row .profile-unit-group {
        width: 100%;
    }

    .contract-schedule-row {
        grid-template-columns: minmax(7rem, 0.6fr) repeat(2, minmax(6rem, 1fr)) auto;
        min-width: max-content;
    }

    .contracts-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .contracts-tabs::-webkit-scrollbar {
        display: none;
    }

    .contracts-tabs-spacer {
        display: none;
    }

    .contracts-types-intro {
        flex-wrap: wrap;
    }

    .contracts-types-create {
        width: 100%;
    }

    .contracts-row {
        border-radius: 0.85rem;
        gap: 0.6rem;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        padding: 0.8rem 0.9rem;
    }

    .contracts-row-identity,
    .contracts-row-actions {
        grid-column: 1 / -1;
    }

    .contracts-row-identity {
        gap: 0.6rem;
    }

    .contracts-row-actions {
        justify-content: flex-start;
    }

    .contracts-row-avatar {
        height: 2.35rem !important;
        width: 2.35rem !important;
    }

    .contracts-row-name {
        font-size: 0.86rem;
    }

    .contracts-row-meta {
        font-size: 0.72rem;
    }

    .contracts-row-stat-label {
        font-size: 0.62rem;
    }

    .contracts-row-stat-value {
        font-size: 0.82rem;
    }

    .contracts-draft-card {
        border-radius: 0.85rem;
        gap: 0.7rem;
        padding: 0.9rem 1rem;
    }

    .contracts-draft-card-header {
        flex-wrap: wrap;
    }

    .contracts-draft-avatar {
        height: 2.35rem;
        width: 2.35rem;
    }

    .contracts-draft-progress-value {
        font-size: 1.3rem;
    }

    .contracts-done-row {
        padding: 0.7rem 0.9rem;
    }

    .contracts-template-card {
        border-radius: 0.85rem;
        gap: 0.65rem;
        padding: 0.9rem 1rem;
    }
}

@media (max-width: 1024px) {
    .dashboard-desktop-only {
        display: none;
    }

    .dashboard-welcome {
        min-height: 0;
    }

    .dashboard-welcome h1 {
        max-width: 250px;
    }

    .dashboard-welcome-copy {
        font-size: 0.8rem;
    }

    .dashboard-step-cards,
    .dashboard-overview-grid {
        grid-template-columns: 1fr;
    }

    .dashboard-section-heading {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .dashboard-config-progress-track {
        width: 4.5rem;
    }

    .dashboard-step-card h3 {
        font-size: 0.8rem;
    }

    .dashboard-step-card p {
        font-size: 0.75rem;
    }

    .dashboard-text-button {
        font-size: 0.75rem;
    }

    .dashboard-metrics {
        gap: 0.2rem;
        grid-template-columns: repeat(2, 1fr);
        row-gap: 1rem;
    }

    .dashboard-metrics strong {
        font-size: 1.05rem;
    }

    .dashboard-metrics span,
    .dashboard-empty-note,
    .dashboard-deadline-empty p,
    .dashboard-security-banner p {
        font-size: 0.75rem;
    }

    .dashboard-panel-heading>span {
        font-size: 0.75rem;
    }

    .dashboard-metrics>div:nth-child(2) {
        border-right: 0;
    }

    .dashboard-security-banner {
        align-items: flex-start;
    }

    .dashboard-security-banner .dashboard-text-button {
        display: none;
    }

    .dashboard-week-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .dashboard-week-toggle {
        display: none;
    }

    .dashboard-week-grid,
    .dashboard-week-grid-5,
    .dashboard-week-grid-weekend {
        grid-template-columns: minmax(0, 1fr);
    }

    .dashboard-week-day:nth-child(n+2) {
        display: none;
    }

    .dashboard-week-actions .dashboard-text-button {
        text-align: center;
    }

    .dashboard-week-detail {
        padding: 0.75rem;
    }

    .dashboard-week-detail-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.3rem;
    }

    .dashboard-week-detail-row {
        align-items: flex-start;
        grid-template-columns: 1fr;
    }

    .dashboard-week-status {
        justify-self: flex-start;
    }

    .dashboard-revenue-heading {
        align-items: stretch;
        flex-direction: column;
    }

    .dashboard-revenue-nav {
        justify-content: space-between;
        width: 100%;
    }

    .dashboard-revenue-table {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .dashboard-revenue-row {
        min-width: 720px;
    }

    .profile-field-grid {
        grid-template-columns: 1fr;
    }

    .profile-address-row {
        grid-template-columns: 1fr;
    }

    .profile-document-row {
        grid-template-columns: 1fr;
    }

    .profile-document-fields {
        grid-template-columns: 1fr;
    }

    .profile-upload-control {
        min-height: 7rem;
    }

    .employer-identity-row {
        grid-template-columns: 1fr;
    }

    .profile-media-row {
        align-items: stretch;
        grid-template-columns: 1fr;
    }

    .profile-avatar-block {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .profile-modal-actions {
        flex-direction: column-reverse;
    }

    .profile-modal-actions .profile-secondary-button,
    .profile-modal-actions .profile-danger-button {
        width: 100%;
    }
}
.landing-hero-scene {
    bottom: -0.5rem;
    height: auto;
    left: auto;
    right: max(1rem, calc((100% - 1110px) / 2 - 2rem));
    width: min(58vw, 760px);
}

.landing-hero-image {
    display: block;
    height: auto;
    max-width: none;
    width: 100%;
}

.landing-sprite {
    background-image: url('../images/sprite1.png');
    background-repeat: no-repeat;
    background-size: 1536px 1024px;
}

.landing-wall-art,
.landing-benefit-frame {
    background-color: transparent;
    border: 0;
    box-shadow: none;
}

.landing-wall-art-one {
    background-position: -1300px -458px;
    height: 144px;
    left: 245px;
    top: 35px;
    width: 156px;
}

.landing-wall-art-two {
    background-position: -1000px -458px;
    height: 144px;
    left: 325px;
    top: 0;
    width: 180px;
}

.landing-plant {
    background-position: -35px -425px;
    height: 190px;
    left: 35px;
    width: 155px;
}

.landing-woman {
    background-position: -1260px -40px;
    bottom: -105px;
    height: 350px;
    left: 165px;
    width: 270px;
}

.landing-toys {
    background-position: -20px -680px;
    bottom: 0;
    height: 45px;
    left: 250px;
    width: 390px;
}

.landing-benefit-frame-one {
    background-position: -1000px -458px;
    height: 144px;
    left: 25%;
    top: 20px;
    width: 180px;
}

.landing-benefit-frame-two {
    background-position: -1300px -458px;
    height: 144px;
    left: 48%;
    top: 5px;
    width: 156px;
}

.landing-benefit-plant {
    background-position: -35px -425px;
    height: 190px;
    left: 10%;
    width: 155px;
}

.landing-benefit-woman {
    background-position: -1260px -40px;
    bottom: -105px;
    height: 350px;
    left: 35%;
    width: 270px;
}

@media (max-width: 850px) {
    .landing-hero-scene {
        display: none;
    }

    .landing-benefit-frame-one {
        left: 20%;
    }

    .landing-benefit-frame-two {
        left: 52%;
    }

    .landing-benefit-plant {
        left: 5%;
    }

    .landing-benefit-woman {
        bottom: -80px;
        height: 280px;
        left: 25%;
        width: 210px;
    }
}

.landing-primary-button,
.landing-google-button,
.landing-full-button,
.dashboard-primary-button,
.dashboard-outline-button,
.dashboard-text-button,
.employers-secondary-button,
.employers-ghost-button,
.profile-secondary-button,
.profile-danger-button {
    align-items: center;
    border-radius: var(--btn-radius);
    display: inline-flex;
    font-size: 0.82rem;
    font-weight: 800;
    gap: 0.4rem;
    justify-content: center;
    min-height: var(--btn-height-md);
    padding: 0.7rem 1rem;
    text-align: center;
    text-decoration: none;
}

/*
 * Button design system (see AGENTS.md "Button design system"):
 * - 3 color variants: dashboard-primary-button (save), profile-danger-button /
 *   employers-danger-button (danger), employers-secondary-button / profile-secondary-button /
 *   employers-ghost-button / dashboard-outline-button (default).
 * - .btn--sm shrinks any of the classes above to the discreet size.
 * - .btn--light hides a button's text (wrap it in <span class="btn-label">) while
 *   keeping its icon.
 * - .btn--width-full / .btn--width-split control how a button fills its row.
 */
.btn--sm {
    font-size: 0.76rem;
    min-height: var(--btn-height-sm);
    padding: 0 0.85rem;
}

.btn--light .btn-label {
    display: none;
}

.btn--width-full {
    width: 100%;
}

.btn--width-split {
    flex: 1 1 0;
    min-width: 0;
    width: 100%;
}

.landing-primary-button i,
.landing-google-button i,
.landing-full-button i,
.dashboard-primary-button i,
.dashboard-outline-button i,
.dashboard-text-button i,
.employers-secondary-button i,
.employers-ghost-button i,
.profile-secondary-button i,
.profile-danger-button i {
    margin: 0;
}

.planning-page {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.planning-header {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: space-between;
}

.planning-header-left {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.planning-title {
    color: var(--planning-text);
    font-size: 27px;
    font-weight: 800;
    letter-spacing: -0.02em;
    margin: 0;
    text-wrap: pretty;
}

.planning-status-pill {
    align-items: center;
    background: var(--planning-purple-surface-3);
    border-radius: 999px;
    color: var(--planning-text-tertiary);
    display: inline-flex;
    font-size: 12px;
    font-weight: 800;
    gap: 6px;
    height: 28px;
    padding: 0 12px;
}

.planning-status-pill i {
    font-size: 14px;
}

.planning-status-pill--current {
    background: var(--planning-purple-surface);
    color: var(--planning-purple-dark);
}

.planning-status-pill--future {
    background: var(--planning-green-surface);
    color: var(--planning-green-dark);
}

.planning-header-right {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.planning-ics-btn {
    align-items: center;
    background: var(--planning-surface);
    border: 1px solid var(--planning-purple-border);
    border-radius: 10px;
    color: var(--planning-purple-dark);
    cursor: pointer;
    display: inline-flex;
    font-size: 13px;
    font-weight: 800;
    gap: 7px;
    height: 32px;
    padding: 0 14px;
    transition: background-color .12s ease-out;
}

.planning-ics-btn:hover {
    background: var(--planning-purple-surface-2);
}

.planning-ics-btn i {
    color: var(--planning-purple);
    font-size: 15px;
}

.planning-ics-btn--compact {
    display: none;
}

.planning-filters-toggle {
    display: none;
}

.planning-filters {
    align-items: center;
    background: var(--planning-surface);
    border: 1px solid var(--planning-border);
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(28, 27, 41, .04);
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 12px 14px;
}
.planning-filters-nav {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-left: auto;
}

.planning-chip {
    align-items: center;
    background: var(--planning-surface);
    border: 1.5px solid var(--planning-border);
    border-radius: 999px;
    color: var(--planning-text);
    cursor: pointer;
    display: inline-flex;
    font-size: 12.5px;
    font-weight: 700;
    gap: 7px;
    height: 32px;
    padding: 0 12px 0 8px;
    transition: border-color .12s ease-out;
}

.planning-chip--hidden {
    background: var(--planning-surface-soft);
    border-color: var(--planning-border);
    color: var(--planning-text-weak);
}

.planning-chip-box {
    align-items: center;
    background: var(--planning-surface);
    border: 1.5px solid #d9d4e8;
    border-radius: 6px;
    display: inline-flex;
    flex: 0 0 18px;
    height: 18px;
    justify-content: normal;
    width: 18px;
}

.planning-chip-box i {
    color: var(--planning-text-weak);
    font-size: 12px;
    line-height: 1;
}

.planning-chip-box--checked i {
    color: #fff;
}

.planning-filter-sep {
    background: var(--planning-border);
    height: 22px;
    width: 1px;
}

.planning-layer-chip {
    align-items: center;
    background: var(--planning-surface);
    border: 1px solid var(--planning-border);
    border-radius: 999px;
    color: var(--planning-text-weak);
    cursor: pointer;
    display: inline-flex;
    font-size: 12.5px;
    font-weight: 700;
    gap: 6px;
    height: 32px;
    padding: 0 13px;
    transition: background-color .12s ease-out, border-color .12s ease-out, color .12s ease-out;
}

.planning-layer-chip--on {
    background: var(--planning-purple-surface);
    border-color: var(--planning-purple-border);
    color: var(--planning-purple-dark);
}

.planning-filters-group {
    display: contents;
}

.planning-grid-card {
    background: var(--planning-surface);
    border: 1px solid var(--planning-border);
    border-radius: 20px;
    overflow: hidden;
    overflow-x: auto;
}

.planning-grid {
    display: grid;
    min-width: 900px;
}

.planning-grid > * {
    border-right: 1px solid var(--planning-border-grid);
}

.planning-grid > *:last-child {
    border-right: 0;
}

.planning-grid-corner {
    background: var(--planning-surface);
}

.planning-day-head {
    background: var(--planning-surface);
    padding: 8px;
    text-align: center;
}

.planning-day-head-row {
    align-items: center;
    display: inline-flex;
    gap: 6px;
}

.planning-day-head--weekend {
    background: var(--planning-surface-soft);
    color: var(--planning-text-tertiary-2);
}

.planning-day-head--today {
    background: var(--planning-purple-surface-3);
}

.planning-day-head--closed {
    background: #f4f3f8;
    color: var(--planning-text-weak);
}

.planning-day-dow {
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.planning-day-num {
    align-items: center;
    border-radius: 999px;
    display: inline-flex;
    font-size: 14px;
    font-weight: 800;
    height: 24px;
    justify-content: center;
    width: 24px;
}

.planning-day-num--today {
    background: var(--planning-pink);
    color: #fff;
}

.planning-day-head--today .planning-day-dow {
    color: var(--planning-pink-dark);
}

.planning-allday-gutter {
    align-items: flex-start;
    background: var(--planning-surface-soft-3);
    color: var(--planning-text-weak);
    display: flex;
    font-size: 10.5px;
    font-weight: 700;
    justify-content: flex-end;
    line-height: 1.25;
    padding: 8px;
    text-align: right;
}

.planning-allday-cell {
    background: var(--planning-surface-soft-3);
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px;
}

.planning-allday-pill {
    align-items: center;
    background: var(--planning-purple-surface);
    border: 0;
    border-left: 3px solid var(--planning-purple);
    border-radius: 7px;
    color: var(--planning-purple-dark);
    cursor: default;
    display: inline-flex;
    font-size: 10.5px;
    font-weight: 800;
    gap: 5px;
    max-width: 100%;
    overflow: hidden;
    padding: 4px 7px;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.planning-allday-pill[disabled] {
    cursor: default;
}

.planning-allday-pill:not([disabled]) {
    cursor: pointer;
}

.planning-allday-pill span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.planning-allday-add {
    align-items: center;
    background: var(--planning-surface);
    border: 1px dashed var(--planning-border-control);
    border-radius: 8px;
    color: var(--planning-purple);
    cursor: pointer;
    display: inline-flex;
    font-size: 10.5px;
    font-weight: 800;
    gap: 5px;
    min-height: 26px;
    justify-content: center;
    padding: 4px 7px;
    transition: background-color .12s ease-out, border-color .12s ease-out;
}

.planning-allday-add:hover {
    background: var(--planning-purple-surface-2);
    border-color: var(--planning-purple);
}

.planning-allday-add span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.planning-allday-pill--worked {
    background: var(--planning-orange-surface);
    border-left-color: var(--planning-orange);
    color: var(--planning-orange-dark);
}

.planning-allday-pill--birthday {
    background: var(--planning-pink-surface);
    border-left-color: #db2777;
    color: var(--planning-pink-darker);
}

.planning-allday-pill--warning {
    background: var(--planning-orange-surface);
    border-left-color: var(--planning-orange);
    color: var(--planning-orange-dark);
}

.planning-allday-pill--leave-annual {
    background: var(--planning-green-surface);
    border-left-color: var(--planning-green);
    color: var(--planning-green-dark);
}

.planning-allday-pill--leave-unpaid {
    background: var(--planning-yellow-surface);
    border-left-color: var(--planning-yellow);
    color: var(--planning-yellow-dark);
}

.planning-allday-pill--leave-sick {
    background: var(--planning-pink-surface);
    border-left-color: var(--planning-pink-dark);
    color: var(--planning-pink-darker);
}

.planning-allday-pill--leave-other {
    background: var(--planning-surface-soft);
    border-left-color: var(--planning-text-weak);
    color: var(--planning-text-secondary);
}

.planning-activities-gutter {
    align-items: center;
    background: var(--planning-lavender-surface);
    color: var(--planning-text-tertiary-2);
    display: flex;
    font-size: 11px;
    font-weight: 800;
    gap: 6px;
    letter-spacing: .08em;
    padding: 10px 8px;
    text-transform: uppercase;
}

.planning-activities-gutter i {
    color: var(--planning-lavender);
    font-size: 14px;
}

.planning-activities-cell {
    background: var(--planning-lavender-surface);
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 8px;
}

.planning-activity-card {
    background: var(--planning-surface);
    border: 1px solid var(--planning-lavender-border);
    border-left: 3px solid var(--planning-lavender);
    border-radius: 9px;
    padding: 6px 7px;
}

.planning-activity-card--clickable {
    cursor: pointer;
    transition: background-color .12s ease-out, border-color .12s ease-out, box-shadow .12s ease-out;
}

.planning-activity-card--clickable:hover,
.planning-activity-card--clickable:focus-visible {
    background: var(--planning-surface-soft);
    border-color: var(--planning-purple-border);
    box-shadow: 0 6px 14px rgba(28, 27, 41, .08);
    outline: 0;
}

.planning-activity-card-head {
    align-items: center;
    display: flex;
    justify-content: space-between;
}

.planning-activity-badge {
    background: var(--planning-purple-surface);
    border-radius: 5px;
    color: var(--planning-purple-dark);
    font-size: 9.5px;
    font-weight: 800;
    padding: 2px 6px;
}

.planning-activity-delete {
    background: transparent;
    border: 0;
    border-radius: 6px;
    color: var(--btn-danger-color);
    cursor: pointer;
    display: inline-flex;
    padding: 3px;
    transition: background-color .12s ease-out, color .12s ease-out;
}

.planning-activity-delete:hover {
    background: var(--btn-danger-bg);
    color: var(--btn-danger-color);
}

.planning-activity-label {
    color: var(--planning-text-secondary);
    font-size: 11px;
    font-weight: 700;
    margin-top: 4px;
    text-wrap: pretty;
}

.planning-activity-place {
    align-items: center;
    color: var(--planning-text-tertiary-2);
    display: flex;
    font-size: 10px;
    font-weight: 600;
    gap: 4px;
    margin-top: 3px;
}

.planning-activity-add {
    align-items: center;
    background: transparent;
    border: 1px dashed #d5ccf0;
    border-radius: 8px;
    color: var(--planning-purple);
    cursor: pointer;
    display: inline-flex;
    font-size: 10.5px;
    font-weight: 800;
    gap: 5px;
    height: 26px;
    justify-content: center;
    transition: background-color .12s ease-out;
}

.planning-activity-add:hover {
    background: var(--planning-purple-surface-2);
}

.planning-hours-gutter {
    background: var(--planning-surface);
    position: relative;
}

.planning-hour-label {
    color: var(--planning-text-weak-2);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    position: absolute;
    right: 8px;
    transform: translateY(-50%);
}

.planning-day-column {
    background: var(--planning-surface);
    background-image: repeating-linear-gradient(to bottom, var(--planning-border-grid) 0 1px, transparent 1px var(--planning-hour-px));
    position: relative;
}

.planning-day-column--today {
    background-color: var(--planning-surface-soft-3);
}

.planning-day-column--weekend {
    background-color: var(--planning-surface-soft-2);
}

.planning-day-column--closed {
    background-color: #f6f5fa;
    background-image: none;
}

.planning-now-line {
    border-top: 2px solid var(--planning-pink);
    left: 0;
    position: absolute;
    right: 0;
    z-index: 9;
}

.planning-now-label {
    background: var(--planning-pink);
    border-radius: 4px;
    color: #fff;
    display: inline-block;
    font-size: 9.5px;
    font-weight: 800;
    left: 2px;
    padding: 1px 4px;
    position: relative;
    top: -8px;
}

.planning-block {
    border: 1px solid transparent;
    border-left-width: 3px;
    border-radius: 9px;
    box-sizing: border-box;
    cursor: pointer;
    overflow: hidden;
    padding: 5px 7px;
    position: absolute;
}

.planning-block--static {
    cursor: default;
}

.planning-block--overlapped {
    box-shadow: -2px 0 7px rgba(28, 27, 41, .09);
}

.planning-block-head {
    align-items: center;
    display: flex;
    justify-content: space-between;
}

.planning-block-name {
    font-size: 11.5px;
    font-weight: 800;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.planning-block-name--strike {
    text-decoration: line-through;
}

.planning-block-time {
    font-size: 10px;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    margin-top: 2px;
}

.planning-block-duration {
    font-size: 9.5px;
    font-weight: 800;
    margin-top: 1px;
}

.planning-block-note {
    font-size: 9.5px;
    font-weight: 700;
    margin-top: 3px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.planning-legend {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    justify-content: space-between;
    padding: 2px 4px;
}

.planning-legend-items {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
}

.planning-legend-item {
    align-items: center;
    color: var(--planning-text-tertiary);
    display: inline-flex;
    font-size: 12px;
    font-weight: 700;
    gap: 7px;
}

.planning-legend-swatch {
    background: #fff;
    border: 1px solid var(--planning-purple-border);
    border-radius: 4px;
    display: inline-block;
    height: 11px;
    width: 11px;
}

.planning-legend-swatch--shifted {
    background: var(--planning-orange-surface);
    border-color: var(--planning-orange-border);
}

.planning-legend-swatch--justified {
    background: #f6f5fa;
    border-color: #e7e3f0;
}

.planning-legend-swatch--injustified {
    background: var(--planning-pink-surface-2);
    border-color: #f7ddea;
}

.planning-legend-swatch--activity {
    background: var(--planning-lavender-surface);
    border-color: var(--planning-lavender-border);
}

.planning-legend-hint {
    color: var(--planning-text-weak);
    font-size: 12px;
    font-weight: 700;
}

.planning-sync-note {
    color: var(--planning-text-weak);
    font-size: 12px;
}

.planning-sync-error {
    background: var(--planning-pink-surface-2);
    border: 1px solid var(--planning-pink-border);
    border-radius: 12px;
    color: var(--planning-pink-darker);
    font-size: 13px;
    font-weight: 700;
    padding: 10px 14px;
}

.planning-modal-overlay {
    align-items: flex-start;
    background: var(--planning-overlay);
    display: flex;
    inset: 0;
    justify-content: center;
    overflow-y: auto;
    padding: 32px;
    position: fixed;
    z-index: 70;
}

.planning-modal {
    background: var(--planning-surface);
    border-radius: 24px;
    box-shadow: 0 26px 70px rgba(28, 27, 41, .3);
    display: flex;
    flex-direction: column;
    gap: 22px;
    margin: auto;
    max-height: 90vh;
    overflow-y: auto;
    padding: 28px 30px 30px;
    width: 600px;
}

.planning-modal--wide {
    width: 50vw;
    min-width: 640px;
    max-width: 100%;
}

@media (max-width: 1180px) {
    .planning-modal--wide {
        width: 100%;
        min-width: 0;
    }
}
@media (max-width: 1024px) {
    .planning-modal--wide {
        border-radius: 0;
        gap: 18px;
        inset: 0;
        margin: 0;
        max-height: none;
        max-width: none;
        min-width: 0;
        padding: 16px 18px 20px;
        position: fixed;
        width: 100%;
    }

    .planning-modal--wide .planning-modal-close {
        display: none;
    }
}

.planning-modal--ics {
    width: 660px;
}
.dashboard-detail-mobilebar {
    display: none;
}

@media (max-width: 1024px) {
    .dashboard-detail-mobilebar {
        align-items: center;
        border-bottom: 1px solid var(--planning-border-strong);
        display: flex;
        gap: 10px;
        margin: -16px -18px 0;
        padding: 12px 14px;
    }

    .dashboard-detail-mobilebar button {
        align-items: center;
        background: transparent;
        border: 0;
        color: var(--planning-text-secondary);
        display: inline-flex;
        font-size: 20px;
        padding: 4px;
    }

    .dashboard-detail-mobilebar span {
        color: var(--planning-text);
        font-size: 15px;
        font-weight: 800;
    }
}

.planning-modal-head {
    align-items: flex-start;
    display: flex;
    gap: 14px;
    justify-content: space-between;
}

.planning-modal-head-info {
    align-items: center;
    display: flex;
    gap: 12px;
}

.planning-modal-avatar {
    align-items: center;
    border-radius: 14px;
    display: inline-flex;
    flex: 0 0 44px;
    font-size: 14px;
    font-weight: 800;
    height: 44px;
    justify-content: center;
    width: 44px;
}

.planning-modal-avatar--blue {
    background: var(--contract-type-blue-surface);
    color: var(--contract-type-blue);
}

.planning-modal-avatar--green {
    background: var(--planning-green-surface);
    color: var(--planning-green-dark);
}

.planning-modal-avatar--dark-yellow {
    background: var(--planning-yellow-surface);
    color: var(--planning-yellow-dark);
}

.planning-modal-avatar--pink {
    background: var(--planning-pink-surface);
    color: var(--planning-pink-darker);
}

.planning-modal-avatar--orange {
    background: var(--planning-orange-surface);
    color: var(--planning-orange-dark);
}

.planning-modal-avatar--red {
    background: var(--planning-red-surface);
    color: var(--planning-red-dark);
}

.planning-modal-avatar--neutral {
    background: var(--planning-purple-surface-4);
    color: var(--planning-text-secondary-2);
}

.planning-modal-icon-tile {
    align-items: center;
    background: var(--planning-purple-surface);
    border-radius: 14px;
    color: var(--planning-purple);
    display: inline-flex;
    flex: 0 0 44px;
    font-size: 20px;
    height: 44px;
    justify-content: center;
    width: 44px;
}

.planning-modal-title {
    color: var(--planning-text);
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -.01em;
    margin: 0;
}

.planning-modal-subtitle {
    color: var(--planning-text-tertiary-2);
    font-size: 13px;
    font-weight: 600;
    margin: 2px 0 0;
}

.planning-modal-lock-hint {
    align-items: center;
    color: var(--planning-text-weak);
    display: inline-flex;
    font-size: 12px;
    font-weight: 700;
    gap: 5px;
    margin: 6px 0 0;
}

.planning-modal-lock-hint i {
    font-size: 13px;
}

.planning-modal-close {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 10px;
    color: var(--planning-text-tertiary);
    cursor: pointer;
    display: inline-flex;
    flex: 0 0 36px;
    height: 36px;
    justify-content: center;
    width: 36px;
}

.planning-modal-close:hover {
    background: var(--planning-surface-soft);
}

.planning-section-label {
    color: var(--planning-text-weak);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.planning-contract-banner {
    align-items: center;
    background: var(--planning-surface-soft);
    border: 1px solid var(--planning-border-strong);
    border-radius: 14px;
    display: flex;
    justify-content: space-between;
    padding: 12px 16px;
}

.planning-contract-banner-label {
    color: var(--planning-text-secondary-2);
    font-size: 13px;
    font-weight: 700;
}

.planning-contract-banner-value {
    color: var(--planning-purple-dark);
    font-size: 14px;
    font-weight: 800;
}

.planning-modal-form {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.planning-radio-grid {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(3, 1fr);
}

.planning-radio-card {
    align-items: center;
    background: var(--planning-surface);
    border: 1.5px solid #e7e2f5;
    border-radius: 14px;
    color: var(--planning-text-tertiary);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    font-size: 12px;
    font-weight: 800;
    gap: 6px;
    padding: 12px 8px;
    text-align: center;
}

.planning-radio-card i {
    color: var(--planning-text-weak-2);
    font-size: 19px;
}

.planning-radio-card--active-green {
    background: var(--planning-green-surface);
    border-color: var(--planning-green);
    color: var(--planning-green-dark);
}

.planning-radio-card--active-green i {
    color: var(--planning-green);
}

.planning-radio-card--active-purple {
    background: var(--planning-purple-surface);
    border-color: var(--planning-purple);
    color: var(--planning-purple-dark);
}

.planning-radio-card--active-purple i {
    color: var(--planning-purple);
}

.planning-radio-card--active-pink {
    background: var(--planning-pink-surface);
    border-color: var(--planning-pink-dark);
    color: var(--planning-pink-darker);
}

.planning-radio-card--active-pink i {
    color: var(--planning-pink-dark);
}

.planning-radio-card--active-gray {
    background: var(--planning-surface-soft);
    border-color: var(--planning-text-weak);
    color: var(--planning-text-secondary);
}

.planning-radio-card--active-gray i {
    color: var(--planning-text-tertiary);
}

.planning-time-grid {
    align-items: end;
    display: grid;
    gap: 10px;
    grid-template-columns: 1fr auto 1fr;
}

.planning-time-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.planning-time-field-label {
    align-items: center;
    color: var(--planning-text-weak);
    display: inline-flex;
    font-size: 11px;
    font-weight: 800;
    gap: 5px;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.planning-time-input {
    border: 1.5px solid var(--planning-border-control);
    border-radius: 13px;
    color: var(--planning-text);
    font-size: 17px;
    font-variant-numeric: tabular-nums;
    font-weight: 800;
    height: 46px;
    padding: 0 14px;
    width: 100%;
}

.planning-time-input:disabled {
    background: var(--planning-surface-soft);
    color: var(--planning-text-weak-2);
    cursor: not-allowed;
}

.planning-radio-card:disabled {
    cursor: not-allowed;
    opacity: .55;
}

.planning-time-arrow {
    color: var(--planning-text-weak-3);
    font-size: 18px;
    padding-bottom: 12px;
}

.planning-gap-banner {
    align-items: center;
    border-radius: 12px;
    display: flex;
    font-size: 13px;
    font-weight: 800;
    gap: 9px;
    padding: 10px 14px;
}

.planning-gap-banner--ok {
    background: var(--planning-green-surface);
    color: var(--planning-green-dark);
}

.planning-gap-banner--warn {
    background: var(--planning-orange-surface);
    color: var(--planning-orange-dark);
}

.planning-gap-banner--info {
    background: var(--planning-purple-surface);
    color: var(--planning-purple-dark);
}

.planning-textarea {
    border: 1.5px solid var(--planning-border-control);
    border-radius: 13px;
    color: var(--planning-text);
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 500;
    padding: 12px 14px;
    resize: vertical;
    width: 100%;
}

.planning-textarea:disabled {
    background: var(--planning-surface-soft);
    color: var(--planning-text-weak-2);
    cursor: not-allowed;
}

.planning-section-label--spaced {
    margin: 0 0 8px;
}

.planning-guard-helper {
    color: var(--planning-text-tertiary-2);
    font-size: 12px;
    font-weight: 600;
    margin: 0;
}

.planning-info-banner {
    align-items: flex-start;
    background: var(--planning-purple-surface-3);
    border-radius: 10px;
    color: var(--planning-text-secondary-2);
    display: flex;
    font-size: 12px;
    gap: 8px;
    line-height: 1.45;
    padding: 10px 12px;
}

.planning-info-banner i {
    color: var(--planning-purple);
    flex-shrink: 0;
    font-size: 15px;
    margin-top: 1px;
}

.planning-leave-schedule-grid {
    align-items: center;
    display: grid;
    gap: 8px 12px;
    grid-template-columns: minmax(0, 1fr) auto auto;
}

.planning-leave-schedule-grid .profile-field {
    grid-column: 1;
}

.planning-leave-schedule-grid .dashboard-week-toggle {
    grid-column: 2;
}

.planning-leave-count {
    align-items: center;
    align-self: center;
    display: flex;
    flex-direction: column;
    grid-column: 3;
    grid-row: 1 / span 2;
    justify-content: center;
    padding: 0 4px;
    text-align: center;
}

.planning-leave-count strong {
    color: var(--planning-purple-dark);
    font-size: 22px;
    line-height: 1.1;
}

.planning-leave-count span {
    color: var(--planning-text-tertiary-2);
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
}

.planning-leave-type-grid {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(4, 1fr);
}

.planning-leave-type-grid--3 {
    grid-template-columns: repeat(3, 1fr);
}
.planning-leave-split {
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    padding: 3px 9px;
    white-space: nowrap;
}

.planning-leave-split--paid {
    background: var(--planning-green-surface);
    color: var(--planning-green-dark);
}

.planning-leave-split--unpaid {
    background: var(--planning-yellow-surface);
    color: var(--planning-yellow-dark);
}

.planning-leave-split--mixed {
    background: var(--planning-purple-surface-2);
    color: var(--planning-purple-dark);
}

@media (max-width: 1024px) {
    .planning-leave-type-grid,
    .planning-leave-type-grid--3 {
        grid-template-columns: repeat(2, 1fr);
    }
}

.planning-modal-actions {
    align-items: center;
    display: flex;
    gap: 10px;
}

.planning-modal-actions--end {
    justify-content: flex-end;
}

.planning-icon-btn {
    align-items: center;
    background: var(--planning-surface);
    border: 1.5px solid var(--planning-border-control);
    border-radius: var(--btn-radius);
    color: var(--planning-text-secondary-2);
    cursor: pointer;
    display: inline-flex;
    flex: 0 0 44px;
    height: 44px;
    justify-content: center;
    width: 44px;
}

.planning-icon-btn:hover {
    border-color: var(--planning-border-hover);
}

.planning-icon-btn--danger {
    background: var(--btn-danger-bg);
    border-color: var(--btn-danger-color);
    color: var(--btn-danger-color);
}

.planning-icon-btn--danger:hover {
    border-color: var(--btn-danger-color);
}

.planning-icon-btn[disabled] {
    cursor: default;
    opacity: .45;
}

.planning-primary-btn {
    align-items: center;
    background: var(--planning-purple);
    border: 0;
    border-radius: 13px;
    box-shadow: 0 8px 18px rgba(109, 40, 217, .24);
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    flex: 1;
    font-size: 14px;
    font-weight: 800;
    gap: 8px;
    height: 44px;
    justify-content: center;
    transition: background-color .12s ease-out;
}

.planning-primary-btn:hover {
    background: var(--planning-purple-hover);
}

.planning-primary-btn--compact {
    flex: 0 0 auto;
    font-size: 13px;
    height: 40px;
    padding: 0 22px;
}

.planning-secondary-btn--compact {
    font-size: 13px;
    height: 40px;
    padding: 0 18px;
    text-decoration: none;
}
.dashboard-detail-actions {
    background: var(--planning-surface);
    border-top: 1px solid var(--planning-border-strong);
    bottom: -30px;
    box-shadow: 0 -6px 14px -10px rgba(28, 27, 41, .16);
    justify-content: space-between;
    margin: 0 -30px -30px;
    padding: 16px 30px 30px;
    position: sticky;
    z-index: 2;
}

@media (max-width: 1024px) {
    .dashboard-detail-actions {
        bottom: -22px;
        margin: 0 -18px -22px;
        padding: 14px 18px 22px;
    }
}
@media (max-width: 1024px) {
    .dashboard-detail-actions {
        bottom: -20px;
        margin: 4px -18px -20px;
        padding: 12px 18px 20px;
    }

    .dashboard-detail-actions .planning-secondary-btn--compact,
    .dashboard-detail-actions .planning-primary-btn--compact {
        flex: 1;
    }
}

.planning-primary-btn-danger {
    background: var(--planning-pink-dark);
    box-shadow: 0 8px 18px rgba(190, 31, 98, .18);
}

.planning-primary-btn-danger:hover {
    background: var(--planning-pink-darker);
}

.planning-primary-btn[disabled],
.planning-secondary-btn[disabled] {
    cursor: default;
    opacity: .6;
}

.planning-secondary-btn {
    align-items: center;
    background: var(--planning-surface);
    border: 1.5px solid var(--planning-border-control);
    border-radius: 13px;
    color: var(--planning-text-secondary-2);
    cursor: pointer;
    display: inline-flex;
    font-size: 14px;
    font-weight: 800;
    gap: 8px;
    height: 44px;
    justify-content: center;
    padding: 0 20px;
}

.planning-secondary-btn:hover {
    border-color: var(--planning-border-hover);
}

.planning-field-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: 1fr 1fr;
    position: relative;
}

.planning-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    position: relative;
}

.planning-address-suggestions {
    background: var(--planning-surface);
    border: 1px solid var(--planning-lavender-border);
    border-radius: 14px;
    box-shadow: 0 8px 20px rgba(28, 27, 41, .08);
    left: 0;
    max-height: 240px;
    overflow-y: auto;
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    z-index: 5;
}

.planning-address-suggestion {
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--planning-border-grid);
    cursor: pointer;
    display: block;
    padding: 10px 12px;
    text-align: left;
    width: 100%;
}

.planning-address-suggestion:last-child {
    border-bottom: 0;
}

.planning-address-suggestion:hover {
    background: var(--planning-surface-soft);
}

.planning-address-suggestion strong {
    color: var(--planning-text);
    display: block;
    font-size: 13px;
    font-weight: 800;
}

.planning-address-suggestion span {
    color: var(--planning-text-tertiary-2);
    display: block;
    font-size: 11px;
    font-weight: 600;
    margin-top: 2px;
}

.planning-text-input {
    border: 1.5px solid var(--planning-border-control);
    border-radius: 13px;
    color: var(--planning-text);
    font-size: 13.5px;
    font-weight: 600;
    height: 44px;
    padding: 0 14px;
    width: 100%;
}
.planning-effective-row {
    align-items: end;
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.planning-effective-row .planning-time-grid {
    flex: 1 1 300px;
}

.planning-km-field {
    flex: 0 1 190px;
}

.planning-km-input-wrap {
    align-items: center;
    display: flex;
    gap: 8px;
}

.planning-km-input {
    text-align: left;
}

.planning-km-unit {
    color: var(--planning-text-tertiary);
    font-size: 13px;
    font-weight: 700;
}

@media (max-width: 1024px) {
    .planning-effective-row {
        align-items: stretch;
        flex-direction: column;
    }

    .planning-effective-row .planning-time-grid,
    .planning-effective-row .planning-km-field {
        flex: 1 1 auto;
    }
}

.planning-autocomplete {
    background: var(--planning-surface);
    border: 1px solid var(--planning-lavender-border);
    border-radius: 14px;
    box-shadow: 0 8px 20px rgba(28, 27, 41, .08);
    left: 0;
    max-height: 240px;
    overflow-y: auto;
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    z-index: 5;
}

.planning-autocomplete-group + .planning-autocomplete-group {
    border-top: 1px solid var(--planning-border-grid);
}

.planning-autocomplete-heading {
    background: var(--planning-surface-soft);
    color: var(--planning-text-tertiary-2);
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .08em;
    padding: 8px 12px 6px;
    text-transform: uppercase;
}

.planning-autocomplete-item {
    align-items: center;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--planning-border-grid);
    cursor: pointer;
    display: flex;
    gap: 10px;
    padding: 10px 12px;
    text-align: left;
    width: 100%;
}

.planning-autocomplete-item:last-child {
    border-bottom: 0;
}

.planning-autocomplete-item:hover {
    background: var(--planning-surface-soft);
}

.planning-autocomplete-icon {
    color: var(--planning-text-weak-2);
    flex: 0 0 auto;
    font-size: 16px;
}

.planning-autocomplete-icon--mine {
    color: var(--planning-purple);
}

.planning-autocomplete-body {
    flex: 1;
    min-width: 0;
}

.planning-autocomplete-label {
    color: var(--planning-text);
    font-size: 13px;
    font-weight: 800;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.planning-autocomplete-place {
    color: var(--planning-text-tertiary-2);
    font-size: 11px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.planning-autocomplete-tag {
    background: var(--planning-purple-surface-4);
    border-radius: 999px;
    color: var(--planning-text-tertiary);
    flex: 0 0 auto;
    font-size: 10.5px;
    font-weight: 700;
    padding: 3px 9px;
}

.planning-autocomplete-tag--mine {
    background: var(--planning-purple-surface);
    color: var(--planning-purple-dark);
}

.planning-when-grid {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(4, 1fr);
}

.planning-when-card {
    align-items: center;
    background: var(--planning-surface);
    border: 1.5px solid #e7e2f5;
    border-radius: 14px;
    color: var(--planning-text-tertiary);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    font-size: 12px;
    font-weight: 800;
    gap: 6px;
    padding: 12px 8px;
    text-align: center;
}

.planning-when-card i {
    color: var(--planning-text-weak-2);
    font-size: 18px;
}

.planning-when-card--active {
    background: var(--planning-purple-surface-2);
    border-color: var(--planning-purple);
    color: var(--planning-purple-dark);
}

.planning-when-card--active i {
    color: var(--planning-purple);
}

.planning-when-time {
    border: 1.5px solid var(--planning-border-control);
    border-radius: 11px;
    font-size: 14px;
    font-weight: 800;
    height: 38px;
    padding: 0 10px;
    width: 160px;
}

.planning-when-time--spaced {
    margin-top: 10px;
}

.planning-reuse-row {
    align-items: flex-start;
    border-radius: 14px;
    cursor: pointer;
    display: flex;
    gap: 12px;
    padding: 4px 2px;
}

.planning-leave-summary-row {
    align-items: center;
    color: var(--planning-text-secondary);
    display: flex;
    font-size: 13px;
    justify-content: space-between;
    padding: 6px 0;
}

.planning-reuse-box {
    align-items: center;
    background: var(--planning-surface);
    border: 1.5px solid #d9d4e8;
    border-radius: 6px;
    display: inline-flex;
    flex: 0 0 20px;
    height: 20px;
    justify-content: center;
    margin-top: 1px;
    width: 20px;
}

.planning-reuse-box--checked {
    background: var(--planning-purple);
    border-color: var(--planning-purple);
    color: #fff;
}

.planning-reuse-copy strong {
    color: var(--planning-text-secondary);
    display: block;
    font-size: 13px;
    font-weight: 800;
}

.planning-reuse-copy span {
    color: var(--planning-text-tertiary-2);
    font-size: 11.5px;
    font-weight: 600;
}

.planning-ics-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.planning-ics-link {
    background: var(--planning-surface);
    border: 1px solid var(--planning-border);
    border-radius: 16px;
    padding: 14px 15px;
}

.planning-ics-link--highlight {
    background: var(--planning-surface-soft);
    border-color: var(--planning-purple-border);
}

.planning-ics-link-head {
    align-items: center;
    display: flex;
    gap: 10px;
}

.planning-ics-link-icon {
    align-items: center;
    background: var(--planning-purple-surface-4);
    border-radius: 10px;
    color: var(--planning-text-tertiary);
    display: inline-flex;
    flex: 0 0 34px;
    font-size: 16px;
    height: 34px;
    justify-content: center;
    width: 34px;
}

.planning-ics-link--highlight .planning-ics-link-icon {
    background: var(--planning-purple-surface);
    color: var(--planning-purple);
}

.planning-ics-link-title {
    color: var(--planning-text-secondary);
    font-size: 13.5px;
    font-weight: 800;
}

.planning-ics-link-meta {
    color: var(--planning-text-tertiary-2);
    font-size: 11.5px;
    font-weight: 600;
}

.planning-ics-url-row {
    align-items: center;
    display: flex;
    gap: 8px;
    margin-top: 10px;
}

.planning-ics-url {
    background: var(--planning-surface);
    border: 1px solid var(--planning-border-strong);
    border-radius: 9px;
    color: var(--planning-text-secondary-3);
    flex: 1;
    font-size: 11.5px;
    font-weight: 600;
    overflow-wrap: break-word;
    padding: 8px 10px;
}

.planning-copy-btn {
    align-items: center;
    background: var(--planning-surface);
    border: 1px solid var(--planning-border-control);
    border-radius: 9px;
    color: var(--planning-text-secondary-2);
    cursor: pointer;
    display: inline-flex;
    flex: 0 0 36px;
    height: 36px;
    justify-content: center;
    width: 36px;
}

.planning-copy-btn--done {
    background: var(--planning-green-surface);
    border-color: var(--planning-green-border);
    color: var(--planning-green-dark);
}
.planning-ics-open-link {
    text-decoration: none;
}
.planning-ics-open-btn {
    align-items: center;
    background: var(--planning-surface);
    border: 1px solid var(--planning-border-control);
    border-radius: 9px;
    color: var(--planning-text-secondary-2);
    cursor: pointer;
    display: flex;
    font-size: 12px;
    font-weight: 600;
    gap: 6px;
    justify-content: center;
    margin-top: 8px;
    padding: 9px 12px;
    text-decoration: none;
    width: 100%;
}

.planning-ics-open-btn:hover {
    border-color: var(--planning-border-strong);
}

.planning-ics-content-box {
    background: var(--planning-surface-soft);
    border-radius: 16px;
    padding: 14px 16px;
}

.planning-content-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.planning-content-chip {
    align-items: center;
    background: var(--planning-surface);
    border-radius: 999px;
    color: var(--planning-text-tertiary-2);
    cursor: pointer;
    display: inline-flex;
    font-size: 12px;
    font-weight: 700;
    gap: 6px;
    height: 30px;
    padding: 0 12px;
}

.planning-content-chip--on {
    background: var(--planning-purple-surface);
    color: var(--planning-purple-dark);
}

.planning-ics-preview {
    color: var(--planning-text-secondary);
    font-size: 12.5px;
    font-style: italic;
    font-weight: 600;
    margin-top: 12px;
    text-wrap: pretty;
}

.planning-help-note {
    align-items: flex-start;
    color: var(--planning-text-tertiary-2);
    display: flex;
    font-size: 12px;
    font-weight: 600;
    gap: 8px;
}

.planning-help-note i {
    color: var(--planning-text-weak-2);
    font-size: 15px;
    margin-top: 1px;
}

@media (max-width: 1024px) {
    .planning-header {
        gap: 10px;
    }

    .planning-title {
        font-size: 21px;
    }

    .planning-header-right {
        width: 100%;
    }
    .planning-status-pill,
    .planning-ics-btn--full {
        display: none;
    }

    .planning-ics-btn--compact {
        display: inline-flex;
        flex: 0 0 auto;
        justify-content: center;
        padding: 0;
        width: 32px;
    }
    .planning-header-right .dashboard-revenue-nav {
        flex: 1 1 100%;
        justify-content: space-between;
        order: 1;
    }

    .planning-header-right .dashboard-text-button {
        flex: 1 1 100%;
        order: 2;
        text-align: center;
    }

    .planning-header-right .dashboard-week-toggle {
        flex: 1 1 100%;
        order: 3;
    }

    .planning-header-right .dashboard-week-toggle-button {
        flex: 1;
    }

    .planning-filters-toggle {
        align-items: center;
        background: var(--planning-surface);
        border: 1px solid var(--planning-border);
        border-radius: 10px;
        box-shadow: 0 1px 2px rgba(28, 27, 41, .04);
        color: var(--planning-text-secondary-2);
        cursor: pointer;
        display: flex;
        font-size: 13px;
        font-weight: 800;
        height: 40px;
        justify-content: space-between;
        padding: 0 14px;
        width: 100%;
    }

    .planning-filters-toggle span {
        align-items: center;
        display: inline-flex;
        gap: 8px;
    }

    .planning-filters-toggle i {
        color: var(--planning-purple);
        font-size: 15px;
    }
    .planning-filters-group {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        width: 100%;
    }

    .planning-filter-sep {
        display: none;
    }
    .planning-grid--single {
        min-width: 0;
    }

    .planning-modal-overlay {
        padding: 14px;
    }

    .planning-modal,
    .planning-modal--wide,
    .planning-modal--ics {
        width: 100%;
    }

    .planning-modal {
        border-radius: 18px;
        padding: 20px 18px 22px;
    }

    .planning-field-grid {
        grid-template-columns: 1fr;
    }

    .planning-when-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1025px) {
    .planning-filters {
        display: flex !important;
    }
}

/* Pages légales (legal-*), habillées comme la homepage */
.legal-hero-inner {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.legal-hero h1 {
    font-size: clamp(1.7rem, 3.4vw, 2.3rem);
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.15;
    margin: 0;
    text-wrap: balance;
}

.legal-updated {
    background: var(--home-green-surface);
    color: var(--home-green-dark);
    gap: .4rem;
}

.legal-layout {
    align-items: start;
    display: grid;
    gap: 2rem;
    grid-template-columns: 17rem minmax(0, 1fr);
    padding-block: 2.5rem 4.5rem;
}

.legal-nav {
    background: #fff;
    border: 1px solid var(--planning-border-strong);
    border-radius: 1.1rem;
    display: flex;
    flex-direction: column;
    gap: .2rem;
    padding: .6rem;
    position: sticky;
    top: 5.5rem;
}

.legal-nav-link {
    align-items: center;
    border-radius: .7rem;
    color: var(--planning-text-secondary-2);
    display: flex;
    font-size: .84rem;
    font-weight: 600;
    gap: .6rem;
    padding: .6rem .75rem;
}

.legal-nav-link i {
    color: var(--planning-text-tertiary-2);
    font-size: 1.1rem;
}

.legal-nav-link:hover {
    background: var(--planning-surface-soft);
    color: var(--planning-purple);
}

.legal-nav-link.is-active {
    background: var(--app-lilac-bg);
    color: var(--planning-purple);
}

.legal-nav-link.is-active i {
    color: var(--planning-purple);
}

.legal-card {
    background: #fff;
    border: 1px solid var(--planning-border-strong);
    border-radius: 1.1rem;
    box-sizing: border-box;
    padding: 2.25rem 2.5rem;
}

.home-page .legal-content h2 {
    border-top: 1px solid var(--planning-border);
    color: var(--planning-text);
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: -.02em;
    margin: 2.2rem 0 .9rem;
    padding-top: 1.9rem;
}

.home-page .legal-content > :first-child {
    border-top: 0;
    margin-top: 0;
    padding-top: 0;
}

.home-page .legal-content h3 {
    color: var(--planning-text);
    font-size: .95rem;
    font-weight: 700;
    margin: 1.4rem 0 .5rem;
}

.legal-content p,
.legal-content li {
    color: var(--planning-text-secondary-2);
    font-size: .92rem;
    line-height: 1.7;
}

.legal-content p {
    margin: 0 0 1rem;
}

.legal-content ul,
.legal-content ol {
    margin: 0 0 1rem;
    padding-left: 1.3rem;
}

.legal-content ul li {
    list-style: disc;
}

.legal-content ol li {
    list-style: decimal;
}

.legal-content li {
    margin: 0 0 .5rem;
}

.legal-content li::marker {
    color: var(--planning-purple);
}

.legal-content a {
    color: var(--planning-purple);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.legal-content a:hover {
    color: var(--planning-purple-hover);
}

.legal-content strong {
    color: var(--planning-text);
}

.legal-callout {
    background: var(--app-lilac-bg);
    border: 1px solid var(--app-border-lilac);
    border-radius: .9rem;
    margin: 0 0 1.4rem;
    padding: 1rem 1.2rem;
}

.legal-content .legal-callout p:last-child {
    margin-bottom: 0;
}

.legal-table-wrap {
    border: 1px solid var(--planning-border-strong);
    border-radius: .9rem;
    margin: 0 0 1.4rem;
    overflow-x: auto;
}

.legal-content table {
    border-collapse: collapse;
    font-size: .85rem;
    width: 100%;
}

.legal-content th,
.legal-content td {
    border-bottom: 1px solid var(--planning-border);
    color: var(--planning-text-secondary-2);
    line-height: 1.55;
    padding: .7rem .9rem;
    text-align: left;
    vertical-align: top;
}

.legal-content th {
    background: var(--planning-surface-soft);
    color: var(--planning-text);
    font-weight: 700;
}

.legal-content tr:last-child td {
    border-bottom: 0;
}

.legal-form-model {
    background: var(--planning-surface-soft);
    border: 1px dashed var(--planning-border-hover);
    border-radius: .9rem;
    margin: 0 0 1.4rem;
    padding: 1.2rem 1.4rem;
}

.legal-form-model p:last-child {
    margin-bottom: 0;
}

@media (max-width: 900px) {
    .legal-layout {
        grid-template-columns: minmax(0, 1fr);
        padding-block: 1.5rem 3rem;
    }

    .legal-nav {
        flex-direction: row;
        overflow-x: auto;
        position: static;
    }

    .legal-nav-link {
        flex: 0 0 auto;
        white-space: nowrap;
    }

    .legal-card {
        padding: 1.5rem 1.25rem;
    }
}

.contract-documents {
    background: var(--app-lilac-bg);
    border: 1px solid var(--app-border-lilac);
    border-radius: 12px;
    color: var(--app-ink-muted);
    font-size: 0.85rem;
    grid-column: 1 / -1;
    line-height: 1.6;
    margin-top: 16px;
    padding: 20px;
}

.contract-documents--collapsible > summary {
    align-items: center;
    cursor: pointer;
    display: flex;
    gap: 10px;
    justify-content: space-between;
    list-style: none;
}

.contract-documents--collapsible > summary::-webkit-details-marker {
    display: none;
}

.contract-documents--collapsible[open] > summary {
    margin-bottom: 10px;
}

.contract-documents--collapsible h3 {
    margin: 0;
}

.contract-documents__caret {
    color: var(--app-purple-accent);
    transition: transform 0.15s ease;
}

.contract-documents--collapsible[open] .contract-documents__caret {
    transform: rotate(90deg);
}

.contract-image-rights {
    display: grid;
    gap: 12px;
    margin-bottom: 16px;
}

.contract-image-rights .employer-toggle:has(input:disabled) {
    cursor: not-allowed;
    opacity: 0.5;
}

.contract-accept-wrapper {
    display: inline-flex;
    position: relative;
}

.contract-accept-wrapper button:disabled {
    pointer-events: none;
}

.contract-accept-wrapper[data-tooltip]:hover::after {
    background: #1f1a3d;
    border-radius: 8px;
    bottom: calc(100% + 8px);
    color: #fff;
    content: attr(data-tooltip);
    font-size: 0.78rem;
    line-height: 1.4;
    padding: 8px 12px;
    position: absolute;
    right: 0;
    text-align: left;
    white-space: normal;
    width: 260px;
    z-index: 20;
}

.contract-image-rights h3 {
    align-items: center;
    color: var(--app-purple-accent);
    display: flex;
    font-size: 1rem;
    gap: 10px;
    margin: 0;
}

.contract-documents h3 {
    align-items: center;
    color: var(--app-purple-accent);
    display: flex;
    font-size: 1rem;
    gap: 10px;
    margin: 0 0 10px;
}

.contract-documents h4 {
    color: var(--planning-text);
    font-size: 0.9rem;
    margin: 0 0 8px;
}

.contract-documents p {
    margin: 0;
}

.contract-documents__groups {
    display: grid;
    gap: 12px;
    margin: 16px 0;
}

.contract-documents__groups section {
    background: var(--planning-surface);
    border-radius: 8px;
    padding: 16px;
}

.contract-documents ul {
    display: grid;
    gap: 8px;
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
}

.contract-documents li {
    align-items: baseline;
    display: flex;
    gap: 10px;
}

.contract-documents li > i {
    color: var(--app-purple-accent);
    flex-shrink: 0;
}

.contract-documents__source {
    border-top: 1px solid var(--app-border-lilac);
    display: flex;
    flex-wrap: wrap;
    font-size: 0.75rem;
    gap: 8px 20px;
    justify-content: space-between;
    margin-top: 16px;
    padding-top: 12px;
}

.contract-documents__source a {
    color: var(--app-purple-accent);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.dashboard-coming-soon {
    align-items: center;
    background: #fff;
    border: 1px solid var(--app-border-lilac);
    border-radius: 0.75rem;
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 0.6rem;
    justify-content: center;
    margin: auto;
    max-width: 420px;
    padding: 3.5rem 2rem;
    text-align: center;
}

.dashboard-coming-soon>i {
    color: var(--planning-purple);
    font-size: 2.4rem;
}

.dashboard-coming-soon h1 {
    color: var(--landing-ink);
    font-size: 1.25rem;
    margin: 0;
}

.dashboard-coming-soon p {
    color: var(--app-ink-muted);
    font-size: 0.85rem;
    line-height: 1.6;
    margin: 0;
}

.dashboard-coming-soon-tag {
    background: var(--app-lilac-bg);
    border-radius: 999px;
    color: var(--planning-purple);
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.3rem 0.8rem;
}

.parent-import-hint {
    color: var(--app-ink-muted);
    font-size: 0.82rem;
    line-height: 1.5;
    margin: 0;
}

.parent-code-linked {
    align-items: center;
    color: #0e7c5a;
    display: flex;
    font-size: 0.82rem;
    gap: 8px;
    line-height: 1.5;
    margin: 0;
}

.parent-code-linked i {
    font-size: 1.1rem;
}

.parent-sync-modal-overlay {
    align-items: center;
    background: rgba(15, 23, 42, 0.45);
    display: flex;
    inset: 0;
    justify-content: center;
    padding: 24px;
    position: fixed;
    z-index: 80;
}

.parent-sync-modal {
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 26px 70px rgba(28, 27, 41, 0.3);
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: 420px;
    padding: 24px;
    width: 100%;
}

.parent-sync-modal h3 {
    font-size: 1.05rem;
    font-weight: 800;
    margin: 0;
}

.parent-sync-modal p {
    color: var(--app-ink-muted);
    font-size: 0.85rem;
    line-height: 1.55;
    margin: 0;
}

.parent-sync-modal-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

.parent-sync-modal-actions--stacked {
    flex-direction: column;
}

.parent-sync-modal-actions--even > * {
    flex: 1 1 0;
}

.parent-sync-modal-step {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.parent-sections-group {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.household-readonly-fieldset {
    border: 0;
    display: contents;
    margin: 0;
    min-width: 0;
    padding: 0;
}

.household-readonly-fieldset:disabled .profile-field input,
.household-readonly-fieldset:disabled .profile-field select,
.household-readonly-fieldset:disabled .profile-field textarea {
    background: #f6f5fb;
    color: #8b85a8;
}

.household-readonly-fieldset:disabled .employer-toggle-switch,
.household-readonly-fieldset:disabled .child-gender-toggle,
.household-readonly-fieldset:disabled .contract-day-toggle,
.household-readonly-fieldset:disabled .employer-child-remove,
.household-readonly-fieldset:disabled .employers-secondary-button,
.household-readonly-fieldset:disabled .employers-ghost-button {
    cursor: not-allowed;
    opacity: 0.55;
}

.parent-notice-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.parent-toggle-row {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
}

.parent-save-errors {
    color: #c83251;
    font-size: 0.78rem;
    line-height: 1.5;
}

.parent-save-errors ul {
    margin: 0.2rem 0 0;
    padding-left: 1.1rem;
}

/* ==========================================================================
   Fin de contrat — parcours (TerminationController / terminations/wizard)
   ========================================================================== */

.termination-page {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    padding-bottom: 4rem;
    min-width: 1180px;
}

.termination-breadcrumb {
    align-items: center;
    color: var(--planning-text-tertiary-2);
    display: flex;
    font-size: 0.82rem;
    gap: 0.4rem;
}

.termination-breadcrumb a {
    color: var(--planning-text-tertiary-2);
    text-decoration: none;
}

.termination-breadcrumb a:hover {
    color: var(--planning-purple);
}

.termination-breadcrumb i {
    font-size: 0.7rem;
}

.termination-header h1 {
    color: var(--planning-text);
    font-size: 1.7rem;
    font-weight: 800;
    margin: 0 0 0.2rem;
}

.termination-header p {
    color: var(--planning-text-tertiary-2);
    font-size: 0.85rem;
    margin: 0;
}

.termination-errors {
    background: var(--planning-red-surface);
    border: 1px solid var(--planning-red-border);
    border-radius: 14px;
    color: var(--planning-red-dark);
    font-size: 0.85rem;
    padding: 0.9rem 1.1rem;
}

.termination-errors ul {
    margin: 0.3rem 0 0;
    padding-left: 1.1rem;
}

.termination-grid {
    align-items: start;
    display: grid;
    gap: 1.25rem;
    grid-template-columns: minmax(0, 1fr) 372px;
}

@media (max-width: 1400px) {
    .termination-grid {
        grid-template-columns: minmax(0, 1fr) 320px;
    }
}

.termination-left {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    min-width: 0;
}

.termination-card {
    background: var(--planning-surface);
    border: 1px solid var(--planning-border-strong);
    border-radius: 18px;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    padding: 1.25rem 1.35rem;
}

.termination-card-eyebrow {
    color: var(--planning-purple);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* ---- Motif tiles ---- */

.termination-tiles {
    display: grid;
    gap: 0.55rem;
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

@media (max-width: 1300px) {
    .termination-tiles {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 1100px) {
    .termination-tiles {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.termination-tile {
    background: var(--planning-surface-soft-2);
    border: 1px solid var(--planning-border-grid);
    border-radius: 15px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 0.8rem 0.8rem 0.7rem;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.termination-tile:hover {
    background: var(--planning-surface-soft);
}

.termination-tile strong {
    color: var(--planning-text);
    font-size: 0.82rem;
}

.termination-tile span {
    color: var(--planning-text-weak);
    font-size: 0.7rem;
}

.termination-tile i {
    color: var(--planning-purple);
    font-size: 1.1rem;
}

.termination-tile.is-selected {
    background: var(--planning-purple-surface-3);
}

.termination-tile.is-selected strong {
    color: var(--planning-purple-dark);
}

.termination-tile.is-selected span {
    color: var(--app-purple-accent);
}

.termination-tile--warn.is-selected i {
    color: var(--planning-orange-dark);
}

.termination-toggle-link {
    align-items: center;
    color: var(--planning-purple);
    cursor: pointer;
    display: inline-flex;
    font-size: 0.75rem;
    font-weight: 800;
    gap: 0.3rem;
    width: fit-content;
}

.termination-toggle-link {
    align-items: center;
    color: var(--planning-purple);
    cursor: pointer;
    display: inline-flex;
    font-size: 0.75rem;
    font-weight: 800;
    gap: 0.3rem;
    width: fit-content;
}

.termination-toggle-link i {
    font-size: 0.7rem;
}

.termination-note {
    color: var(--planning-text-tertiary-2);
    font-size: 0.78rem;
    line-height: 1.5;
    margin: 0;
}

.termination-note-box {
    align-items: flex-start;
    background: var(--planning-surface-soft);
    border: 1px solid var(--planning-border-grid);
    border-radius: 13px;
    display: flex;
    gap: 0.5rem;
    padding: 0.75rem 0.85rem;
}

.termination-note-box i {
    color: var(--planning-purple);
    font-size: 0.95rem;
    margin-top: 0.1rem;
}

.termination-note-box span {
    color: var(--app-ink-muted);
    font-size: 0.78rem;
    line-height: 1.5;
}

/* ---- Sub-blocks (gravité, période d'essai) ---- */

.termination-subblock {
    background: var(--planning-orange-surface);
    border: 1px solid var(--planning-orange-border);
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    margin: 0;
    padding: 0.85rem 0.95rem;
}

.termination-subblock legend {
    color: var(--planning-orange-dark);
    font-size: 0.78rem;
    font-weight: 800;
    padding: 0;
}

.termination-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.termination-chip {
    background: var(--planning-surface);
    border: 1px solid var(--planning-border-control);
    border-radius: 999px;
    color: var(--app-ink-muted);
    cursor: pointer;
    font-size: 0.78rem;
    font-weight: 700;
    padding: 0.4rem 0.85rem;
}

.termination-chip input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.termination-chip.is-selected {
    background: var(--planning-purple);
    border-color: var(--planning-purple);
    color: #fff;
}

.termination-chip--amber.is-selected {
    background: var(--planning-orange);
    border-color: var(--planning-orange);
    color: #fff;
}

.termination-misconduct-levels .termination-chip {
    align-items: center;
    display: inline-flex;
    border-radius: 9px;
    box-sizing: border-box;
    height: 42px;
    padding: 0 0.85rem;
}

.termination-misconduct-reason {
    flex: 1 1 18rem;
    min-width: 12rem;
}

.termination-misconduct-reason input {
    padding-right: 3.4rem;
}

.termination-field-counter {
    bottom: 0.5rem;
    color: var(--planning-text-weak);
    font-size: 0.68rem;
    pointer-events: none;
    position: absolute;
    right: 0.8rem;
    z-index: 2;
}

.termination-warn {
    background: var(--planning-orange-surface);
    border: 1px solid var(--planning-orange-border);
    border-radius: 12px;
    color: var(--planning-orange-dark);
    font-size: 0.78rem;
    line-height: 1.5;
    margin: 0;
    padding: 0.7rem 0.85rem;
}

.termination-misconduct-warning {
    background: none;
    border: 0;
    padding: 0;
}

/* ---- Notification & dates ---- */

.termination-notify-row {
    align-items: center;
    display: grid;
    gap: 0.6rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 1.5rem 0;
}

.termination-notification-method {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    justify-self: center;
}

.termination-notice-choice {
    align-items: center;
    display: flex;
    flex: 0 1 auto;
    gap: 0.5rem;
    justify-self: center;
    min-width: 0;
}

.termination-notification-label {
    color: var(--planning-purple);
    font-size: 0.72rem;
    font-weight: 800;
}

.termination-date-pill {
    background: var(--planning-surface);
    border: 1px solid var(--planning-border-control);
    border-radius: 0.65rem;
    display: block;
    min-height: 3.1rem;
    padding: 0;
    position: relative;
    justify-self: center;
    width: min(18.3rem, 100%);
}

.termination-date-label {
    align-items: center;
    background: var(--planning-surface);
    border-radius: 15px;
    color: var(--planning-purple);
    font-size: 0.72rem;
    font-weight: 700;
    left: 0.7rem;
    line-height: 1;
    padding: 0 0.25rem;
    position: absolute;
    top: 0;
    transform: translateY(-50%);
    white-space: nowrap;
    z-index: 1;
}

.termination-required {
    color: var(--planning-red);
    margin-left: 0.12rem;
}

.termination-date-pill input {
    border: none;
    border-radius: 0.65rem;
    color: #17213d;
    font: inherit;
    font-size: 0.82rem;
    min-height: 3.1rem;
    padding: 0.5rem 0.9rem;
    width: 100%;
}

.termination-date-pill input::-webkit-calendar-picker-indicator {
    cursor: pointer;
    margin-left: auto;
}

.termination-date-pill input:focus {
    outline: none;
}

.termination-date-pill.is-invalid {
    border-color: var(--planning-red);
}

.termination-segmented {
    background: var(--planning-surface-soft-2);
    border-radius: 999px;
    display: inline-flex;
    gap: 2px;
    padding: 3px;
    width: max-content;
    border:1px solid var(--planning-border-control);
    margin: 0 auto;
}

.termination-segmented button {
    align-items: center;
    background: none;
    border: none;
    border-radius: 999px;
    color: var(--app-ink-muted);
    cursor: pointer;
    display: inline-flex;
    font-size: 0.78rem;
    font-weight: 700;
    gap: 0.35rem;
    height: 36px;
    padding: 0 0.9rem;
    justify-content: center;
    min-width: max-content;
    width: auto;
}

.termination-segmented button i {
    font-size: 0.9rem;
}

.termination-segmented button.is-selected {
    background: var(--planning-purple);
    color: #fff;
}

@media (max-width: 900px) {
    .termination-notify-row {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ---- Dispense de préavis ---- */

.termination-dispense {
    align-items: center;
    cursor: pointer;
    display: flex;
    gap: 0.5rem;
}

.termination-dispense strong {
    color: var(--planning-text);
    font-size: 0.82rem;
    font-weight: 800;
}

.termination-switch {
    background: var(--planning-border-control);
    border-radius: 999px;
    cursor: pointer;
    display: inline-flex;
    flex-shrink: 0;
    height: 23px;
    padding: 2px;
    width: 40px;
}

.termination-switch.is-on {
    background: var(--planning-purple);
    justify-content: flex-end;
}

.termination-switch-knob {
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(28, 27, 41, 0.25);
    height: 19px;
    width: 19px;
}

.termination-notice-choice-stack {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.termination-dispense-row {
    align-items: center;
    display: flex;
    gap: 0.5rem;
}

.termination-info-icon-btn {
    align-items: center;
    background: none;
    border: none;
    border-radius: 999px;
    color: var(--planning-purple);
    cursor: pointer;
    display: inline-flex;
    flex-shrink: 0;
    font-size: 1.05rem;
    height: 24px;
    justify-content: center;
    padding: 0;
    width: 24px;
}

.termination-info-icon-btn:hover {
    background: var(--planning-purple-surface);
}

.termination-warn-note {
    color: var(--planning-orange-dark);
}

.termination-modal-text {
    color: var(--planning-text);
    font-size: 0.86rem;
    line-height: 1.5;
    margin: 0;
}

/* ---- Chronologie ---- */

.termination-timeline-wrap {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.termination-timeline {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
}

.termination-timeline li {
    align-items: center;
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 0.25rem;
}

.termination-timeline-track {
    align-items: center;
    display: flex;
    height: 11px;
    position: relative;
    width: 100%;
}

.termination-timeline-line {
    background: var(--planning-purple-surface-4);
    height: 2px;
    left: 0;
    position: absolute;
    right: 0;
}

.termination-timeline-dot {
    background: var(--planning-purple);
    border-radius: 999px;
    flex-shrink: 0;
    height: 11px;
    left: 50%;
    position: absolute;
    transform: translateX(-50%);
    width: 11px;
    z-index: 1;
}

.termination-timeline-dot.is-end {
    background: var(--planning-purple-dark);
}

.termination-timeline-date {
    color: var(--planning-purple);
    font-size: 0.78rem;
    font-variant-numeric: tabular-nums;
    font-weight: 800;
    text-align: center;
    width: 100%;
}

.termination-timeline li strong {
    color: var(--planning-text);
    font-size: 0.78rem;
    font-weight: 700;
    text-align: center;
    width: 100%;
}

.termination-timeline li small {
    color: var(--planning-text-weak);
    font-size: 0.7rem;
    line-height: 1.4;
    text-align: center;
    width: 100%;
}

/* ---- Documents ---- */

.termination-doc-card {
    align-items: center;
    background: var(--planning-surface-soft-2);
    border: 1px solid var(--planning-border-grid);
    border-radius: 14px;
    display: flex;
    gap: 0.8rem;
    padding: 0.85rem 0.95rem;
}

.termination-doc-card--warn {
    background: var(--planning-orange-surface);
    border-color: var(--planning-orange-border);
}

.termination-doc-card--info {
    background: var(--planning-surface-soft);
}

.termination-doc-icon {
    align-items: center;
    background: var(--planning-purple-surface);
    border-radius: 12px;
    color: var(--planning-purple);
    display: flex;
    flex-shrink: 0;
    font-size: 1.1rem;
    height: 36px;
    justify-content: center;
    width: 36px;
}

.termination-doc-icon--warn {
    background: #fdf2e2;
    color: var(--planning-orange-dark);
}

.termination-doc-icon--info {
    background: var(--planning-surface-soft-2);
    color: var(--planning-text-tertiary-3);
}

.termination-doc-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.termination-doc-title {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.termination-doc-title strong {
    color: var(--planning-text);
    font-size: 0.86rem;
    font-weight: 800;
}

.termination-doc-note {
    color: var(--planning-text-secondary-3);
    font-size: 0.75rem;
    line-height: 1.45;
}

.termination-badge {
    border-radius: 999px;
    font-size: 0.65rem;
    font-weight: 800;
    padding: 0.15rem 0.55rem;
}

.termination-badge--warn {
    background: #fdf2e2;
    color: var(--planning-orange-dark);
}

.termination-badge--accent {
    background: var(--planning-purple-surface);
    color: var(--planning-purple-dark);
}

.termination-badge--info {
    background: var(--planning-surface-soft-2);
    color: var(--planning-text-tertiary);
}

.termination-doc-cta {
    align-items: center;
    background: var(--planning-purple);
    border: none;
    border-radius: 11px;
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    flex-shrink: 0;
    font-size: 0.78rem;
    font-weight: 700;
    gap: 0.35rem;
    height: 34px;
    padding: 0 0.9rem;
    text-decoration: none;
}

.termination-doc-cta:hover {
    background: var(--planning-purple-hover);
}

.termination-doc-cta:disabled {
    background: var(--planning-border-control);
    color: var(--planning-text-weak);
    cursor: not-allowed;
}

.termination-doc-cta--ghost {
    background: var(--planning-surface);
    border: 1px solid var(--planning-border-control);
    color: var(--app-ink-muted);
}

.termination-doc-cta--ghost:hover {
    border-color: var(--planning-border-hover);
    color: var(--planning-purple-dark);
}

.termination-legal-strip {
    align-items: flex-start;
    background: var(--planning-purple-surface-3);
    border: 1px solid var(--planning-purple-surface-4);
    border-radius: 14px;
    display: flex;
    gap: 0.55rem;
    padding: 0.85rem 1rem;
}

.termination-legal-strip i {
    color: var(--planning-purple);
    margin-top: 0.1rem;
}

.termination-legal-strip span {
    color: var(--app-ink-muted);
    font-size: 0.78rem;
    line-height: 1.5;
}

.termination-legal-strip a {
    color: var(--planning-purple);
    font-weight: 700;
}

/* ---- Colonne droite : montants ---- */

.termination-summary {
    background: var(--planning-surface);
    border: 1px solid var(--planning-border-strong);
    border-radius: 18px;
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    padding: 1.35rem;
    position: sticky;
    top: 1.5rem;
}

.termination-summary-head {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.termination-summary-head strong {
    color: var(--planning-text);
    font-size: 1rem;
    font-weight: 800;
}

.termination-summary-head span {
    color: var(--planning-text-weak);
    font-size: 0.72rem;
}

.termination-summary-groups {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}

.termination-summary-group {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.termination-summary-group-title {
    color: var(--planning-purple);
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.termination-amt-row {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.termination-amt-line {
    align-items: center;
    display: flex;
    gap: 0.4rem;
    position: relative;
}

.termination-amt-line strong {
    color: var(--planning-text);
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.3;
}

.termination-amt-leader {
    align-self: center;
    border-bottom: 1.5px dotted var(--planning-purple-border);
    flex: 1;
    min-width: 12px;
}

.termination-amt-input {
    background: none;
    border: none;
    color: var(--planning-text);
    font-size: 0.86rem;
    font-variant-numeric: tabular-nums;
    font-weight: 800;
    text-align: right;
    width: 6.5rem;
}

.termination-amt-input:focus {
    outline: none;
}

.termination-amt-value {
    color: var(--planning-text);
    font-size: 0.86rem;
    font-weight: 800;
}

.termination-amt-sub {
    color: var(--planning-text-weak);
    font-size: 0.7rem;
    line-height: 1.4;
}

.termination-amt-detail-toggle {
    align-items: center;
    background: transparent;
    border: 0;
    color: var(--planning-purple);
    cursor: pointer;
    display: inline-flex;
    flex-shrink: 0;
    justify-content: center;
    padding: 0;
}

.termination-amt-detail-toggle i {
    font-size: 0.8rem;
    transition: transform 0.2s ease;
}

.termination-amt-detail-toggle i.is-open {
    transform: rotate(90deg);
}

.termination-calculation-panel {
    box-sizing: border-box;
    margin: 0.35rem 0 0.4rem;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    padding: 0.75rem 0.85rem;
}

.termination-calculation-panel .contract-cmg-detail-row {
    min-width: 0;
}

.termination-calculation-panel .contract-cmg-detail-row > span:first-child {
    min-width: 0;
    overflow-wrap: anywhere;
    white-space: normal;
}

.termination-calculation-panel .contract-cmg-detail-row strong {
    min-width: 0;
    overflow-wrap: anywhere;
    text-align: right;
    white-space: normal;
}

.termination-calculation-panel .contract-cmg-detail-formula,
.termination-calculation-panel .termination-detail-step-sub,
.termination-calculation-panel .termination-detail-legal a {
    overflow-wrap: anywhere;
    white-space: normal;
}

.termination-amt-toggle {
    color: var(--planning-purple);
    flex-shrink: 0;
    font-size: 0.68rem;
    font-weight: 800;
}

.termination-detail {
    background: var(--planning-surface-soft);
    border: 1px solid var(--planning-border-grid);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-top: 0.5rem;
    padding: 0.7rem 0.75rem;
}

.termination-detail-formula {
    color: var(--planning-text-secondary);
    font-size: 0.72rem;
    font-weight: 800;
    margin: 0;
}

.termination-detail-steps {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.termination-detail-category {
    color: var(--planning-text-weak);
    font-size: 0.66rem;
    font-weight: 800;
    margin: 0;
    text-transform: uppercase;
}

.termination-detail-step-row {
    align-items: baseline;
    color: var(--planning-text-secondary-2);
    display: flex;
    font-size: 0.72rem;
    gap: 0.4rem;
}

.termination-detail-step-leader {
    border-bottom: 1px dotted var(--planning-border-control);
    flex: 1;
}

.termination-detail-step-sub {
    color: var(--planning-text-weak);
    font-size: 0.68rem;
    margin: 0;
}

.termination-detail-explanation {
    color: var(--planning-text-tertiary-2);
    font-size: 0.72rem;
    line-height: 1.5;
    margin: 0;
}

.termination-detail-legal {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.termination-detail-legal li {
    align-items: center;
    display: flex;
    gap: 0.35rem;
}

.termination-detail-legal i {
    color: var(--planning-purple);
    font-size: 0.75rem;
}

.termination-detail-legal a {
    color: var(--planning-purple);
    font-size: 0.72rem;
    font-weight: 700;
}

.termination-net {
    align-items: center;
    background: var(--planning-purple-surface);
    border: 1px solid var(--planning-purple-border);
    border-radius: 15px;
    display: flex;
    justify-content: space-between;
    padding: 0.85rem 1rem;
}

.termination-net strong {
    color: var(--planning-purple-dark);
    display: block;
    font-size: 0.82rem;
    font-weight: 800;
}

.termination-net small {
    color: var(--app-purple-accent);
    font-size: 0.68rem;
}

.termination-net-amount {
    color: var(--planning-purple-dark) !important;
    font-size: 1.3rem !important;
    font-variant-numeric: tabular-nums;
}

.termination-alert {
    align-items: flex-start;
    background: var(--planning-pink-surface);
    border: 1px solid var(--planning-pink-border);
    border-radius: 13px;
    display: flex;
    gap: 0.5rem;
    padding: 0.75rem 0.85rem;
}

.termination-alert i {
    color: var(--planning-pink-dark);
    margin-top: 0.1rem;
}

.termination-alert span {
    color: var(--planning-pink-darker);
    font-size: 0.75rem;
    line-height: 1.5;
}

.termination-toggle {
    align-items: flex-start;
    display: flex;
    gap: 0.5rem;
}

.termination-toggle span {
    color: var(--app-ink-muted);
    font-size: 0.78rem;
    line-height: 1.4;
}

.termination-summary-actions {
    border-top: 1px solid var(--planning-border-grid);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding-top: 0.9rem;
}

.termination-inline-form {
    display: contents;
}

.termination-cta-primary {
    align-items: center;
    background: var(--planning-purple);
    border: none;
    border-radius: 12px;
    color: #fff;
    cursor: pointer;
    display: flex;
    font-size: 0.86rem;
    font-weight: 800;
    gap: 0.5rem;
    height: 44px;
    justify-content: center;
    text-decoration: none;
    width: 100%;
}

.termination-cta-primary:hover {
    background: var(--planning-purple-hover);
}

.termination-cta-primary:disabled {
    background: var(--planning-border-control);
    color: var(--planning-text-weak);
    cursor: not-allowed;
}

.termination-cta-secondary {
    align-items: center;
    background: var(--planning-surface);
    border: 1px solid var(--planning-border-control);
    border-radius: 11px;
    color: var(--app-ink-muted);
    cursor: pointer;
    display: flex;
    font-size: 0.8rem;
    font-weight: 700;
    gap: 0.45rem;
    height: 38px;
    justify-content: center;
    width: 100%;
}

.termination-cta-secondary:hover {
    border-color: var(--planning-border-hover);
    color: var(--planning-purple-dark);
}

.termination-cta-secondary:disabled {
    color: var(--planning-text-weak);
    cursor: not-allowed;
}

.termination-footnote {
    color: var(--planning-text-weak);
    font-size: 0.7rem;
    margin: 0;
    text-align: center;
}

/* ---- Modales ---- */

.termination-modal-overlay {
    align-items: center;
    background: var(--planning-overlay);
    display: flex;
    inset: 0;
    justify-content: center;
    padding: 2rem;
    position: fixed;
    z-index: 60;
}

.termination-modal {
    background: var(--planning-surface);
    border-radius: 20px;
    box-shadow: 0 24px 64px rgba(28, 27, 41, 0.22);
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    max-width: 480px;
    padding: 1.5rem;
    width: 100%;
}

.termination-modal-head {
    align-items: flex-start;
    display: flex;
    gap: 0.7rem;
}

.termination-modal-icon {
    align-items: center;
    background: var(--planning-purple-surface);
    border-radius: 12px;
    color: var(--planning-purple);
    display: flex;
    flex-shrink: 0;
    font-size: 1.15rem;
    height: 40px;
    justify-content: center;
    width: 40px;
}

.termination-modal-head strong {
    color: var(--planning-text);
    display: block;
    font-size: 1.02rem;
    font-weight: 800;
}

.termination-modal-head small {
    color: var(--planning-text-tertiary-2);
    font-size: 0.76rem;
}

.termination-modal-head > span:nth-child(2) {
    flex: 1;
}

.termination-modal-close {
    background: none;
    border: none;
    border-radius: 8px;
    color: var(--planning-text-weak);
    cursor: pointer;
    flex-shrink: 0;
    height: 30px;
    width: 30px;
}

.termination-modal-close:hover {
    background: var(--planning-surface-soft-2);
}

.termination-date-card {
    background: var(--planning-surface-soft-2);
    border: 1px solid var(--planning-border-grid);
    border-radius: 13px;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding: 0.75rem 0.85rem;
}

.termination-date-card-label {
    color: var(--planning-text-tertiary-2);
    font-size: 0.72rem;
    font-weight: 700;
}

.termination-date-card-label--row {
    align-items: center;
    display: flex;
    justify-content: space-between;
}

.termination-date-card input,
.termination-date-card textarea {
    background: none;
    border: none;
    color: var(--planning-text);
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 800;
    resize: vertical;
}

.termination-date-card textarea {
    font-size: 0.82rem;
    font-weight: 500;
}

.termination-date-card input:focus,
.termination-date-card textarea:focus {
    outline: none;
}

.termination-recap {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    width: 100%;
}

.termination-recap > div {
    align-items: center;
    display: flex;
    justify-content: space-between;
}

.termination-recap span {
    color: var(--planning-text-weak);
    font-size: 0.75rem;
}

.termination-recap strong {
    color: var(--planning-text);
    font-size: 0.78rem;
}

.termination-modal-actions {
    display: flex;
    gap: 0.6rem;
}

.termination-modal-actions .termination-cta-secondary,
.termination-modal-actions .termination-cta-primary {
    width: auto;
    flex: 1;
}

.termination-attestation {
    color: var(--app-ink-muted);
    font-size: 0.78rem;
    line-height: 1.5;
}

.termination-attestation p {
    margin: 0 0 0.3rem;
}

.termination-attestation ul {
    margin: 0;
}

.termination-attestation-hint {
    color: var(--planning-text-weak);
    font-size: 0.72rem;
    margin: 0.3rem 0 0;
}

.termination-attestation-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 0.4rem;
}

.termination-hint {
    color: var(--planning-text-tertiary-2);
    font-size: 0.78rem;
    line-height: 1.5;
    margin: 0;
}

/* Landing page (home-*) */
.home-page {
    font-family: "Plus Jakarta Sans", system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
}

.home-container {
    margin: 0 auto;
    max-width: 1160px;
    padding-inline: 1.5rem;
}

.home-header {
    backdrop-filter: blur(8px);
    background: rgba(255, 255, 255, .92);
    border-bottom: 1px solid var(--planning-border);
    position: sticky;
    top: 0;
    z-index: 20;
}

.home-header-inner {
    align-items: center;
    display: flex;
    gap: 1.75rem;
    padding-block: .875rem;
}

.home-logo {
    display: block;
    height: auto;
    width: 138px;
}

.home-logo-small {
    width: 112px;
}

.home-nav {
    display: flex;
    gap: 1.4rem;
}

.home-nav a,
.home-footer-nav a {
    color: var(--planning-text-secondary-2);
    font-size: .84rem;
    font-weight: 600;
}

.home-nav a:hover,
.home-footer-nav a:hover {
    color: var(--planning-purple);
}

.home-header-actions {
    align-items: center;
    display: flex;
    gap: .6rem;
    margin-left: auto;
}

.home-link-button {
    background: transparent;
    border: 0;
    border-radius: .7rem;
    color: var(--planning-text-secondary-2);
    cursor: pointer;
    font: inherit;
    font-size: .84rem;
    font-weight: 700;
    height: 2.4rem;
    padding: 0 .9rem;
}

.home-link-button:hover {
    background: var(--planning-purple-surface-3);
}

.home-button {
    align-items: center;
    border: 1px solid transparent;
    border-radius: .7rem;
    cursor: pointer;
    display: inline-flex;
    font: inherit;
    font-size: .9rem;
    font-weight: 700;
    gap: .5rem;
    height: 2.9rem;
    justify-content: center;
    padding: 0 1.25rem;
    transition: background 150ms ease, border-color 150ms ease;
}

.home-button i {
    font-size: 1.1rem;
}

.home-button-compact {
    font-size: .84rem;
    height: 2.4rem;
    padding: 0 1rem;
}

.home-button-block {
    margin-top: auto;
    width: 100%;
}

.home-button-primary {
    background: var(--planning-purple);
    color: #fff;
}

.home-button-primary:hover {
    background: var(--planning-purple-hover);
    color: #fff;
}

.home-button-outline {
    background: #fff;
    border-color: var(--planning-border-control);
    color: var(--planning-text-secondary-2);
}

.home-button-outline:hover {
    border-color: var(--planning-border-hover);
}

.home-hero {
    background: var(--planning-app-bg);
    border-bottom: 1px solid var(--planning-border);
    padding-block: 1.75rem 3.25rem;
}

.home-split {
    align-items: center;
    display: grid;
    gap: 2.5rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
}

.home-hero-copy,
.home-intro-copy,
.home-upcoming-copy {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    min-width: 0;
}

.home-hero h1 {
    font-size: clamp(2rem, 3.6vw, 2.5rem);
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.06;
    margin: 0;
}

.home-lead {
    color: var(--planning-text-secondary-2);
    font-size: 1.03rem;
    line-height: 1.5;
    margin: 0;
    max-width: 30em;
    text-wrap: pretty;
}

.home-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    margin-top: .25rem;
}

.home-hero-actions-center {
    justify-content: center;
}

.home-reassurance {
    color: var(--planning-text-secondary-3);
    display: flex;
    flex-wrap: wrap;
    font-size: .78rem;
    gap: .5rem 1.1rem;
    list-style: none;
    margin: .25rem 0 0;
    padding: 0;
}

.home-reassurance li {
    align-items: center;
    display: inline-flex;
    gap: .4rem;
}

.home-reassurance i {
    color: var(--home-green);
    font-size: 1rem;
}

.home-visual {
    display: flex;
    justify-content: center;
    min-width: 0;
}

.home-image {
    display: block;
    height: auto;
    max-width: 100%;
    width: 100%;
}

.home-image-framed {
    border: 1px solid var(--planning-border-strong);
    border-radius: 1.1rem;
}

.home-intro {
    padding-block: 2.1rem .5rem;
}

.home-intro-visual {
    min-width: 0;
    order: 1;
}

.home-intro-copy {
    order: 2;
}

.home-eyebrow {
    color: var(--planning-text-tertiary-2);
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .1em;
}

.home-page h2 {
    font-size: clamp(1.6rem, 3vw, 1.95rem);
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.14;
    margin: 0;
    text-wrap: balance;
}

.home-intro-copy p {
    color: var(--planning-text-secondary-2);
    font-size: .95rem;
    line-height: 1.55;
    margin: 0;
    text-wrap: pretty;
}

.home-arrow-list {
    display: flex;
    flex-direction: column;
    gap: .65rem;
    list-style: none;
    margin: .25rem 0 0;
    padding: 0;
}

.home-arrow-list li {
    color: var(--planning-text-secondary-2);
    display: flex;
    font-size: .88rem;
    gap: .6rem;
    line-height: 1.45;
}

.home-arrow-list i {
    color: var(--planning-purple);
    flex: 0 0 auto;
    font-size: 1.1rem;
    margin-top: 1px;
}

.home-section {
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
    padding-block: 4rem;
}

.home-section-heading {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: .6rem;
    text-align: center;
}

.home-section-heading p,
.home-muted {
    color: var(--planning-text-secondary-3);
    font-size: .95rem;
    line-height: 1.5;
    margin: 0;
    max-width: 36em;
    text-wrap: pretty;
}

.home-cta-short {
    display: none;
}

#roles.home-section {
    padding-block: 1.5rem;
}

.home-tabs {
    background: var(--planning-purple-surface);
    border-radius: 999px;
    display: inline-flex;
    gap: .25rem;
    margin-top: .4rem;
    padding: .25rem;
}

.home-tab {
    background: transparent;
    border: 0;
    border-radius: 999px;
    color: var(--planning-text-secondary-3);
    cursor: pointer;
    font: inherit;
    font-size: .84rem;
    font-weight: 700;
    height: 2.4rem;
    padding: 0 1.1rem;
    transition: background 120ms ease, color 120ms ease;
}

.home-tab.is-active {
    background: #fff;
    box-shadow: 0 1px 2px rgba(46, 29, 107, .08);
    color: var(--planning-purple-dark);
}

.home-feature-grid {
    display: grid;
    gap: .875rem;
    grid-auto-rows: 1fr;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
}

.home-feature-card {
    align-items: center;
    background: #fff;
    border: 1px solid var(--planning-border-strong);
    border-radius: 1.1rem;
    box-sizing: border-box;
    display: grid;
    gap: .65rem;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto 1fr;
    min-height: 13rem;
    padding: 1.4rem;
}

.home-feature-card p {
    align-self: start;
    grid-column: 1 / -1;
}

.home-feature-card i {
    color: var(--planning-purple);
    font-size: 1.5rem;
}

.home-feature-card h3,
.home-upcoming-card strong {
    font-size: .97rem;
    font-weight: 700;
    margin: 0;
}

.home-feature-card p {
    color: var(--planning-text-secondary-3);
    font-size: .85rem;
    line-height: 1.5;
    margin: 0;
}

.home-band {
    background: var(--planning-app-bg);
    border-block: 1px solid var(--planning-border);
}

#avenir .home-split {
    padding-block: 4rem;
}

.home-badge {
    align-items: center;
    align-self: flex-start;
    border-radius: 999px;
    display: inline-flex;
    font-size: .72rem;
    font-weight: 800;
    height: 1.5rem;
    padding: 0 .65rem;
}

.home-badge-upcoming {
    background: var(--home-amber-surface);
    color: var(--home-amber-dark);
    letter-spacing: .1em;
}

.home-badge-free {
    background: var(--home-green-surface);
    color: var(--home-green-dark);
    font-weight: 700;
}

.home-upcoming-list {
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.home-upcoming-card {
    align-items: flex-start;
    background: #fff;
    border: 1px solid var(--planning-border-strong);
    border-radius: .95rem;
    display: flex;
    gap: .8rem;
    padding: 1rem 1.1rem;
}

.home-upcoming-card i {
    color: var(--planning-purple);
    font-size: 1.3rem;
    margin-top: 2px;
}

.home-upcoming-card div {
    display: flex;
    flex-direction: column;
    gap: .2rem;
}

.home-upcoming-card span {
    color: var(--planning-text-secondary-3);
    font-size: .8rem;
    line-height: 1.45;
}

.home-plan-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}

.home-plan-card {
    background: #fff;
    border: 1px solid var(--planning-border-strong);
    border-radius: 1.1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.5rem;
}

.home-plan-card.is-featured {
    border-color: var(--planning-border-hover);
}

.home-plan-header {
    align-items: center;
    display: flex;
    gap: .9rem;
}

.home-plan-header div {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    min-width: 0;
}

.home-plan-header strong {
    font-size: 1.2rem;
    font-weight: 800;
    letter-spacing: -.02em;
}

.home-plan-image {
    flex: 0 0 auto;
    height: 88px;
    object-fit: contain;
    width: 88px;
}

.home-plan-pricing {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1rem;
    justify-content: space-between;
}

.home-plan-pricing .home-badge {
    align-self: center;
}

.home-plan-price {
    align-items: baseline;
    display: flex;
    gap: .5rem;
    margin: 0;
}

.home-plan-price strong {
    font-size: 2.4rem;
    font-variant-numeric: tabular-nums;
    font-weight: 800;
    letter-spacing: -.02em;
}

.home-plan-price span {
    color: var(--planning-text-secondary-3);
    font-size: .88rem;
    font-weight: 600;
}

.home-plan-features {
    border-top: 1px solid var(--planning-border-grid);
    display: flex;
    flex-direction: column;
    gap: .55rem;
    list-style: none;
    margin: 0;
    padding: 1rem 0 0;
}

.home-plan-features li {
    color: var(--planning-text-secondary-2);
    display: flex;
    font-size: .85rem;
    gap: .55rem;
    line-height: 1.4;
}

.home-plan-features i {
    color: var(--home-green);
    font-size: 1rem;
    margin-top: 2px;
}

.home-fineprint {
    color: var(--planning-text-tertiary-2);
    font-size: .78rem;
    margin: 0;
    text-align: center;
}

.home-final-cta {
    border-bottom: 0;
}

.home-final-cta-inner {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding-block: 3.5rem;
    text-align: center;
}

.home-final-cta h2 {
    font-size: clamp(1.5rem, 3vw, 1.75rem);
}

.home-footer {
    background: #fff;
    border-top: 1px solid var(--planning-border);
}

.home-footer-inner {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 1.1rem;
    padding-block: 1.6rem;
}

.home-footer-tagline {
    color: var(--planning-text-weak);
    font-size: .78rem;
}

.home-footer-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 1.1rem;
    margin-left: auto;
}

.home-footer-nav a {
    color: var(--planning-text-secondary-3);
    font-size: .78rem;
    font-weight: 500;
}

.home-role-picker {
    border: 0;
    display: grid;
    gap: .6rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 0 0 .9rem;
    min-width: 0;
    padding: 0;
}

.home-role-picker legend {
    color: var(--app-purple-accent);
    font-size: .72rem;
    font-weight: 700;
    margin-bottom: .4rem;
    padding: 0;
}

.home-role-option {
    align-items: center;
    background: #fff;
    border: 1px solid var(--planning-border-control);
    border-radius: .85rem;
    cursor: pointer;
    display: flex;
    font: inherit;
    gap: .6rem;
    padding: .7rem .75rem;
    text-align: left;
}

.home-role-option.is-active {
    background: var(--planning-purple-surface-3);
    border-color: var(--planning-border-hover);
}

.home-role-option img {
    flex: 0 0 auto;
    height: 38px;
    object-fit: contain;
    width: 38px;
}

.home-role-option span {
    color: var(--planning-text);
    font-size: .78rem;
    font-weight: 700;
    line-height: 1.25;
}

.landing-modal-panel-wide {
    max-width: 640px;
}

.landing-modal-panel-wide .landing-auth-form {
    column-gap: .9rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.landing-modal-panel-wide .landing-field-full {
    grid-column: 1 / -1;
}

.landing-modal-panel-wide .home-role-option span {
    white-space: nowrap;
}

@media (max-width: 760px) {
    .landing-modal-panel-wide .home-role-option span {
        min-width: 0;
        white-space: normal;
    }
}

@media (max-width: 760px) {
    .home-nav {
        display: none;
    }

    .home-header-inner {
        gap: 1rem;
    }

    .home-logo {
        width: 112px;
    }

    .home-link-button {
        color: var(--planning-purple);
        font-size: .82rem;
        padding: 0 .25rem;
    }

    .home-cta-long {
        display: none;
    }

    .home-cta-short {
        display: inline;
    }

    .home-container {
        padding-inline: 1.125rem;
    }

    .home-page h2 {
        font-size: 1.5rem;
    }

    .home-hero {
        padding-block: 1.4rem 2.25rem;
    }

    .home-hero .home-split,
    .home-intro {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    .home-hero-copy,
    .home-intro-copy {
        display: contents;
    }

    .home-hero h1 {
        font-size: 1.8rem;
        order: 1;
        text-align: center;
    }

    .home-hero .home-visual {
        margin-block: -.5rem -.25rem;
        order: 2;
    }

    .home-hero .home-image {
        margin-inline: auto;
        max-width: 330px;
    }

    .home-lead {
        font-size: .95rem;
        max-width: none;
        order: 3;
        text-align: justify;
    }

    .home-hero-actions {
        /* flex-direction: column; */
        margin-top: 0;
        order: 4;
    }

    .home-hero-actions .home-button {
        width: 100%;
    }

    .home-reassurance {
        justify-content: center;
        margin-top: 0;
        order: 5;
    }

    .home-intro {
        padding-block: 1.4rem .5rem;
    }

    .home-intro .home-eyebrow {
        order: 1;
    }

    .home-intro h2 {
        order: 2;
    }

    .home-intro-visual {
        order: 3;
    }

    .home-intro-copy > p {
        order: 4;
        text-align: justify;
    }

    .home-arrow-list {
        order: 5;
    }

    .home-section {
        padding-block: 2.25rem;
    }

    .home-section-heading p {
        font-size: .88rem;
    }

    .home-feature-card {
        min-height: 0;
    }

    #avenir .home-split {
        padding-block: 2rem;
    }

    .home-upcoming-copy > .home-muted {
        text-align: justify;
    }

    .home-final-cta-inner {
        align-items: stretch;
        padding-block: 2.25rem;
    }

    .home-final-cta-inner .home-hero-actions {
        align-items: stretch;
    }

    .home-final-cta-inner .home-button {
        width: 100%;
    }

    .home-footer-nav {
        display: none;
    }

    .landing-modal {
        align-items: stretch;
        padding: 0;
    }

    .landing-modal-panel,
    .landing-modal-panel-wide {
        border-radius: 0;
        box-shadow: none;
        max-height: none;
        max-width: none;
        min-height: 100dvh;
        padding: 1.4rem 1.125rem 2rem;
    }
}

@media (max-width: 479px) {
    .landing-modal-panel-wide .landing-auth-form {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Mon abonnement (subscription-*) */
.subscription-page {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}

.subscription-header h1 {
    color: var(--planning-text);
    font-size: 1.55rem;
    font-weight: 800;
    letter-spacing: -.02em;
    margin: 0;
}

.subscription-header p {
    color: var(--planning-text-tertiary-2);
    font-size: .84rem;
    margin: .25rem 0 0;
}

.subscription-grid {
    align-items: start;
    display: grid;
    gap: 1.1rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.subscription-side {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}

.subscription-card {
    background: #fff;
    border: 1px solid var(--planning-border-strong);
    border-radius: 1.35rem;
    box-shadow: 0 1px 2px rgba(28, 27, 41, .04);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.5rem 1.6rem;
}

.subscription-card--compact {
    border-radius: 1.25rem;
    gap: .2rem;
    padding: 1.1rem 1.5rem;
}

.subscription-card-head {
    align-items: flex-start;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
}

.subscription-card h2 {
    color: var(--planning-text);
    font-size: 1.05rem;
    font-weight: 800;
    margin: 0;
}

.subscription-card--compact h2 {
    color: var(--planning-text-secondary-2);
    font-size: .88rem;
    font-weight: 700;
}

.subscription-card-head p,
.subscription-card--compact p {
    color: var(--planning-text-tertiary-2);
    font-size: .78rem;
    line-height: 1.5;
    margin: .2rem 0 0;
}

.subscription-badge {
    align-items: center;
    border: 1px solid transparent;
    border-radius: 999px;
    display: inline-flex;
    flex: 0 0 auto;
    font-size: .7rem;
    font-weight: 800;
    height: 1.5rem;
    padding: 0 .65rem;
    text-transform: uppercase;
}

.subscription-badge--green {
    background: var(--home-green-surface);
    border-color: #cfe8dd;
    color: var(--home-green-dark);
}

.subscription-badge--amber {
    background: #fff6ec;
    border-color: #f8e1c4;
    color: var(--home-amber-dark);
}

.subscription-price {
    align-items: baseline;
    display: flex;
    gap: .5rem;
    margin: 0;
}

.subscription-price strong {
    color: var(--planning-purple-dark);
    font-size: 2.5rem;
    font-weight: 800;
    letter-spacing: -.04em;
}

.subscription-price span {
    color: var(--planning-text-tertiary-2);
    font-size: .9rem;
    font-weight: 700;
}

.subscription-status {
    background: linear-gradient(120deg, #f3eefe 0%, #fbf6ff 52%, #fff4f8 100%);
    border: 1px solid #ede4fe;
    border-radius: 1.1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.25rem 1.35rem;
}

.subscription-status h3 {
    color: var(--planning-text);
    font-size: .98rem;
    font-weight: 800;
    margin: 0;
    text-wrap: pretty;
}

.subscription-status > p {
    color: var(--planning-text-tertiary);
    font-size: .82rem;
    line-height: 1.55;
    margin: 0;
    text-wrap: pretty;
}

.subscription-progress {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.subscription-progress-track {
    background: #ede4fe;
    border-radius: 999px;
    display: block;
    height: .6rem;
    overflow: hidden;
}

.subscription-progress-bar {
    background: linear-gradient(90deg, var(--planning-purple), #ec4899);
    display: block;
    height: 100%;
}

.subscription-progress-dates {
    color: var(--planning-text-tertiary-2);
    display: flex;
    flex-wrap: wrap;
    font-size: .75rem;
    font-weight: 600;
    gap: .25rem 1rem;
    justify-content: space-between;
}

.subscription-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .6rem 1rem;
}

.subscription-actions button:disabled {
    cursor: not-allowed;
    opacity: .55;
}

.subscription-actions small {
    color: var(--planning-text-tertiary-2);
    flex: 1 1 14rem;
    font-size: .75rem;
    line-height: 1.45;
}

.subscription-notice {
    align-items: flex-start;
    background: #fff6ec;
    border: 1px solid #f8e1c4;
    border-radius: 1rem;
    display: flex;
    gap: .85rem;
    padding: 1rem 1.15rem;
}

.subscription-notice > i {
    color: #b67319;
    flex: 0 0 auto;
    font-size: 1.4rem;
}

.subscription-notice strong {
    color: #78350f;
    font-size: .88rem;
}

.subscription-notice p {
    color: #92643a;
    font-size: .78rem;
    line-height: 1.55;
    margin: .3rem 0 0;
}

.subscription-included {
    display: flex;
    flex-direction: column;
    gap: .55rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.subscription-included li {
    align-items: center;
    color: var(--planning-text-secondary-2);
    display: flex;
    font-size: .84rem;
    gap: .6rem;
}

.subscription-included i {
    color: var(--home-green);
    font-size: 1.05rem;
}

.subscription-footnote {
    align-items: center;
    border-top: 1px solid var(--planning-border-grid);
    color: var(--planning-text-tertiary-2);
    display: flex;
    font-size: .78rem;
    gap: .6rem;
    line-height: 1.5;
    margin: 0;
    padding-top: 1rem;
}

.subscription-footnote i {
    color: var(--planning-text-weak);
    flex: 0 0 auto;
    font-size: 1.05rem;
}

.subscription-empty {
    align-items: center;
    border: 1px dashed var(--planning-border-strong);
    border-radius: 1rem;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding: 1.6rem 1.1rem;
    text-align: center;
}

.subscription-empty i {
    color: #b9b2d6;
    font-size: 1.6rem;
}

.subscription-empty strong {
    color: var(--planning-text-secondary-2);
    font-size: .88rem;
}

.subscription-empty p {
    color: var(--planning-text-tertiary-2);
    font-size: .78rem;
    line-height: 1.5;
    margin: 0;
    max-width: 19rem;
}

.subscription-invoices {
    display: flex;
    flex-direction: column;
    list-style: none;
    margin: 0;
    padding: 0;
}

.subscription-invoices li {
    align-items: center;
    border-bottom: 1px solid var(--planning-border-grid);
    display: flex;
    gap: .85rem;
    padding: .75rem .25rem;
}

.subscription-invoices i {
    color: var(--planning-text-tertiary-2);
    font-size: 1.15rem;
}

.subscription-invoices span,
.subscription-invoices a {
    color: var(--planning-text-secondary-2);
    flex: 1;
    font-size: .84rem;
    font-weight: 600;
}

.subscription-invoices strong {
    font-size: .84rem;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 1024px) {
    .subscription-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 640px) {
    .subscription-card {
        padding: 1.2rem 1.1rem;
    }
}

/* Menu « Télécharger » d'un contrat : s'ouvre vers le haut, la barre d'actions étant en bas de page. */
.contract-documents-menu {
    display: inline-flex;
    position: relative;
}

.contract-documents-menu-caret {
    font-size: 0.8rem;
    margin-left: 0.1rem;
}

.contract-documents-menu-list {
    background: #fff;
    border: 1px solid var(--app-border-lilac);
    border-radius: 0.75rem;
    bottom: calc(100% + 0.4rem);
    box-shadow: 0 10px 28px rgba(28, 27, 41, 0.14);
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 17rem;
    padding: 0.35rem;
    position: absolute;
    right: 0;
    z-index: 30;
}

.contract-documents-menu-item {
    align-items: center;
    border-radius: 0.55rem;
    color: var(--planning-text-secondary-2);
    display: flex;
    font-size: 0.84rem;
    font-weight: 600;
    gap: 0.6rem;
    padding: 0.6rem 0.75rem;
    text-decoration: none;
    white-space: nowrap;
}

button.contract-documents-menu-item {
    background: none;
    border: 0;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
    width: 100%;
}

.contract-documents-menu-hint {
    color: var(--app-ink-muted);
    font-size: 0.75rem;
    line-height: 1.4;
    padding: 0.4rem 0.65rem;
}

.contract-documents-menu-group {
    color: var(--planning-text-tertiary-2);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    padding: 0.6rem 0.75rem 0.25rem;
    text-transform: uppercase;
}

.contract-documents-menu-item i {
    color: var(--planning-purple);
    font-size: 1.15rem;
}

.contract-documents-menu-item:hover,
.contract-documents-menu-item:focus-visible {
    background: var(--app-lilac-bg);
    color: var(--planning-purple);
}

.contract-documents-menu-item--all {
    border-bottom: 1px solid var(--planning-border);
    border-radius: 0.55rem 0.55rem 0 0;
    margin-bottom: 0.15rem;
}

/* Modale d'attestation des documents, à la signature du contrat. */
.contract-attest-modal {
    max-height: calc(100vh - 3rem);
    max-width: 34rem;
    overflow-y: auto;
}

.contract-attest-modal h3 {
    align-items: center;
    display: flex;
    gap: 0.5rem;
}

.contract-attest-documents {
    background: transparent;
    border: 0;
    margin: 0;
    padding: 0;
}

.contract-attest-documents .contract-documents__groups {
    margin: 0;
}

.contract-attest-check {
    align-items: flex-start;
    background: var(--app-lilac-bg);
    border: 1px solid var(--app-border-lilac);
    border-radius: 0.75rem;
    color: var(--planning-text-secondary-2);
    cursor: pointer;
    display: flex;
    font-size: 0.84rem;
    font-weight: 600;
    gap: 0.65rem;
    line-height: 1.5;
    padding: 0.85rem 1rem;
}

.contract-attest-check input {
    accent-color: var(--planning-purple);
    flex: 0 0 auto;
    height: 1.1rem;
    margin-top: 0.15rem;
    width: 1.1rem;
}

.termination-attestation li {
    margin: .5rem 0;
}

.termination-attestation li > a {
    align-items: center;
    color: var(--app-purple-accent);
    display: flex;
    font-size: 1.05rem;
    font-weight: 700;
    gap: 0.4rem;
    width: fit-content;
}

.contract-documents-menu-count {
    align-items: center;
    background: var(--app-purple-accent);
    border-radius: 999px;
    color: #fff;
    display: inline-flex;
    font-size: 0.68rem;
    font-weight: 700;
    height: 1.15rem;
    justify-content: center;
    line-height: 1;
    margin-left: 0.35rem;
    min-width: 1.15rem;
    padding: 0 0.3rem;
}

/* Aide déclaration impôts (salarié) — page "Mes déclarations" */

.declaration-page-header {
    align-items: flex-start;
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    justify-content: space-between;
}

.declaration-page-header h1 {
    color: #1c1b29;
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -0.02em;
    margin: 0 0 5px;
}

.declaration-header-meta {
    color: var(--planning-text-tertiary-2);
    font-size: 0.8rem;
    margin-top: 0.2rem;
}

.declaration-header-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
}

.declaration-year-menu {
    display: inline-flex;
    position: relative;
}

.declaration-year-menu-toggle {
    align-items: center;
    background: #fff;
    border: 1px solid var(--planning-border-control);
    border-radius: var(--btn-radius);
    color: var(--planning-text-secondary-2);
    cursor: pointer;
    display: inline-flex;
    font-size: 0.85rem;
    font-weight: 700;
    gap: 0.5rem;
    height: var(--btn-height-md);
    padding: 0 1rem;
}

.declaration-year-menu-toggle i:first-child {
    color: #9c97b4;
    font-size: 1.05rem;
}

.declaration-year-menu-toggle i:last-child {
    font-size: 0.8rem;
}

.declaration-year-menu-list {
    background: #fff;
    border: 1px solid var(--app-border-lilac);
    border-radius: 0.75rem;
    box-shadow: 0 10px 28px rgba(28, 27, 41, 0.14);
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    left: 0;
    min-width: 10rem;
    padding: 0.35rem;
    position: absolute;
    top: calc(100% + 0.4rem);
    z-index: 30;
}

.declaration-year-menu-item {
    border-radius: 0.55rem;
    color: var(--planning-text-secondary-2);
    display: block;
    font-size: 0.84rem;
    font-weight: 600;
    padding: 0.55rem 0.75rem;
    text-decoration: none;
}

.declaration-year-menu-item:hover {
    background: var(--planning-purple-surface);
}

.declaration-year-menu-item--active {
    background: var(--planning-purple-surface);
    color: var(--planning-purple-dark);
    font-weight: 800;
}

.declaration-cta-button {
    align-items: center;
    background: linear-gradient(110deg, #7146d8, #6231c6);
    border: 0;
    border-radius: var(--btn-radius);
    box-shadow: 0 0.45rem 1rem #6e46d82b;
    color: #fff;
    display: inline-flex;
    font-size: 0.85rem;
    font-weight: 800;
    gap: 0.5rem;
    height: var(--btn-height-md);
    padding: 0 1.3rem;
    text-decoration: none;
    white-space: nowrap;
}

.declaration-cta-button:hover {
    background: linear-gradient(110deg, #6231c6, #4c1d95);
}

.declaration-summary {
    display: grid;
    gap: 0.9rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-bottom: 0.9rem;
}

.declaration-summary-card {
    background: #fff;
    border: 1px solid var(--planning-border-strong);
    border-radius: 1.1rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 1.1rem 1.25rem;
}

.declaration-summary-card--highlight {
    background: var(--planning-purple-surface-3);
    border-color: var(--planning-purple-border);
}

.declaration-summary-label {
    color: var(--planning-text-weak);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.declaration-summary-card--highlight .declaration-summary-label {
    color: var(--planning-purple);
}

.declaration-summary-value {
    font-size: 1.5rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}

.declaration-summary-card--highlight .declaration-summary-value {
    color: var(--planning-purple-dark);
}

.declaration-summary-value--positive {
    color: var(--planning-green-dark);
}

.declaration-summary-note {
    color: var(--planning-text-tertiary-2);
    font-size: 0.72rem;
}

.declaration-summary-highlight-row {
    align-items: baseline;
    display: flex;
    gap: 0.6rem;
}

.declaration-table {
    background: #fff;
    border: 1px solid var(--planning-border-strong);
    border-radius: 1.1rem;
    overflow-x: auto;
}

.declaration-row {
    align-items: center;
    display: grid;
    gap: 1rem;
    grid-template-columns: 140px minmax(170px, 1.2fr) 100px 110px 150px 160px 150px 100px;
    min-width: 1080px;
    padding: 0.8rem 1.25rem;
}

.declaration-row + .declaration-row {
    border-top: 1px solid var(--planning-border-grid);
}

.declaration-row-head span {
    color: var(--planning-text-weak);
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-align: center;
    text-transform: uppercase;
    white-space: nowrap;
}

.declaration-cell-right {
    text-align: center;
}

.declaration-siret {
    color: var(--planning-text-tertiary-2);
    font-size: 0.78rem;
    font-variant-numeric: tabular-nums;
}

.declaration-employer-cell {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.declaration-employer-cell strong {
    font-size: 0.9rem;
}

.declaration-employer-cell span {
    color: var(--planning-text-tertiary-2);
    font-size: 0.78rem;
}

.declaration-employer-cell--inline {
    align-items: center;
    flex-direction: row;
    gap: 0.5rem;
}

.declaration-value-cell {
    align-items: center;
    display: flex;
    gap: 0.4rem;
    justify-content: center;
}

.declaration-copy-icon {
    background: none;
    border: none;
    color: var(--planning-text-weak);
    cursor: pointer;
    display: inline-flex;
    font-size: 0.9rem;
    padding: 0.15rem;
}

.declaration-copy-icon:hover {
    color: var(--planning-purple);
}

.declaration-amount {
    font-size: 0.9rem;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
}

.declaration-amount--positive {
    color: var(--planning-green-dark);
}

.declaration-empty {
    color: var(--planning-text-tertiary-2);
    padding: 2.5rem 1.25rem;
    text-align: center;
}

.declaration-explainer {
    display: grid;
    gap: 0.9rem;
    grid-template-columns: minmax(0, 1fr) 320px;
    margin-top: 0.9rem;
}

.declaration-explainer .dashboard-panel ul {
    display: grid;
    gap: 0.5rem;
    list-style: disc;
    margin: 0.9rem 0 0;
    padding-left: 1.15rem;
}

.declaration-explainer .dashboard-panel li {
    color: var(--planning-text-secondary-2);
    font-size: 0.8rem;
    line-height: 1.5;
}

@media (max-width: 900px) {
    .declaration-explainer {
        grid-template-columns: 1fr;
    }
}

.declaration-formula {
    align-items: center;
    background: var(--planning-surface-soft);
    border: 1px solid var(--planning-border-grid);
    border-radius: 0.9rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    padding: 0.85rem 1rem;
}

.declaration-formula span {
    color: var(--planning-text-secondary-2);
    font-size: 0.82rem;
    font-weight: 700;
}

.declaration-formula span:last-child {
    color: var(--planning-green-dark);
    font-weight: 800;
}

.declaration-formula-operator {
    color: var(--planning-text-weak) !important;
    font-weight: 400 !important;
}

.declaration-warning-panel {
    background: var(--planning-orange-surface);
    border: 1px solid var(--planning-orange-border);
    border-radius: 0.9rem;
    padding: 1.1rem 1.25rem;
}

.declaration-warning-heading {
    align-items: center;
    color: var(--planning-orange-dark);
    display: flex;
    font-size: 0.92rem;
    font-weight: 800;
    gap: 0.5rem;
    margin: 0 0 0.55rem;
}

.declaration-warning-heading i {
    font-size: 1.1rem;
}

.declaration-warning-panel p {
    color: var(--planning-orange-dark);
    font-size: 0.8rem;
    line-height: 1.55;
    margin: 0;
    gap: 0;
    opacity: 0.9;
}

.declaration-warning-panel strong {
    text-decoration: underline;
}

.declaration-smic-tooltip {
    display: inline-flex;
    margin-left: 0.15rem;
    vertical-align: middle;
}

.declaration-smic-tooltip .profile-info-tooltip span[role="tooltip"] {
    color: #f5f6fa;
    font-variant-numeric: tabular-nums;
    max-width: min(22rem, 90vw);
    text-align: left;
    white-space: pre-line;
    width: max-content;
}

/* C'est un avertissement, pas une simple info : même habillage que .declaration-warning-panel
   (fond, bordure et texte orange) plutôt que le bleu par défaut de .contract-info-banner. */
.declaration-correction-panel .contract-info-banner {
    background: var(--planning-orange-surface);
    border-color: var(--planning-orange-border);
    color: var(--planning-orange-dark);
    opacity: 0.9;
}

.declaration-correction-panel .contract-info-banner i {
    color: var(--planning-orange-dark);
}

.declaration-table-toolbar {
    align-items: center;
    display: flex;
    gap: 0.9rem;
    justify-content: space-between;
    margin-bottom: 1.1rem;
}

.declaration-info-banner {
    margin-bottom: 1.1rem;
}

.declaration-correction-panel-title {
    color: #1c1b29;
    font-size: 0.95rem;
    font-weight: 800;
    margin: 0;
}

.declaration-correction-toggle-btn {
    align-items: center;
    background: #fff;
    border: 1px solid var(--planning-border-control);
    border-radius: var(--btn-radius);
    color: var(--planning-text-secondary-2);
    cursor: pointer;
    display: inline-flex;
    font-size: 0.78rem;
    font-weight: 700;
    gap: 0.45rem;
    margin-left: auto;
    padding: 0.55rem 0.9rem;
    white-space: nowrap;
}

.declaration-correction-toggle-btn:hover {
    border-color: var(--planning-purple-border);
    color: var(--planning-purple-dark);
}

.declaration-correction-panel {
    display: grid;
    gap: 0.9rem;
}

.declaration-row--correction {
    grid-template-columns: 140px minmax(170px, 1.2fr) 100px 110px 150px 160px 150px 100px;
    min-width: 1080px;
}

.declaration-row-head > span:nth-child(2) {
    text-align: left;
}

.declaration-correction-abatement-cell {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    justify-content: center;
}

.declaration-correction-old-value {
    color: var(--planning-text-weak);
    font-size: 0.72rem;
    text-decoration: line-through;
}

.declaration-correction-badge {
    background: var(--planning-purple-surface);
    border-radius: 999px;
    color: var(--planning-purple-dark);
    font-size: 0.65rem;
    font-weight: 800;
    padding: 0.1rem 0.5rem;
    width: fit-content;
}

.declaration-value-cell--static {
    justify-content: center;
}

.declaration-correction-hint {
    color: var(--planning-text-weak);
    font-size: 0.68rem;
    font-weight: 700;
}

.declaration-correction-actions {
    display: flex;
    justify-content: flex-start;
}

.declaration-correction-collapse-btn {
    background: none;
    border: none;
    color: var(--planning-text-tertiary-2);
    cursor: pointer;
    font-size: 0.78rem;
    font-weight: 700;
    padding: 0.4rem 0;
    text-decoration: underline;
}

.declaration-correction-collapse-btn:hover {
    color: var(--btn-danger-color);
}

.declaration-detail-btn {
    background: none;
    border: none;
    color: var(--planning-purple);
    cursor: pointer;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.2rem 0;
    text-decoration: underline;
    white-space: nowrap;
}

.declaration-detail-btn:hover {
    color: var(--planning-purple-dark);
}

.declaration-detail-note {
    color: var(--planning-text-tertiary-2);
    font-size: 0.72rem;
    margin: 0.15rem 0 0.5rem 0.1rem;
}

.declaration-detail-modal {
    gap: 18px;
}

.declaration-detail-pill-btn {
    align-items: center;
    background: #fff;
    border: 1px solid var(--planning-border-control);
    border-radius: var(--btn-radius);
    color: var(--planning-text-secondary-2);
    cursor: pointer;
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 0.82rem;
    font-weight: 700;
    gap: 0.4rem;
    padding: 0.6rem 1rem;
    white-space: nowrap;
}

.declaration-detail-pill-btn:hover {
    border-color: var(--planning-purple-border);
    color: var(--planning-purple-dark);
}

.declaration-detail-section-label--positive {
    color: var(--planning-green-dark);
}

.declaration-detail-box > .planning-section-label {
    display: block;
    margin: 0 0 0.5rem;
}

.declaration-detail-dotted-row {
    align-items: baseline;
    display: flex;
    font-size: 0.85rem;
    gap: 0.5rem;
    padding: 0.3rem 0;
}

.declaration-detail-dotted-fill {
    border-bottom: 1px dotted var(--planning-border-strong);
    flex: 1 1 auto;
    margin-bottom: 0.3rem;
}

.declaration-detail-dotted-value {
    font-weight: 800;
    white-space: nowrap;
}

.declaration-detail-dotted-value--highlight {
    color: var(--planning-purple-dark);
}

.declaration-detail-box {
    background: var(--planning-surface-soft);
    border: 1px solid var(--planning-border-grid);
    border-radius: 1rem;
    padding: 1rem 1.1rem;
}

.declaration-detail-box-divider {
    border-top: 1px dashed var(--planning-border-strong);
    margin: 0.75rem 0;
}

.declaration-detail-period-title {
    color: #1c1b29;
    font-size: 0.8rem;
    font-weight: 800;
    margin: 0 0 0.45rem;
}

.declaration-detail-summary-strip {
    align-items: center;
    background: var(--planning-surface-soft);
    border-radius: 1rem;
    display: flex;
    gap: 0.75rem;
    justify-content: space-between;
    padding: 0.9rem 1.1rem;
}

.declaration-detail-summary-strip>div {
    display: grid;
    gap: 0.15rem;
}

.declaration-detail-summary-amount {
    align-items: center;
    display: flex;
    gap: 0.25rem;
}

.declaration-detail-summary-label {
    color: var(--planning-text-tertiary-2);
    font-size: 0.72rem;
}

.declaration-detail-summary-value {
    font-size: 1rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.declaration-detail-summary-value--positive {
    color: var(--planning-green-dark);
}

.declaration-detail-summary-value--highlight {
    color: var(--planning-purple-dark);
}

.declaration-detail-summary-operator {
    color: var(--planning-text-weak);
    font-size: 1rem;
    font-weight: 700;
}