/* Notes pages use shared card/badge/sheet styles from global.css.
   The rules below cover note-specific bits: the note action sheet,
   and the Gallery/Camera image picker (Part 7). */

.note-actions-sheet .btn { margin-bottom: 8px; }
.note-kebab { flex-shrink: 0; }

/* ---------------- member note-hold info sheet (read-only) ---------------- */
.note-info-value {
    color: var(--text); font-size: .92rem; line-height: 1.5; margin: 0;
    white-space: pre-wrap; overflow-wrap: anywhere;
}

/* A plain-outline button variant global.css doesn't already have —
   used for the Gallery/Camera picker actions. */
.btn-outline {
    background: transparent; color: var(--primary);
    border: 2px solid var(--primary);
}
.btn-outline:disabled { opacity: .5; }

/* ---------------- image picker (Part 7) ---------------- */

.image-picker-strip {
    display: flex; gap: 10px; overflow-x: auto; padding: 2px 2px 6px;
    -webkit-overflow-scrolling: touch;
}
.image-thumb {
    position: relative; flex: 0 0 auto;
    width: 72px; height: 72px; border-radius: 14px; overflow: hidden;
    background: var(--surface-alt); box-shadow: var(--shadow-sm);
    cursor: pointer;
}
.image-thumb img { width: 100%; height: 100%; object-fit: cover; }
.image-thumb-remove {
    position: absolute; top: 3px; right: 3px;
    width: 20px; height: 20px; border-radius: 50%; border: 0; padding: 0;
    background: rgba(0,0,0,.6); color: #fff;
    display: grid; place-items: center; cursor: pointer;
}
.image-thumb-remove .material-symbols-rounded { font-size: 14px; }

/* ---------------- image preview (Part 8) ---------------- */
/* Crop UI removed per product decision — a photo is compressed as soon
   as it's picked, and its full (uncropped) frame is what gets sent. This
   is just a full-screen tap-to-view + remove, no drag handles or crop
   rect math. Reuses the in-app PDF viewer's header classes (.pdfv-header
   /.pdfv-title/.pdfv-icon-btn) so both full-screen viewers match. */
.imgv-panel {
    position: relative; width: 100%; height: 100%;
    display: flex; flex-direction: column; background: #17181c;
}
.imgv-body {
    flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center;
    background: #111; overflow: hidden;
}
.imgv-img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; user-select: none; -webkit-user-drag: none; }

/* ---------------- note rows (simple list, not a grid) ---------------- */

#notes-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Each note is its own card (background + shadow + radius) rather than
   a flat row blending into the page — matches the reference design,
   where every note sits as a distinct rounded card with breathing room
   around it, not a single dense list. */
.note-row {
    background: var(--surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 12px 14px;
}

.note-row-icon {
    flex: 0 0 auto;
    width: 44px; height: 44px; border-radius: 14px;
    background: var(--primary-soft, #eef2ff);
    display: grid; place-items: center;
}
.note-row-icon .material-symbols-rounded { font-size: 22px; color: var(--primary); }

.note-row .badge { margin-top: 2px; }

.pending-note { opacity: .75; }