/* ────────────────────────────────────────────────────────────────
   THE LEGACY MODALS.

   Fourteen of the twenty-six files in apps/filetax/modals/ open with
   <div class="modal m">, and core.js shows one by toggling the class "on"
   (the [data-on] handler, and edit_data()). Nothing has defined .modal.on
   since the old stylesheet left the application, while BOOTSTRAP defines
   .modal as position:fixed; display:none - so every one of them was
   permanently invisible.

   WHY THIS CANNOT BREAK A WORKING MODAL. The selector requires .on, which
   Bootstrap never sets - its own modals use .show and an inline display -
   and excludes .fade, which every Bootstrap modal in this application
   carries. It matches only elements that are hidden and unreachable today.

   WHAT IT DOES NOT DO: redefine the grid. These modals lay out with
   col-12 / col-lg-3, which is Bootstrap's own and already loaded. An earlier
   version of this file overrode .row and .col-* and fought it; Bootstrap
   does the columns, this does the chrome.
──────────────────────────────────────────────────────────────── */

.modal.on:not(.fade) {
    display: block;
    background: rgba(17, 17, 26, .55);
    padding: 32px 16px 48px;
}

/* No inner wrapper exists - the direct children are .close, an <h2> and
   .body - so the card is drawn by giving those the same width, centring
   them and butting them together. */
.modal.on:not(.fade) > .close,
.modal.on:not(.fade) > h2,
.modal.on:not(.fade) > .body,
.modal.on:not(.fade) > .foot {
    max-width: 940px;
    margin-left: auto;
    margin-right: auto;
    background: #fff;
    padding-left: 24px;
    padding-right: 24px;
}

.modal.on:not(.fade) > h2 {
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.4;
    color: #15131f;
    border-radius: 12px 12px 0 0;
    padding-top: 20px;
    padding-bottom: 14px;
    margin: 0 auto;
    border-bottom: 1px solid #ececf2;
}

.modal.on:not(.fade) > .body {
    border-radius: 0 0 12px 12px;
    padding-top: 18px;
    padding-bottom: 24px;
}

/* The close control is an empty <div class="close">, so its × is drawn. */
.modal.on:not(.fade) > .close {
    height: 0;
    padding: 0;
    background: transparent;
    text-align: right;
    position: relative;
    z-index: 3;
}

.modal.on:not(.fade) > .close::after {
    content: "\00d7";
    display: inline-block;
    position: relative;
    top: 42px;
    right: 18px;
    width: 30px;
    height: 30px;
    line-height: 28px;
    text-align: center;
    border-radius: 50%;
    font-size: 22px;
    color: #6b6b7b;
    cursor: pointer;
}

.modal.on:not(.fade) > .close:hover::after { background: #f1f1f6; color: #15131f; }

/* ── the step tabs ──────────────────────────────────────────── */

.modal.on:not(.fade) .step_heads { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }

.modal.on:not(.fade) .step_heads .step {
    cursor: pointer;
    padding: 7px 16px;
    border-radius: 8px;
    background: #f1f1f6;
    font-size: .875rem;
    font-weight: 500;
    color: #4a4a5a;
}

.modal.on:not(.fade) .step_heads .step.on { background: #3b5de7; color: #fff; }

/* HOW THESE STEPS ACTUALLY SWITCH, which is not by a class.

   core.js's tab handler does

       $($(this).data('t')).parent().children().hide();
       $($(this).data('t')).show();

   - jQuery .hide()/.show(), which write an INLINE display. It never adds a
   class to the panel. So the only rule needed here is the initial state:
   the second and third steps ship with class="dn" and must start hidden,
   and jQuery's inline display then overrides that when a tab is clicked.

   NO !important. An earlier version wrote `.dn { display: none !important }`
   and !important beats an inline style - so clicking Contact or Address
   marked the tab active and the panel stayed hidden, which is exactly the
   fault this comment exists to prevent repeating. `.dn` is also on a hidden
   file input in this modal, which has no inline style and so stays hidden
   either way. */
.modal.on:not(.fade) .dn { display: none; }

/* ── fields ─────────────────────────────────────────────────── */

.modal.on:not(.fade) label {
    display: block;
    font-size: .8125rem;
    font-weight: 500;
    color: #6b6b7b;
    margin: 0 0 6px;
}

.modal.on:not(.fade) input[type="text"],
.modal.on:not(.fade) input[type="email"],
.modal.on:not(.fade) input[type="tel"],
.modal.on:not(.fade) input[type="number"],
.modal.on:not(.fade) input[type="date"],
.modal.on:not(.fade) textarea,
.modal.on:not(.fade) select {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid #e2e2ea;
    border-radius: 8px;
    background: #fff;
    font-size: .9375rem;
    color: #15131f;
}

.modal.on:not(.fade) input:focus,
.modal.on:not(.fade) textarea:focus,
.modal.on:not(.fade) select:focus { outline: 0; border-color: #3b5de7; }

.modal.on:not(.fade) textarea { min-height: 84px; }
.modal.on:not(.fade) [class*="col-"] { margin-bottom: 14px; }

/* ── the checkbox pills ─────────────────────────────────────────
   Contact Type and Status are
     <input type="checkbox" id="x"><label for="x"><h4>Customer</h4></label>
   and that <h4> is why they rendered as enormous block headings. */

.modal.on:not(.fade) label > h1,
.modal.on:not(.fade) label > h2,
.modal.on:not(.fade) label > h3,
.modal.on:not(.fade) label > h4,
.modal.on:not(.fade) label > h5 {
    display: inline;
    font-size: .875rem;
    font-weight: 500;
    line-height: 1;
    margin: 0;
    color: inherit;
}

.modal.on:not(.fade) input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.modal.on:not(.fade) input[type="checkbox"] + label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 0 8px 0 0;
    padding: 7px 14px;
    border: 1px solid #e2e2ea;
    border-radius: 999px;
    background: #fff;
    color: #4a4a5a;
    cursor: pointer;
    user-select: none;
}

.modal.on:not(.fade) input[type="checkbox"] + label::before {
    content: "";
    width: 15px;
    height: 15px;
    flex: 0 0 15px;
    border: 1px solid #c9c9d4;
    border-radius: 4px;
    background: #fff;
}

.modal.on:not(.fade) input[type="checkbox"]:checked + label {
    border-color: #3b5de7;
    background: #eef1fe;
    color: #2746c8;
}

.modal.on:not(.fade) input[type="checkbox"]:checked + label::before {
    border-color: #3b5de7;
    background: #3b5de7 url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.5'%3E%3Cpath d='M3 8.5l3.2 3.2L13 5'/%3E%3C/svg%3E") center/11px no-repeat;
}

/* ── buttons ────────────────────────────────────────────────── */

.modal.on:not(.fade) button {
    padding: 9px 18px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: #f1f1f6;
    color: #15131f;
    font-size: .9375rem;
    font-weight: 500;
    cursor: pointer;
    min-width: 92px;        /* a label-less button is still a target */
}

.modal.on:not(.fade) button.blue { background: #3b5de7; color: #fff; }
.modal.on:not(.fade) button.blue:hover { background: #2746c8; }
.modal.on:not(.fade) button.red  { background: #e2445c; color: #fff; }
.modal.on:not(.fade) button.prev { background: #f1f1f6; color: #15131f; }
.modal.on:not(.fade) button[data-exts] { width: 100%; }

.modal.on:not(.fade) .tar { text-align: right; }
.modal.on:not(.fade) .tac { text-align: center; }
.modal.on:not(.fade) .tal { text-align: left; }
.modal.on:not(.fade) .tar > button { margin-left: 8px; }

@media (max-width: 575px) {
    .modal.on:not(.fade) { padding: 12px 8px 32px; }
    .modal.on:not(.fade) > .close,
    .modal.on:not(.fade) > h2,
    .modal.on:not(.fade) > .body { padding-left: 16px; padding-right: 16px; }
}