/* ---------------------------------------------------------------------------
   The confirm dialog used where window.confirm() used to be - currently the
   "this phase change will overwrite therapy you have entered" question on the
   exam form. Built and driven by public/js/main.js.

   Deliberately the same visual language as the lab report dialog
   (.labModal, components/testList.twig): same overlay tint, same white box,
   same head / body / foot. Two dialogs in one application that look like two
   different applications is worse than either one alone.

   Its own file rather than an inline <style>, and rather than public/sass:
   style.css is generated from the sass by gulp and hand-editing it would be
   lost on the next build.
   --------------------------------------------------------------------------- */

.pkConfirm {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.45);
    /* above .labModal (9000) and its pickmeup calendar (9100): this dialog is
       only ever raised to ask about something the doctor just did. */
    z-index: 9200;
}

.pkConfirm.isOpen { display: block; }

.pkConfirmBox {
    position: relative;
    width: 34rem;
    max-width: 94%;
    max-height: 82%;
    margin: 6rem auto;
    background: #fff;
    border-radius: 3px;
    box-shadow: 0 2px 18px rgba(0, 0, 0, 0.4);
    display: flex;
    flex-direction: column;
}

.pkConfirmHead {
    padding: .9rem 1.2rem;
    border-bottom: 1px solid #ddd;
    font-size: 1.15rem;
    font-weight: 600;
}

.pkConfirmHead .pkConfirmClose {
    float: right;
    border: 0;
    background: none;
    cursor: pointer;
    font-size: 1.6rem;
    line-height: 1;
    padding: 0 .2rem;
    color: #888;
}

.pkConfirmBody {
    padding: 1rem 1.2rem;
    overflow-y: auto;
}

.pkConfirmLead { margin: 0 0 .8rem; }

.pkConfirmList {
    margin: 0 0 .9rem;
    padding: 0;
    list-style: none;
}

/* One row per field, so eight overwritten doses read as eight things and not
   as a paragraph. */
.pkConfirmList li {
    padding: .45rem .6rem;
    border-bottom: 1px solid #eee;
}

.pkConfirmList li:last-child { border-bottom: 0; }

.pkConfirmQuestion { margin: 0; font-weight: 600; }

.pkConfirmFoot {
    padding: .8rem 1.2rem;
    border-top: 1px solid #ddd;
    text-align: right;
}

.pkConfirmFoot button {
    margin-left: .5rem;
    padding: .4rem 1.2rem;
    cursor: pointer;
}

/* The destructive one is the one that overwrites, so it is the one that is
   coloured - not the one that leaves the record alone. */
.pkConfirmFoot .pkConfirmOk {
    background: #b03a2e;
    border: 1px solid #932f25;
    color: #fff;
    font-weight: 600;
}

@media print {
    .pkConfirm { display: none !important; }
}