/* ============================================================================
   Create-project / create-system modal (.pjx-modal)
   ----------------------------------------------------------------------------
   Used by the home pages of RPA / FTA / FMEA / MSG3 / FRACAS (create project)
   and FTA (create system). The header uses the Robin brand orange (#e84a16,
   fixed across themes on purpose); everything else is built on the theme
   variables so it adapts to every theme. The var() fallbacks cover the light
   themes, which only define a subset of the variables.
   ========================================================================== */

/* ---- Size ----
   640px wide at the normal zoom, as it always was. Zooming out of the page no
   longer shrinks it: it is never narrower than a third of the window (the
   640px of a 1920px screen) and everything in it grows with it, so on the
   screen it looks the same at any zoom. Zooming in, it grows with the page up
   to three quarters of the window. Phones: the full width, as Bootstrap does. */
.pjx-modal .modal-dialog {
    container-type: inline-size;
}

@media (min-width: 576px) {
    .pjx-modal .modal-dialog {
        width: min(75vw, max(640px, 33.3vw));
        max-width: none;
    }
}

/* The unit of every size in the window: 1rem (16px) while it is 640px wide or
   less, proportionally more when it is wider because the page is zoomed out.
   The sizes below are multiples of it (calc(.72 * var(--pjx-rem)) is the old
   .72rem), never rem or px, so text, fields and buttons grow together. */
.pjx-modal .modal-content {
    --pjx-rem: max(1rem, 2.5cqi);
    font-size: var(--pjx-rem);
    border: 0;
    border-radius: calc(.875 * var(--pjx-rem));
    background-color: var(--bg-color, #fff);
    color: var(--text-nodes, #2c3345);
    box-shadow: 0 22px 60px rgba(0, 0, 0, .28), 0 6px 18px rgba(0, 0, 0, .12);
}

/* ---- Header: Robin orange bar, white text ---- */
.pjx-modal .modal-header {
    align-items: center;
    padding: var(--pjx-rem) calc(1.5 * var(--pjx-rem));
    border: 0;
    border-radius: calc(.875 * var(--pjx-rem)) calc(.875 * var(--pjx-rem)) 0 0;
    background-color: var(--noactive-bg-color, #233878);
    color: #fff;
}

.pjx-modal .modal-title {
    display: flex;
    align-items: center;
    gap: calc(.6 * var(--pjx-rem));
    font-size: calc(1.05 * var(--pjx-rem));
    font-weight: 600;
    letter-spacing: .015em;
    color: #fff;
}

.pjx-modal .modal-title .fas,
.pjx-modal .modal-title .far {
    opacity: .9;
}

/* Close: a white disc on the dark header, so it reads even if the Font Awesome
   kit (loaded from a remote script) never arrives and the glyph inside renders
   as nothing. The colour is forced past Bootstrap's `.close { color: #000 }`
   and any inline colour the markup may carry. */
.pjx-modal .modal-header .close {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: calc(2 * var(--pjx-rem));
    height: calc(2 * var(--pjx-rem));
    margin: calc(-.25 * var(--pjx-rem)) calc(-.5 * var(--pjx-rem)) calc(-.25 * var(--pjx-rem)) auto;
    padding: 0;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, .18);
    color: #fff !important;
    opacity: 1;
    text-shadow: none;
    line-height: 1;
    transition: background-color .12s ease-in-out;
}

.pjx-modal .modal-header .close > * {
    color: #fff !important;
}

.pjx-modal .modal-header .close:hover,
.pjx-modal .modal-header .close:focus {
    background-color: rgba(255, 255, 255, .34);
    color: #fff !important;
    opacity: 1;
    outline: 0;
}

.pjx-modal .modal-header .fa-times {
    font-size: var(--pjx-rem); /* calmer than the global 24px */
}

/* ---- Body ---- */
.pjx-modal .modal-body {
    padding: calc(1.5 * var(--pjx-rem)) calc(1.75 * var(--pjx-rem)) calc(1.75 * var(--pjx-rem));
}

/* ---- Fields ---- */
.pjx-modal form .form-group {
    margin-bottom: calc(1.05 * var(--pjx-rem));
}

.pjx-modal form label {
    display: inline-block;
    margin-bottom: calc(.3 * var(--pjx-rem));
    font-size: calc(.72 * var(--pjx-rem));
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--text-nodes, #3a4256);
    opacity: .72;
}

.pjx-modal form .asteriskField {
    margin-left: calc(.125 * var(--pjx-rem));
    color: #e84a16;
}

/* The resting border has to be visible on its own: the field background is the
 * same colour as the modal body, so the border is the only thing outlining it.
 * It uses --border-color ("Border and disabled fields"), not --forms-color,
 * which is the *background* of the fields (#fff on the light themes, #af988e on
 * the dark ones) and therefore drew a border the same colour as the field. The
 * dark themes never define --border-color, so there the fallback applies: a
 * translucent white, which is the light-on-dark border they already show
 * elsewhere (their .form-control falls back to the white currentColor). */
.pjx-modal form .form-control,
.pjx-modal form select.form-control {
    padding: calc(.6 * var(--pjx-rem)) calc(.85 * var(--pjx-rem));
    height: auto;
    border: calc(.09375 * var(--pjx-rem)) solid var(--border-color, rgba(255, 255, 255, .35));
    border-radius: calc(.5625 * var(--pjx-rem));
    background-color: var(--bg-color, #fff);
    color: var(--text-nodes, #2c3345);
    font-size: calc(.92 * var(--pjx-rem));
    box-shadow: none;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.pjx-modal form .form-control::placeholder {
    color: var(--text-nodes, #2c3345);
    opacity: .38;
}

/* The 15px of every input placeholder (table.css), in the unit of the window */
.pjx-modal form input.form-control::placeholder {
    font-size: calc(.9375 * var(--pjx-rem));
}

.pjx-modal form .form-control:focus {
    border-color: #e84a16;
    box-shadow: 0 0 0 calc(.1875 * var(--pjx-rem)) rgba(232, 74, 22, .15);
    outline: 0;
}

.pjx-modal form textarea.form-control {
    min-height: calc(7.5 * var(--pjx-rem));
    resize: vertical;
}

/* ---- File input: quiet drop-area look ---- */
.pjx-modal form input[type="file"] {
    display: block;
    width: 100%;
    padding: calc(.6 * var(--pjx-rem)) calc(.7 * var(--pjx-rem));
    border: calc(.09375 * var(--pjx-rem)) dashed var(--border-color, rgba(255, 255, 255, .35));
    border-radius: calc(.5625 * var(--pjx-rem));
    background-color: var(--bg-secondary-color, #f4f6f9);
    color: var(--text-nodes, #2c3345);
    font-size: calc(.84 * var(--pjx-rem));
    cursor: pointer;
    transition: border-color .15s ease-in-out;
}

.pjx-modal form input[type="file"]:hover {
    border-color: #e84a16;
}

.pjx-modal form input[type="file"]::file-selector-button {
    margin-right: calc(.8 * var(--pjx-rem));
    padding: calc(.38 * var(--pjx-rem)) calc(.8 * var(--pjx-rem));
    border: 0;
    border-radius: calc(.375 * var(--pjx-rem));
    background-color: var(--noactive-bg-color, #233878);
    color: #fff;
    font-family: inherit;
    font-size: calc(.8 * var(--pjx-rem));
    font-weight: 600;
    cursor: pointer;
}

/* ---- Image field (Bootstrap's .custom-file, as crispy draws it): its own
   rem sizes, in the unit of the window ---- */
.pjx-modal form .custom-file-input {
    height: calc(1.5em + .75 * var(--pjx-rem) + 2px);
}

.pjx-modal form .custom-file-label {
    height: calc(1.5em + .75 * var(--pjx-rem) + 2px);
    padding: calc(.375 * var(--pjx-rem)) calc(.75 * var(--pjx-rem));
    border-radius: calc(.25 * var(--pjx-rem));
}

.pjx-modal form .custom-file-label::after {
    height: calc(1.5em + .75 * var(--pjx-rem));
    padding: calc(.375 * var(--pjx-rem)) calc(.75 * var(--pjx-rem));
    border-radius: 0 calc(.25 * var(--pjx-rem)) calc(.25 * var(--pjx-rem)) 0;
}

.pjx-modal form .mb-2 {
    margin-bottom: calc(.5 * var(--pjx-rem)) !important;
}

/* Checkboxes (Bootstrap's .custom-checkbox, FMEA "Is quantitative?"): the box
   is drawn by the label's ::before/::after */
.pjx-modal form .custom-control {
    min-height: calc(1.5 * var(--pjx-rem));
    padding-left: calc(1.5 * var(--pjx-rem));
}

.pjx-modal form .custom-control-input {
    width: var(--pjx-rem);
    height: calc(1.25 * var(--pjx-rem));
}

.pjx-modal form .custom-control-label::before,
.pjx-modal form .custom-control-label::after {
    top: calc(.25 * var(--pjx-rem));
    left: calc(-1.5 * var(--pjx-rem));
    width: var(--pjx-rem);
    height: var(--pjx-rem);
}

.pjx-modal form .custom-checkbox .custom-control-label::before {
    border-radius: calc(.25 * var(--pjx-rem));
}

/* Two fields on a line (MSG-3: ATA chapter and type of analysis) */
.pjx-modal form .form-row {
    margin-right: calc(-.3125 * var(--pjx-rem));
    margin-left: calc(-.3125 * var(--pjx-rem));
}

.pjx-modal form .form-row > [class*="col"] {
    padding-right: calc(.3125 * var(--pjx-rem));
    padding-left: calc(.3125 * var(--pjx-rem));
}

/* ---- Submit: full-width solid brand button ---- */
.pjx-modal form .btn,
.pjx-modal form input[type="submit"] {
    display: block;
    width: 100%;
    margin-top: calc(.5 * var(--pjx-rem));
    padding: calc(.65 * var(--pjx-rem)) var(--pjx-rem);
    border: 0;
    border-radius: calc(.5625 * var(--pjx-rem));
    font-size: var(--pjx-rem);
    background: var(--noactive-bg-color, #233878);
    color: #fff;
    font-weight: 600;
    letter-spacing: .02em;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .14);
    transition: filter .12s ease-in-out, transform .12s ease-in-out, box-shadow .12s ease-in-out;
}

.pjx-modal form .btn:hover,
.pjx-modal form input[type="submit"]:hover {
    background: var(--noactive-bg-color, #233878);
    color: #fff;
    filter: brightness(1.12);
    transform: translateY(-1px);
    box-shadow: 0 5px 16px rgba(0, 0, 0, .18);
}

.pjx-modal form .btn:not(:disabled):active,
.pjx-modal form input[type="submit"]:not(:disabled):active {
    background: var(--noactive-bg-color, #233878);
    color: #fff;
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .14);
}

.pjx-modal form .btn:focus,
.pjx-modal form input[type="submit"]:focus {
    background: var(--noactive-bg-color, #233878);
    color: #fff;
    box-shadow: 0 0 0 calc(.1875 * var(--pjx-rem)) rgba(232, 74, 22, .25);
}

/* ---- Footer actions (FMEA's system modals keep Save/Close down here) ----
   Only the alignment is corrected here; each button keeps its own look. */
.pjx-modal .modal-footer {
    align-items: center;
    padding: calc(.75 * var(--pjx-rem));
}

.pjx-modal .modal-footer .btn {
    /* .btn-primary ships a 10px bottom margin (control_panel.css); the flex
       footer centres every item on its own box, so that margin lifted Save off
       the Close button's baseline. */
    width: auto;
    margin: 0 0 0 calc(.5 * var(--pjx-rem));
    padding: calc(.375 * var(--pjx-rem)) calc(.75 * var(--pjx-rem));
    border-radius: calc(.25 * var(--pjx-rem));
    font-size: var(--pjx-rem);
}

/* ---- Taller than the window (a phone, a short laptop screen, the MSG-3
   system form): the header and the Save/Close footer stay in sight and only
   the fields scroll between them, instead of the whole window running off the
   screen with Save below it. Bootstrap's .modal-dialog-scrollable, for every
   create/edit window at once. dvh: the visible height on mobile browsers,
   whose toolbars come and go (vh where it is not supported). ---- */
.pjx-modal .modal-dialog {
    max-height: calc(100% - 1rem);
}

.pjx-modal .modal-content {
    max-height: calc(100vh - 1rem);
    max-height: calc(100dvh - 1rem);
    overflow: hidden;
}

.pjx-modal .modal-header,
.pjx-modal .modal-footer {
    flex-shrink: 0;
}

.pjx-modal .modal-body {
    overflow-y: auto;
}

@media (min-width: 576px) {
    .pjx-modal .modal-dialog {
        max-height: calc(100% - 3.5rem);
    }

    .pjx-modal .modal-content {
        max-height: calc(100vh - 3.5rem);
        max-height: calc(100dvh - 3.5rem);
    }
}

/* Phones: less padding around the fields */
@media (max-width: 575.98px) {
    .pjx-modal .modal-header {
        padding: calc(.85 * var(--pjx-rem)) var(--pjx-rem);
    }

    .pjx-modal .modal-body {
        padding: calc(1.1 * var(--pjx-rem)) var(--pjx-rem) calc(1.25 * var(--pjx-rem));
    }
}

/* ---- Save stays disabled until the form is complete (pjx_form_validation.js).
   Last in the file so it wins over the :hover rules above. ---- */
.pjx-modal form .btn:disabled,
.pjx-modal form input[type="submit"]:disabled,
.pjx-modal .modal-footer .btn:disabled {
    opacity: .45;
    cursor: not-allowed;
    filter: none;
    transform: none;
    box-shadow: none;
}