/* ==========================================================================
   Quercia viva — the job sheet, «Il Cantiere».

   One job, read rather than edited: a hero band that says where the work is,
   the status on its path with the moves resting on the nodes it may reach,
   three columns — planned, on site, worth — and the job's own dates under them.

   Global rather than page-scoped, like help.css: the sheet opens from the
   calendar, the day, the board and the job lists, so it belongs to the layout.

   `--st` is the status's own token, set on the fragment by the template. Every
   accent in here comes off it, so a company that renames its statuses and
   recolours them repaints this with them and nothing here knows.
   ========================================================================== */

/* ------------------------------------------------------------------ *
 * The container: a wide dialog on a desk, the whole screen on a phone
 * ------------------------------------------------------------------ */
.qc-sheet .modal-content {
    overflow: hidden;
    border-radius: var(--qc-radius-panel);
}

.qc-sheet--wide .qc-sheet__dialog {
    max-width: min(1100px, calc(100vw - 3rem));
}

.qc-sheet__slot {
    min-height: 12rem;
}

.qc-sheet__close {
    position: absolute;
    top: .75rem;
    right: .75rem;
    z-index: 3;
    width: 2rem;
    height: 2rem;
    display: grid;
    place-items: center;
    padding: 0;
    border-radius: 9px;
    border: 1px solid var(--qc-border);
    color: var(--qc-text-secondary);
    background: color-mix(in srgb, var(--qc-card-bg) 86%, transparent);
    box-shadow: var(--qc-shadow-sm);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    cursor: pointer;
    transition: color var(--qc-dur-fast) var(--qc-ease-fast),
                border-color var(--qc-dur-fast) var(--qc-ease-fast);
}

.qc-sheet__close:hover {
    color: var(--qc-primary);
    border-color: color-mix(in srgb, var(--qc-primary) 40%, var(--qc-border));
}

/* ------------------------------------------------------------------ *
 * The hero: the place, and when the work is
 * ------------------------------------------------------------------ */
.qc-sheet__hero {
    position: relative;
    min-height: 11rem;
    background: var(--qc-surface-light);
    border-bottom: 1px solid var(--qc-divider);
}

.qc-sheet__map {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: repeat(2, 256px);
    grid-template-rows: repeat(2, 256px);
    /* Anchored to the right and allowed to run off it: the veil covers the left
       of the band anyway, and a mosaic centred in the band leaves its own seam
       showing in the middle of the picture. */
    justify-content: end;
    align-content: center;
    overflow: hidden;
}

.qc-sheet__map img {
    display: block;
    width: 256px;
    height: 256px;
    /* The ground is a backdrop, not a document: it must never pull the eye off
       the words sitting on it — but it has to be a place, and a wash nobody can
       read a street off is decoration pretending to be information.

       That balance moved when the basemap gained its colour: the ground used to
       be desaturated to .75 because it was grey either way and the only thing
       to protect was the reading. Now the green *is* the information — this is
       a company that cuts it — so the picture is left close to itself and the
       veil over the words does the protecting, which was always its job.

       There is one edition of this sheet and it is a daylight one, so the dark
       theme settles it in rather than fetching a different world — see the rule
       below and the note on WorkSheetPresenter::tileUrl(). */
    opacity: .95;
    filter: none;
}

[data-bs-theme="dark"] .qc-sheet__map img {
    opacity: .78;
    filter: brightness(.72) saturate(.85);
}

/* Once it is a real map somebody is reading rather than scenery behind a title,
   it gets its full weight back — and only the dark theme's settling. */
.qc-sheet__map.is-live img,
.qc-sheet__map.is-live { opacity: 1; filter: none; }
[data-bs-theme="dark"] .qc-sheet__map.is-live .leaflet-tile-pane {
    filter: brightness(.82) saturate(.9) contrast(1.02);
}

/* The veil that makes the title legible whatever the tiles happen to show, and
   the only place the status tints the hero. */
.qc-sheet__hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg,
            color-mix(in srgb, var(--qc-card-bg) 96%, transparent) 0 38%,
            color-mix(in srgb, var(--qc-card-bg) 55%, transparent) 62%,
            color-mix(in srgb, var(--qc-card-bg) 12%, transparent) 100%),
        linear-gradient(0deg, color-mix(in srgb, var(--st) 10%, transparent), transparent 60%);
}

.qc-sheet__pin {
    position: absolute;
    z-index: 1;
    width: 20px;
    height: 20px;
    margin: -20px 0 0 -10px;
    border-radius: 50% 50% 50% 0;
    background: var(--st);
    border: 2px solid var(--qc-card-bg);
    transform: rotate(-45deg);
    box-shadow: 0 2px 6px rgba(0, 0, 0, .45);
}

/* "Open map": the ask, sitting in the corner of the picture. It is the one
   thing in the band that is pressable, so it looks it — the tiles behind it are
   `aria-hidden` scenery until it is used. */
.qc-sheet__mapbtn {
    position: absolute;
    z-index: 3;
    right: .6rem;
    bottom: .6rem;
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .3rem .65rem;
    border: 1px solid var(--qc-border);
    border-radius: var(--qc-radius-btn);
    background: color-mix(in srgb, var(--qc-card-bg) 88%, transparent);
    backdrop-filter: blur(6px);
    font: 600 .78rem var(--qc-font-body);
    color: var(--qc-text-secondary);
    cursor: pointer;
    transition: color var(--qc-dur-fast) var(--qc-ease-fast), border-color var(--qc-dur-fast) var(--qc-ease-fast);
}
.qc-sheet__mapbtn:hover { color: var(--qc-primary); border-color: color-mix(in srgb, var(--qc-primary) 40%, var(--qc-border)); }
.qc-sheet__mapbtn:focus-visible { outline: 2px solid var(--qc-primary); outline-offset: 2px; }
.qc-sheet__mapbtn i { width: 15px; height: 15px; font-size: 15px; }

/* Once the map is real it stops being scenery, and the band rearranges around
   it: the title takes a solid strip of its own and the map takes the rest, at a
   height somebody can actually pan in. Leaving it behind the title would put a
   veil and a headline on top of the thing they had just asked to look at. */
.qc-sheet__hero.is-mapped {
    display: grid;
    grid-template-rows: auto 1fr;
    min-height: 24rem;
}
.qc-sheet__hero.is-mapped::after { content: none; }
.qc-sheet__hero.is-mapped .qc-sheet__title { order: -1; }
.qc-sheet__hero.is-mapped .qc-sheet__map {
    position: relative;
    inset: auto;
    display: block;
    min-height: 14rem;
    border-top: 1px solid var(--qc-divider);
}
.qc-sheet__map.is-live .leaflet-container {
    width: 100%;
    height: 100%;
    background: var(--qc-surface);
    font-family: var(--qc-font-body);
}
.qc-sheet__map.is-live .leaflet-control-zoom a {
    background: var(--qc-card-bg);
    color: var(--qc-text-primary);
    border-color: var(--qc-border);
}
.qc-sheet__map.is-live .leaflet-control-zoom a:hover { background: var(--qc-surface-light); color: var(--qc-primary); }
.qc-sheet__map.is-live .leaflet-control-attribution {
    background: color-mix(in srgb, var(--qc-card-bg) 82%, transparent);
    color: var(--qc-text-tertiary);
    font-size: .75rem;
}
.qc-sheet__map.is-live .leaflet-control-attribution a { color: var(--qc-primary); }
.qc-sheet__leafpin span {
    display: block;
    width: 20px;
    height: 20px;
    border-radius: 50% 50% 50% 0;
    background: var(--st, var(--qc-primary));
    border: 2px solid var(--qc-card-bg);
    transform: rotate(-45deg);
    box-shadow: 0 2px 6px rgba(0, 0, 0, .45);
}

.qc-sheet__title {
    position: relative;
    z-index: 2;
    max-width: 42rem;
    padding: 1.25rem 3rem 1.25rem 1.5rem;
}

.qc-sheet__eyebrow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .25rem .5rem;
    margin: 0;
    font: 600 .7rem/1 var(--qc-font-body);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--qc-text-tertiary);
}

.qc-sheet__id {
    font-family: var(--qc-font-body);
    letter-spacing: .04em;
    text-transform: none;
}

.qc-sheet__draft {
    padding: .1rem .4rem;
    border-radius: var(--qc-radius-pill);
    text-transform: none;
    letter-spacing: 0;
    color: var(--qc-warning-text);
    background: color-mix(in srgb, var(--qc-warning) 20%, transparent);
}

.qc-sheet__h {
    margin: .35rem 0 0;
    font-family: var(--qc-font-display);
    font-weight: 800;
    font-size: 1.65rem;
    line-height: 1.1;
    letter-spacing: -.02em;
    color: var(--qc-text-primary);
    text-wrap: balance;
}

.qc-sheet__h:focus-visible {
    outline: 2px solid var(--qc-primary);
    outline-offset: 4px;
    border-radius: var(--qc-radius-sm);
}

.qc-sheet__where,
.qc-sheet__when {
    display: flex;
    align-items: flex-start;
    gap: .45rem;
    margin: .5rem 0 0;
    font-size: .9rem;
    line-height: 1.35;
    color: var(--qc-text-secondary);
}

.qc-sheet__where .ti,
.qc-sheet__when .ti {
    flex: none;
    margin-top: .1rem;
    color: var(--qc-text-tertiary);
}

.qc-sheet__when b {
    color: var(--qc-text-primary);
    font-weight: 600;
}

.qc-sheet__sitelabel {
    padding: .05rem .4rem;
    border-radius: var(--qc-radius-pill);
    font-size: .8rem;
    color: var(--qc-text-secondary);
    background: color-mix(in srgb, var(--qc-text-tertiary) 14%, transparent);
}

/* ------------------------------------------------------------------ *
 * The status on its path, and the moves it may take
 * ------------------------------------------------------------------ */
.qc-sheet__pathrow {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem .75rem;
    padding: .75rem 1.5rem;
    border-bottom: 1px solid var(--qc-divider);
    background: color-mix(in srgb, var(--qc-surface-light) 45%, transparent);
}

.qc-sheet__pathlabel {
    font: 700 .68rem/1 var(--qc-font-body);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--qc-text-tertiary);
}

.qc-path {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .1rem .75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.qc-path__n {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .78rem;
    color: var(--qc-text-tertiary);
    white-space: nowrap;
}

.qc-path__n i {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    box-sizing: border-box;
    border: 2px solid var(--pst);
}

.qc-path__n.is-done { color: var(--qc-text-secondary); }
.qc-path__n.is-done i { background: var(--pst); }

.qc-path__n.is-now {
    font-weight: 700;
    color: var(--qc-text-primary);
}

.qc-path__n.is-now i {
    background: var(--pst);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--pst) 26%, transparent);
}

.qc-sheet__moves {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin-left: auto;
}

.qc-sheet__move { margin: 0; }

.qc-sheet__movebtn {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    height: 2rem;
    padding: 0 .7rem;
    border-radius: var(--qc-radius-pill);
    font: 600 .8rem var(--qc-font-body);
    color: var(--qc-text-primary);
    background: color-mix(in srgb, var(--pst) 16%, transparent);
    border: 1px solid color-mix(in srgb, var(--pst) 40%, transparent);
    cursor: pointer;
    transition: background var(--qc-dur-fast) var(--qc-ease-fast);
}

.qc-sheet__movebtn:hover { background: color-mix(in srgb, var(--pst) 26%, transparent); }
.qc-sheet__movebtn:disabled { opacity: 1; filter: saturate(.4); cursor: default; }
.qc-sheet__movebtn .icon { width: 15px; height: 15px; }
/* The approval: the one filled control on the row, and the only one that is not
   a move — it closes the materials sheet, puts the job on the customer's sheet
   and redoes their year. It was told apart from "Sposta in …" by its font
   weight, in whatever tint the company had given the accounted status, at the
   place in the row the graph happened to put it.

   Filled in the brand's own green rather than in that status's colour: a status
   token is a hue a settings page chose, and the text laid over it at full
   strength has no contrast anybody has checked. The colour of the status it
   moves to is still on the row — it is the icon, and the border. */
.qc-sheet__movebtn.is-approve {
    font-weight: 700;
    margin-inline-start: .25rem;
    color: var(--qc-on-primary);
    background: var(--qc-primary);
    border-color: var(--qc-primary);
}
.qc-sheet__movebtn.is-approve:hover {
    background: color-mix(in srgb, var(--qc-primary) 86%, var(--qc-text-primary));
}
.qc-sheet__movebtn.is-approve .icon { color: var(--qc-on-primary); }

/* Why the approval is dead. A whole line of its own — the path row is a flex
   line and this is a sentence, not a chip — and it is the button's `title` said
   out loud, because a tooltip is unreachable by touch and by the keyboard.
   Warning and not danger: nothing has gone wrong, something is missing. */
.qc-sheet__movewhy {
    flex: 1 0 100%;
    display: flex;
    align-items: flex-start;
    gap: .35rem;
    margin: 0;
    font-size: .8rem;
    line-height: 1.35;
    color: var(--qc-text-secondary);
}

.qc-sheet__movewhy .ti {
    flex: none;
    margin-top: .1rem;
    color: var(--qc-warning-text);
}

.qc-sheet__locked {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    margin: 0 0 0 auto;
    font-size: .82rem;
    color: var(--qc-text-tertiary);
}

/* ------------------------------------------------------------------ *
 * Three columns: planned, on site, worth
 * ------------------------------------------------------------------ */
.qc-sheet__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
    gap: 1.25rem 1.75rem;
    padding: 1.25rem 1.5rem;
}

.qc-sheet__col {
    display: grid;
    gap: 1.1rem;
    align-content: start;
    min-width: 0;
}

.qc-sheet__colhead {
    display: flex;
    align-items: baseline;
    gap: .5rem;
    margin: 0;
    font-family: var(--qc-font-display);
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: -.01em;
    color: var(--qc-text-primary);
}

.qc-sheet__colhead span {
    font: 400 .8rem var(--qc-font-body);
    letter-spacing: 0;
    color: var(--qc-text-tertiary);
}

.qc-sheet__blk { min-width: 0; }

.qc-sheet__blkhead {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin: 0 0 .5rem;
    font: 700 .68rem/1 var(--qc-font-body);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--qc-text-tertiary);
}

.qc-sheet__blkhead .ti { color: var(--qc-primary); font-size: .9rem; }

.qc-sheet__count {
    margin-left: auto;
    font: 500 .7rem var(--qc-font-body);
    letter-spacing: 0;
    text-transform: none;
    color: var(--qc-text-tertiary);
}

.qc-sheet__empty {
    margin: 0;
    font-size: .85rem;
    color: var(--qc-text-tertiary);
}

.qc-facts { display: grid; gap: .45rem; }

.qc-fact {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    min-width: 0;
    font-size: .88rem;
    line-height: 1.35;
    color: var(--qc-text-primary);
}

.qc-fact > .ti {
    flex: none;
    margin-top: .1rem;
    color: var(--qc-text-tertiary);
}

.qc-fact small {
    display: block;
    font-size: .8rem;
    color: var(--qc-text-tertiary);
}

/* ------------------------------------------------------------------ *
 * The three figures, which are three different questions
 * ------------------------------------------------------------------ */
.qc-figs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(6rem, 1fr));
    gap: .5rem;
}

.qc-fig {
    padding: .55rem .7rem;
    border-radius: var(--qc-radius-input);
    background: var(--qc-field-bg);
    min-width: 0;
}

.qc-fig b {
    display: block;
    font-family: var(--qc-font-display);
    font-weight: 800;
    font-size: 1.2rem;
    line-height: 1;
    letter-spacing: -.02em;
    color: var(--qc-text-primary);
}

.qc-fig span {
    display: block;
    margin-top: .25rem;
    font-size: .75rem;
    line-height: 1.25;
    color: var(--qc-text-tertiary);
}

.qc-fig--live b { color: var(--qc-primary); }

/* ------------------------------------------------------------------ *
 * The materials sheet, read-only
 * ------------------------------------------------------------------ */
.qc-mat {
    width: 100%;
    border-collapse: collapse;
    font-size: .82rem;
    line-height: 1.3;
}

.qc-mat th {
    padding: 0 .5rem .35rem 0;
    text-align: left;
    font: 600 .66rem var(--qc-font-body);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--qc-text-tertiary);
    border-bottom: 1px solid var(--qc-divider);
    white-space: nowrap;
}

.qc-mat td {
    padding: .35rem .5rem .35rem 0;
    border-bottom: 1px solid var(--qc-divider);
    vertical-align: top;
}

.qc-mat tr:last-child td { border-bottom: 0; }

.qc-mat__num { text-align: right; white-space: nowrap; }
.qc-mat__unit { color: var(--qc-text-tertiary); }

/* A dash is not a zero: not filled in yet, and it is what bars the report. */
.qc-mat__num.is-missing { color: var(--qc-warning-text); font-weight: 700; }

/* ------------------------------------------------------------------ *
 * What is missing — the home's own rows, on one job
 * ------------------------------------------------------------------ */
.qc-sheet__flags {
    display: grid;
    gap: .35rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.qc-flag {
    display: grid;
    grid-template-columns: 10px minmax(0, 1fr) auto;
    align-items: center;
    gap: .6rem;
    padding: .45rem .6rem;
    border-radius: var(--qc-radius-input);
    font-size: .84rem;
    line-height: 1.3;
    background: color-mix(in srgb, var(--sev) 10%, transparent);
}

.qc-flag > i {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--sev);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--sev) 25%, transparent);
}

.qc-flag small {
    display: block;
    font-size: .78rem;
    color: var(--qc-text-tertiary);
}

.qc-flag a {
    font-size: .8rem;
    font-weight: 600;
    white-space: nowrap;
}

/* ------------------------------------------------------------------ *
 * Notes, contacts, the dates
 * ------------------------------------------------------------------ */
.qc-note {
    padding: .6rem .75rem;
    border-radius: var(--qc-radius-input);
    font-size: .86rem;
    line-height: 1.45;
    color: var(--qc-text-primary);
    background: var(--qc-field-bg);
}

.qc-note--office {
    background: color-mix(in srgb, var(--st) 10%, var(--qc-card-bg));
    border: 1px solid color-mix(in srgb, var(--st) 24%, transparent);
    border-left: 3px solid var(--st);
}

.qc-note__body > :last-child { margin-bottom: 0; }

.qc-sheet__contacts {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
}

.qc-cc {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    height: 1.9rem;
    padding: 0 .6rem;
    border-radius: var(--qc-radius-input);
    font-size: .82rem;
    color: var(--qc-text-primary);
    background: var(--qc-field-bg);
    border: 1px solid var(--qc-border);
    text-decoration: none;
    white-space: nowrap;
}

.qc-cc:hover { color: var(--qc-primary); border-color: var(--qc-primary); }
.qc-cc .ti { color: var(--qc-text-tertiary); }

.qc-sheet__hist {
    padding: 0 1.5rem 1.1rem;
    border-top: 1px solid var(--qc-divider);
}

.qc-sheet__hist .qc-sheet__blkhead { margin-top: 1rem; }

.qc-hist {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: .5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.qc-hist__r {
    display: grid;
    grid-template-columns: 10px minmax(0, 1fr);
    gap: .5rem;
    align-items: start;
    font-size: .8rem;
    color: var(--qc-text-secondary);
}

.qc-hist__r > i {
    width: 8px;
    height: 8px;
    margin-top: .3rem;
    border-radius: 50%;
    background: var(--qc-border);
}

.qc-hist__r b {
    display: block;
    font-weight: 600;
    color: var(--qc-text-primary);
}

.qc-hist__r small {
    display: block;
    color: var(--qc-text-tertiary);
}

/* ------------------------------------------------------------------ *
 * The bar that closes it
 * ------------------------------------------------------------------ */
.qc-sheet__foot {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem;
    padding: .8rem 1.5rem;
    border-top: 1px solid var(--qc-divider);
    background: color-mix(in srgb, var(--qc-surface-light) 55%, transparent);
}

.qc-sheet__foot form { margin: 0; }
.qc-sheet__foot-sp { flex: 1 1 auto; }

.qc-sheet__soon {
    margin: 0;
    font-size: .82rem;
    color: var(--qc-text-tertiary);
}

.qc-sheet__error {
    display: grid;
    justify-items: center;
    gap: .5rem;
    padding: 3rem 1.5rem;
    text-align: center;
    color: var(--qc-text-secondary);
}

.qc-sheet__error .ti {
    font-size: 1.6rem;
    color: var(--qc-warning-text);
}

/* ------------------------------------------------------------------ *
 * On a phone the sheet is the page
 * ------------------------------------------------------------------ */
@media (max-width: 991.98px) {
    .qc-sheet .modal-dialog {
        max-width: none;
        width: 100%;
        height: 100%;
        margin: 0;
    }

    .qc-sheet .modal-content {
        height: 100%;
        border: 0;
        border-radius: 0;
    }

    .qc-sheet__hero { min-height: 8.5rem; }
    .qc-sheet__title { padding: 1rem 3rem 1rem 1rem; }
    .qc-sheet__h { font-size: 1.35rem; }
    .qc-sheet__pathrow,
    .qc-sheet__grid,
    .qc-sheet__hist,
    .qc-sheet__foot { padding-left: 1rem; padding-right: 1rem; }
    .qc-sheet__moves { margin-left: 0; }
}

/* ------------------------------------------------------------------ *
 * The row the sheet is showing, marked out there
 * ------------------------------------------------------------------ */
/* Both containers leave part of the page in view, and stepping through a list
   with the arrow keys is hard to follow when nothing moves behind the sheet. */
[data-work-sheet].is-current {
    box-shadow: 0 0 0 2px var(--qc-primary),
                0 0 0 5px color-mix(in srgb, var(--qc-primary) 20%, transparent);
    border-radius: var(--qc-radius-input);
}

@media (prefers-reduced-motion: reduce) {
    .qc-sheet .modal-dialog { transition: none; }
}