/* Planning uses the dashboard New Project markup and utility classes.
   Only overlay context and mobile/theme adaptations belong here. */
#modal-container .planning-project-create-overlay-project {
    background:rgb(0 0 0 / .4) !important;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
}
#modal-container .planning-project-create-overlay-project .new-project-modal-fit {
    font-family:ui-sans-serif,system-ui,sans-serif;
    font-weight:400;
    line-height:1.5;
    color:#fff;
    letter-spacing:normal;
    max-height:calc(100dvh - 36px);
    overflow-y:auto;
    flex-shrink:0;
}
html[data-theme="light"] #modal-container .planning-project-create-overlay-project .new-project-modal-fit {
    background:var(--of-light-surface) !important;
    color:var(--of-light-text-strong) !important;
}
html[data-theme="light"] #modal-container .planning-project-create-overlay-project :is(#planning-new-project-name, #planning-new-project-type) {
    background:var(--of-light-surface) !important;
    color:var(--of-light-text-strong) !important;
    border-color:#94a3b8 !important;
}
@media (max-width:767px) {
    #modal-container .planning-project-create-overlay-project .new-project-modal-fit {
        width:100% !important;
        height:100dvh !important;
        min-height:100dvh !important;
        max-width:none !important;
        max-height:100dvh !important;
        margin:0 !important;
        padding:calc(18px + env(safe-area-inset-top)) 16px calc(18px + env(safe-area-inset-bottom)) !important;
        border:0 !important;
        border-radius:0 !important;
        background:#242424 !important;
        backdrop-filter:none !important;
        overflow-x:hidden !important;
        overflow-y:auto !important;
        overscroll-behavior:contain;
    }
    #modal-container .planning-project-create-overlay-project .new-project-modal-fit > button[onclick="closePlanningProjectCreatePanel()"] {
        top:calc(14px + env(safe-area-inset-top)) !important;
        right:14px !important;
    }
    #modal-container .planning-project-create-overlay-project .new-project-create-submit {
        margin-top:auto !important;
        flex:0 0 auto;
        min-height:50px;
    }
    html[data-theme="light"] #modal-container .planning-project-create-overlay-project .new-project-modal-fit {
        background:var(--of-light-surface-soft) !important;
    }
}