/* Styles for the shared project detail view (project-view.js).
 *
 * Loaded by index.html and admin.html BEFORE each page's own inline <style>,
 * so a page can still override anything here at equal specificity. That is why
 * the handful of class names this file shares with index.html (.modal,
 * .modal-content, .close-button, .tier-badge, .gantt-completed-area-dot) are
 * duplicated rather than removed there: index.html's copies win on its own
 * page, and admin.html — which has neither those rules nor the .pm-* set — gets
 * them from here.
 *
 * The popup's own scope is .pv-modal, not #projectModal: admin.html already
 * uses that id for its project edit form.
 */


/* ── Shared with index.html; its inline copies win there ─────────────── */

.gantt-completed-area-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 4px; vertical-align: middle; flex-shrink: 0; }

.modal { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.6); }
.modal-content { background-color: #ffffff; color: var(--text-dark); margin: 2rem auto; padding: 25px; border: 1px solid var(--neutral-medium-gray); width: min(600px, calc(100% - 2rem)); border-radius: 0.5rem; position: relative; box-shadow: 0 4px 6px rgba(0,0,0,0.1); overflow-wrap: break-word; }

/* Padding grows the tap target to ~44px while the ✕ stays in the corner. */
.close-button { color: var(--neutral-dark-gray); position: absolute; top: 2px; right: 8px; padding: 8px 12px; font-size: 28px; font-weight: bold; cursor: pointer; transition: color 0.3s ease; }
.close-button:hover, .close-button:focus { color: var(--interlochen-blue); }
/* The popup's ✕ is a real <button> (the original was a <span>, so it could not
   be reached by keyboard at all). These reset the UA button styling the shared
   rule above never had to consider — without them it renders as a grey bordered
   box in the system font. Scoped to .pv-modal so index.html's What's New ✕,
   which is still a <span> on the same class, is untouched. */
.pv-modal .close-button { background: none; border: none; font-family: inherit; line-height: 1; }

.tier-badge { display: inline-block; padding: 0.1rem 0.55rem; border-radius: 9999px; font-size: 0.7rem; font-weight: 600; color: var(--white); text-transform: uppercase; letter-spacing: 0.04em; }
.tier-badge.light { background-color: var(--sky-blue); color: var(--interlochen-blue); }
.tier-badge.medium { background-color: var(--sunset); }
.tier-badge.heavy { background-color: #c0392b; }


/* ── The popup ───────────────────────────────────────────────────────── */

.modal-subproject-row { display: flex; align-items: center; gap: 0.5rem; padding: 0.45rem 0.6rem; border: 1px solid var(--neutral-light-gray); border-radius: 0.375rem; margin-bottom: 0.35rem; cursor: pointer; transition: background-color 0.15s; }
.modal-subproject-row:hover { background-color: var(--neutral-light-gray); }
.modal-subproject-name { flex: 1; font-size: 0.85rem; color: var(--text-dark); }
.modal-subproject-meta { font-size: 0.72rem; color: var(--neutral-dark-gray); white-space: nowrap; }

.modal-people-row { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.person-chip { display: flex; align-items: center; gap: 0.5rem; background: var(--neutral-light-gray); border: 1px solid var(--neutral-medium-gray); border-radius: 9999px; padding: 0.25rem 0.8rem 0.25rem 0.3rem; }
.person-avatar { width: 2rem; height: 2rem; border-radius: 50%; overflow: hidden; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--interlochen-blue); color: #fff; font-size: 0.7rem; font-weight: 700; }
.person-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.person-meta { line-height: 1.15; }
.person-name { font-size: 0.85rem; font-weight: 600; color: var(--text-dark); }
.person-role { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--neutral-dark-gray); }

#modalBody a { color: var(--interlochen-blue); text-decoration: underline; }
#modalBody a:hover { text-decoration: none; }
.modal-attach-list { display: flex; flex-direction: column; gap: 0.4rem; }
.modal-attach-row { display: flex; align-items: center; gap: 0.55rem; padding: 0.5rem 0.7rem; border: 1px solid var(--neutral-medium-gray); border-radius: 0.375rem; background: #fafafa; }
.modal-attach-row svg { flex-shrink: 0; }
.modal-attach-row a { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--interlochen-blue); text-decoration: none; font-size: 0.9rem; }
.modal-attach-row a:hover { text-decoration: underline; }
.modal-attach-type { font-size: 0.7rem; color: var(--neutral-dark-gray); white-space: nowrap; }

/* Copy-link button in the project detail popup */
/* Paired with the ✕ as a top-right cluster (✕ is at top:2px right:8px). */
.copy-link-btn { position: absolute; top: 16px; right: 52px; z-index: 1; background: none; border: none; color: var(--neutral-dark-gray); cursor: pointer; padding: 0.4rem; border-radius: 0.375rem; display: inline-flex; align-items: center; justify-content: center; line-height: 0; transition: color 0.15s, background-color 0.15s; }
.copy-link-btn:hover { color: var(--interlochen-blue); background: var(--neutral-light-gray); }
.copy-link-btn.copied { color: var(--forest-green); }

/* ── Admin quick actions in the project modal ──────────────────────────
   Hand-written CSS on purpose: tailwind.css is a purged prebuilt artifact
   and `firebase deploy --only hosting` never runs the build, so a new
   utility class would silently do nothing. Shown only to admins via the
   body class — presentation only; firestore.rules is the real boundary. */
.pm-admin-only { display: none; }
/* Revealed per element, not by one shared `display` — the bar is a flex row
   and the composer is a block, and a single `body.is-admin .pm-admin-only`
   rule would outrank both .pm-admin-bar and .pm-composer. */
body.is-admin #modalAdminBar { display: flex; }
body.is-admin #modalUpdateComposer { display: block; }
/* Suppressed during the guided tour so step 4's copy stays accurate and
   the spotlight hole (unclamped getBoundingClientRect) can't overflow. */
body.tour-running .pm-admin-only { display: none !important; }
.pm-admin-bar { flex-wrap: wrap; align-items: center; gap: 0.4rem; margin: 0 0 0.85rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--neutral-medium-gray); }
.pm-btn { padding: 0.35rem 0.7rem; border: 1px solid var(--neutral-medium-gray); border-radius: 0.375rem; background-color: var(--white); font-family: 'Georgia', serif; font-size: 0.8rem; color: var(--interlochen-blue); cursor: pointer; white-space: nowrap; transition: background-color 0.15s, border-color 0.15s; }
.pm-btn:hover { background-color: var(--neutral-light-gray); border-color: var(--interlochen-blue); }
.pm-btn:disabled { opacity: 0.55; cursor: default; }
/* The Edit toggle reads as engaged while its form is open. */
.pm-btn.pm-btn-active { background-color: var(--neutral-light-gray); border-color: var(--interlochen-blue); box-shadow: inset 0 0 0 1px var(--interlochen-blue); }
.pm-btn.pm-btn-primary { background-color: var(--interlochen-blue); border-color: var(--interlochen-blue); color: var(--white); }
.pm-btn.pm-btn-primary:hover { background-color: #003a61; }
/* --neutral-dark-gray (#A8A9AD) is a 2.4:1 contrast on white — fine for the
   decorative chrome it was picked for, but the new labels, hints and notes
   are functional text, so they get a readable muted tone (≈6:1). Scoped to
   the modal so the rest of the page keeps its existing palette. */
.pv-modal { --pm-muted: #5F6063; }
.pm-admin-link { margin-left: auto; font-size: 0.75rem; color: var(--interlochen-blue); text-decoration: underline; white-space: nowrap; }
.pm-admin-link:hover { text-decoration: none; }

/* Quick-edit date form. The read-only rows are hidden by a class, never by
   inline display — showModal rewrites their inline display on every open. */
/* No `display` here on purpose: an author `display:block` would outrank the
   UA's [hidden] rule and the form would never hide. */
.pm-quick-edit { background-color: var(--neutral-light-gray); border-radius: 0.375rem; padding: 0.75rem; margin: 0.5rem 0; }
#modalBody.pm-editing #modalStartDateRow,
#modalBody.pm-editing #modalDueDateRow { display: none !important; }
.pm-quick-fields { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.pm-quick-field { flex: 1 1 10rem; min-width: 0; }
.pm-quick-field label { display: block; font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--pm-muted); margin-bottom: 0.2rem; }
.pm-quick-field input[type="date"] { width: 100%; padding: 0.4rem 0.5rem; border: 1px solid var(--neutral-medium-gray); border-radius: 0.375rem; font-family: 'Georgia', serif; font-size: 0.85rem; color: var(--text-dark); background-color: var(--white); box-sizing: border-box; }
.pm-quick-actions { display: flex; align-items: center; gap: 0.4rem; margin-top: 0.75rem; }
.pm-quick-note { font-size: 0.7rem; color: var(--pm-muted); margin-left: auto; }

/* Update composer — a sibling of the updates list, never inside it: the
   list's innerHTML is cleared on every snapshot. */
/* No `display` here either — it would tie with .pm-admin-only and win on
   source order, showing the composer to non-admins. Only the
   body.is-admin #modalUpdateComposer rule above reveals it. */
.pm-composer { margin-bottom: 0.85rem; }
.pm-composer textarea { width: 100%; padding: 0.5rem 0.6rem; border: 1px solid var(--neutral-medium-gray); border-radius: 0.375rem; font-family: 'Georgia', serif; font-size: 0.85rem; line-height: 1.45; color: var(--text-dark); resize: vertical; box-sizing: border-box; }
.pm-composer textarea:focus { outline: none; border-color: var(--interlochen-blue); box-shadow: 0 0 0 2px var(--sky-blue); }
.pm-composer-row { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.4rem; }
.pm-composer-hint { font-size: 0.68rem; color: var(--pm-muted); }
.pm-composer-count { margin-left: auto; font-size: 0.68rem; color: var(--pm-muted); }
.pm-updates-empty { font-size: 0.8rem; color: var(--pm-muted); font-style: italic; padding: 0.4rem 0; }
.pm-update-pending { opacity: 0.6; }

.modal-update-row { padding: 0.6rem 0; border-bottom: 1px solid var(--neutral-light-gray); }
.modal-update-row:last-child { border-bottom: none; }
.modal-update-date { font-size: 0.7rem; color: var(--neutral-dark-gray); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.25rem; font-weight: 600; }
.modal-update-author { text-transform: none; letter-spacing: 0; font-weight: normal; }
.modal-update-text { font-size: 0.85rem; line-height: 1.45; color: var(--text-dark); }

.alloc-row { display: grid; grid-template-columns: minmax(120px, 1.5fr) 2fr auto; align-items: center; gap: 0.6rem; padding: 0.35rem 0; font-size: 0.8rem; }
.alloc-team { font-weight: 600; color: var(--text-dark); }
.alloc-bar-track { height: 8px; background-color: var(--neutral-light-gray); border-radius: 4px; overflow: hidden; }
.alloc-bar-fill { height: 100%; background-color: var(--lake-blue); border-radius: 4px; transition: width 0.3s; }
.alloc-bar-fill.full { background-color: var(--sunset); }
.alloc-count { font-size: 0.75rem; color: var(--neutral-dark-gray); white-space: nowrap; min-width: 56px; text-align: right; }


/* ── Mobile ──────────────────────────────────────────────────────────────
   The date inputs and the composer are restated at 16px so iOS does not zoom
   on focus, and the native date appearance is dropped so width:100% binds
   (iOS Safari otherwise sizes the control to its content and overflows the
   popup). Self-contained rather than relying on a host page's mobile block. */
@media (max-width: 640px) {

        .pm-btn { min-height: 2.75rem; }
        /* These out-specify the blanket 16px rule above (0,1,1 beats 0,0,1), so
           restate them or iOS zooms on focus with no way back. */
        .pm-quick-field input[type="date"], .pm-composer textarea { font-size: 16px; }
        .pm-admin-link { margin-left: 0; width: 100%; }

    .pv-modal input[type="date"], .pv-modal textarea { -webkit-appearance: none; appearance: none; min-width: 0; box-sizing: border-box; }
}
@media (max-width: 430px) {

        /* Stack the two date fields rather than squeezing them side by side.
           flex must be reset: once the axis is vertical, the desktop
           `flex: 1 1 10rem` reads 10rem as a HEIGHT basis and each field
           balloons to ~160px of empty space. */
        .pm-quick-fields { flex-direction: column; gap: 0.5rem; }
        .pm-quick-field { flex: 0 0 auto; }
        /* Let the hint drop below the buttons instead of squeezing "Save dates"
           onto two lines. */
        .pm-quick-actions, .pm-composer-row { flex-wrap: wrap; }
        .pm-quick-note { margin-left: 0; width: 100%; }
        .pm-composer-row .pm-composer-hint { flex: 1 0 100%; }

}

/* The Full edit button takes the slot the cross-page link uses on index.html. */
.pm-btn-end { margin-left: auto; }
@media (max-width: 640px) {
    .pm-btn-end { margin-left: 0; width: 100%; }
}