/* Field Notes modal - Mobile First
   Partial: Views/Shared/_FieldNotesModal.cshtml

   Self-contained, like the preview-email modal in shared/quote-detail.css. The tab that
   opens this renders on every screen of an inspection or service visit, and those screens
   load a different stylesheet each - inspections/inprogress.css carries the
   .modal-overlay-centered / .modal-container-flex rules, services/inprogress.css does not.
   So the chrome is defined here rather than assumed to be present, with values copied from
   the house modal so it reads identically to every other one.

   EVERY selector is scoped to #fieldNotesModalOverlay, and that is not decoration. This
   file loads from _Head; a page's own stylesheet loads after it, from @section Styles. Most
   of those stylesheets define `.modal-container { max-width: 420px }`, which at equal
   specificity beats a later class rule of ours purely on source order - and on the one page
   that has no such rule, ours would win. That is exactly how the modal ended up rendering
   at two different widths. The ID puts these rules out of reach of all of them. */

#fieldNotesModalOverlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 1000;
    padding: 16px;
}

/* jQuery's fadeIn sets inline `display: block`; the overlay needs flex-centering when
   it is actually visible, and the inline display:none has to keep winning when hidden. */
#fieldNotesModalOverlay:not([style*="display: none"]):not([style*="display:none"]) {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

#fieldNotesModalOverlay .field-notes-container {
    /* inspections/inprogress.css centres `.modal-overlay-centered > .modal-container` with
       position:fixed + a -50% translate. This overlay centres with flex instead, and the two
       do not mix: a fixed child resolves width:100% against the viewport rather than the
       padded overlay, so the same modal comes out wider on those pages. Neutralised here. */
    position: relative;
    top: auto;
    left: auto;
    transform: none;

    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    width: 100%;
    max-width: 680px;
    max-height: calc(100vh - 32px);
    max-height: calc(100dvh - 32px);
    /* Some page stylesheets push .modal-container down with a margin-top; the overlay
       centres this one, so any inherited offset has to be cancelled. */
    margin: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

#fieldNotesModalOverlay .modal-header {
    flex-shrink: 0;
    padding: 16px;
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#fieldNotesModalOverlay .modal-title {
    font-size: 16px;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

#fieldNotesModalOverlay .modal-close {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    border: none;
    background: transparent;
    color: #94a3b8;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

#fieldNotesModalOverlay .modal-close:hover {
    background: #f1f5f9;
    color: #1e293b;
}

#fieldNotesModalOverlay .modal-footer {
    flex-shrink: 0;
    padding: 12px 16px;
    border-top: 1px solid #e2e8f0;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

/* Compose on top, history underneath - the same order as the office Notes card. The body
   is the one scrolling region between a fixed header and footer. */
#fieldNotesModalOverlay .field-notes-body {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 16px;
    overflow-y: auto;
}

#fieldNotesModalOverlay .field-notes-textarea {
    flex: 0 0 auto;
    width: 100%;
    /* Tall on a phone held in portrait, taller still on a tablet, and never so tall
       that the Save button is pushed off the screen - the container caps the height. */
    min-height: 26vh;
    min-height: 26dvh;
    padding: 12px;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    background: #ffffff;
    color: #1e293b;
    font-family: inherit;
    /* 16px, so iOS Safari does not zoom the page when the field takes focus. */
    font-size: 16px;
    line-height: 1.55;
    resize: none;
    -webkit-appearance: none;
}

#fieldNotesModalOverlay .field-notes-textarea:focus {
    outline: none;
    border-color: #059669;
    box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.12);
}

#fieldNotesModalOverlay .field-notes-textarea::placeholder {
    color: #94a3b8;
}

/* Counter left, Add Note right - the office card's compose row. */
#fieldNotesModalOverlay .field-notes-compose-actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 10px;
}

#fieldNotesModalOverlay .field-notes-count {
    font-size: 12px;
    color: #94a3b8;
}

/* ========== History ========== */

#fieldNotesModalOverlay .field-notes-history {
    flex: 0 0 auto;
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid #e2e8f0;
}

#fieldNotesModalOverlay .field-notes-history-title {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #64748b;
    margin-bottom: 10px;
}

#fieldNotesModalOverlay .field-note-item {
    padding: 10px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #f8fafc;
    margin-bottom: 8px;
}

#fieldNotesModalOverlay .field-note-meta {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 4px;
}

#fieldNotesModalOverlay .field-note-author {
    font-size: 13px;
    font-weight: 600;
    color: #1e293b;
}

#fieldNotesModalOverlay .field-note-when {
    font-size: 11px;
    color: #94a3b8;
    white-space: nowrap;
}

#fieldNotesModalOverlay .field-note-text {
    font-size: 14px;
    line-height: 1.5;
    color: #334155;
    /* A note can arrive as one unbroken 2000-character run. */
    overflow-wrap: anywhere;
}

#fieldNotesModalOverlay .field-notes-empty {
    margin: 0;
    font-size: 13px;
    color: #94a3b8;
}

/* The textarea shares the body with the history now, so it is sized to stay the dominant
   element without pushing the notes under it out of reach. */
@media (min-width: 768px) {
    #fieldNotesModalOverlay .field-notes-textarea {
        min-height: 32vh;
        min-height: 32dvh;
    }
}