/* ════════════════════════════════════════════════════════════════ GMHSphere — Patient Docket Stylesheet patient_docket.css NAMESPACE CONVENTION: · Docket UI classes → keep existing names (group-*, section-*, etc.) · html_schema classes → gmh_hs_ prefix (form fields, tickets, toasts) ════════════════════════════════════════════════════════════════ */ /* ── 1. DESIGN TOKENS ───────────────────────────────────────── */ :root { /* Surface & text */ --gmh-bg: #f4f7fb; --gmh-card: #ffffff; --gmh-text: #1f2937; --gmh-muted: #6b7280; --gmh-border: #d7dee8; --gmh-shadow: 0 8px 24px rgba(15,23,42,0.08); /* Brand */ --gmh-primary: #174ea6; --gmh-primary-dark: #0f3a7a; --gmh-danger: #b91c1c; --gmh-warning: #b45309; --gmh-success: #15803d; /* Group color tokens */ --gmh-core-color: #174ea6; --gmh-core-light: #dbeafe; --gmh-core-dark: #0f3a7a; --gmh-order-color: #92400e; --gmh-order-light: #fef3c7; --gmh-order-dark: #78350f; --gmh-medproc-color: #14532d; --gmh-medproc-light: #dcfce7; --gmh-medproc-dark: #052e16; --gmh-close-color: #581c87; --gmh-close-light: #f3e8ff; --gmh-close-dark: #3b0764; --gmh-doc-color: #0f5298; --gmh-doc-light: #e8f0fe; --gmh-doc-dark: #093370; --gmh-cds-color: #7e0019; --gmh-cds-light: #ffe8ec; --gmh-cds-dark: #5c0012; --gmh-ai-color: #0e7490; --gmh-ai-light: #ecfeff; --gmh-ai-dark: #0a5a70; --gmh-support-color: #1e3a5f; --gmh-support-light: #e8f0fe; --gmh-support-dark: #132740; } /* ── 2. RESET ───────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: Arial, Helvetica, sans-serif; background: var(--gmh-bg); color: var(--gmh-text); } /* ── 3. STICKY HEADER ───────────────────────────────────────── */ #gmh-sticky-header { position: sticky; top: 0; z-index: 2000; box-shadow: var(--gmh-shadow); } /* ── 4. PATIENT BANNER ──────────────────────────────────────── */ .patient-banner { background: linear-gradient(135deg, var(--gmh-primary), var(--gmh-primary-dark)); color: #fff; padding: 14px 18px; } .patient-topline { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; flex-wrap: wrap; } .patient-name { font-size: 1.35rem; font-weight: 800; margin-bottom: 4px; } .patient-meta { font-size: 0.88rem; opacity: .95; line-height: 1.6; } .risk-box { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; align-items: center; } .risk-badge { border-radius: 999px; padding: 5px 11px; font-size: 0.8rem; font-weight: 800; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.35); } .risk-critical { background: #7f1d1d; } .risk-warning { background: #92400e; } .risk-ok { background: #14532d; } /* ── 5. ENCOUNTER STRIP ─────────────────────────────────────── */ .encounter-strip { background: #0f3a7a; padding: 7px 18px; display: flex; gap: 18px; flex-wrap: wrap; align-items: center; font-size: 0.8rem; color: #bfdbfe; border-top: 1px solid rgba(255,255,255,.12); } .encounter-strip span { display: flex; align-items: center; gap: 5px; } .encounter-strip i { opacity: .7; } .enc-highlight { color: #fde68a; font-weight: 700; } /* ── 6. WORKFLOW PROGRESS BAR ───────────────────────────────── */ .progress-bar { display: flex; align-items: center; justify-content: space-between; padding: 14px 28px; background: #fff; border-bottom: 1px solid var(--gmh-border); overflow-x: auto; } .prog-step { display: flex; align-items: center; flex: 1; min-width: 0; } .prog-step:last-child { flex: 0 0 auto; } .prog-dot { width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.82rem; font-weight: 800; border: 2px solid var(--gmh-border); background: #fff; color: var(--gmh-muted); cursor: pointer; transition: all .2s; flex-shrink: 0; } .prog-dot.done { background: var(--gmh-success); border-color: var(--gmh-success); color: #fff; } .prog-dot.active { background: var(--gmh-primary); border-color: var(--gmh-primary); color: #fff; box-shadow: 0 0 0 4px #bfdbfe; } .prog-dot.pending { background: #fff; border-color: var(--gmh-border); color: var(--gmh-muted); } .prog-dot:hover { transform: scale(1.12); } .prog-label { font-size: 0.74rem; font-weight: 700; color: var(--gmh-muted); white-space: nowrap; margin: 0 5px; flex-shrink: 0; } .prog-line { flex: 1; height: 3px; background: var(--gmh-border); min-width: 12px; } .prog-line.done { background: var(--gmh-success); } /* ── 7. ENCOUNTER TIMELINE ──────────────────────────────────── */ .timeline-strip { max-width: 1100px; margin: 14px auto 0; padding: 0 14px; } .timeline-card { background: #fff; border: 1px solid var(--gmh-border); border-radius: 12px; box-shadow: var(--gmh-shadow); padding: 14px 16px; } .timeline-card-header{ display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; } .timeline-title { font-size: 0.86rem; font-weight: 900; color: var(--gmh-primary-dark); display: flex; align-items: center; gap: 7px; white-space: nowrap; } .timeline-events { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 3px; } .timeline-event { flex: 0 0 auto; min-width: 142px; border: 1px solid var(--gmh-border); border-radius: 10px; padding: 8px 10px; background: #fbfdff; font-size: 0.78rem; } .timeline-event strong{ display: block; color: var(--gmh-primary-dark); margin-bottom: 3px; } .timeline-event.done { border-left: 4px solid var(--gmh-success); } .timeline-event.active { border-left: 4px solid var(--gmh-primary); background: #eef4ff; } .timeline-event.pending { border-left: 4px solid var(--gmh-warning); background: #fffbeb; } /* ── 8. STATUS RULES STRIP ──────────────────────────────────── */ .status-rule-strip { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .rule-chip { background: #fff; border: 1px solid var(--gmh-border); border-radius: 999px; padding: 6px 10px; font-size: 0.76rem; font-weight: 800; box-shadow: 0 3px 10px rgba(15,23,42,.05); } .rule-red { color: var(--gmh-danger); border-color: #fecaca; background: #fff7f7; } .rule-amber { color: var(--gmh-warning); border-color: #fed7aa; background: #fffaf0; } .rule-green { color: var(--gmh-success); border-color: #bbf7d0; background: #f7fff9; } .rule-purple { color: #6b21a8; border-color: #d8b4fe; background: #faf5ff; } /* ── 9. EDI CONTAINER + GROUP BLOCKS ────────────────────────── */ .edi-container { max-width: 1100px; margin: 20px auto 60px; padding: 0 14px; } .group-block { margin-bottom: 10px; } .group-header { display: flex; align-items: center; gap: 12px; padding: 11px 16px; border-radius: 10px 10px 0 0; cursor: pointer; user-select: none; font-weight: 900; font-size: 0.95rem; letter-spacing: 0.04em; text-transform: uppercase; transition: filter .15s; color: #fff; } .group-header:hover { filter: brightness(1.06); } .gh-icon { font-size: 1.1rem; } .gh-label { flex: 1; } .gh-count { font-size: 0.75rem; font-weight: 700; opacity: .8; border: 1px solid rgba(255,255,255,.4); border-radius: 999px; padding: 2px 9px; } .gh-chevron { font-size: 0.85rem; transition: transform .25s; } .group-block.collapsed .gh-chevron { transform: rotate(-90deg); } /* Group header backgrounds — each group has exactly one gradient */ .group-core .group-header { background: linear-gradient(135deg, var(--gmh-core-color), var(--gmh-core-dark)); } .group-orders .group-header { background: linear-gradient(135deg, var(--gmh-order-color), var(--gmh-order-dark)); } .group-medproc .group-header { background: linear-gradient(135deg, var(--gmh-medproc-color), var(--gmh-medproc-dark)); } .group-close .group-header { background: linear-gradient(135deg, var(--gmh-close-color), var(--gmh-close-dark)); } .group-docmgmt .group-header { background: linear-gradient(135deg, var(--gmh-doc-color), var(--gmh-doc-dark)); } .group-cds .group-header { background: linear-gradient(135deg, var(--gmh-cds-color), var(--gmh-cds-dark)); } .group-ai .group-header { background: linear-gradient(135deg, var(--gmh-ai-color), var(--gmh-ai-dark)); } .group-support .group-header { background: linear-gradient(135deg, var(--gmh-support-color), var(--gmh-support-dark)); } /* ── 10. SECTION LIST ───────────────────────────────────────── */ .section-list { border: 1px solid var(--gmh-border); border-top: none; border-radius: 0 0 10px 10px; overflow: hidden; background: var(--gmh-card); } .group-block.collapsed .section-list { display: none; } /* ── 11. SECTION CARD ───────────────────────────────────────── */ .section-card { border-bottom: 1px solid var(--gmh-border); overflow: hidden; transition: box-shadow .2s; } .section-card:last-child { border-bottom: none; } .section-card.open { background: #fafcff; } /* Accent left-border per group — single rule per group using CSS custom prop */ .section-card.open { box-shadow: inset 3px 0 0 var(--gmh-primary); } .group-orders .section-card.open { box-shadow: inset 3px 0 0 var(--gmh-order-color); } .group-medproc .section-card.open { box-shadow: inset 3px 0 0 var(--gmh-medproc-color); } .group-close .section-card.open { box-shadow: inset 3px 0 0 var(--gmh-close-color); } .group-docmgmt .section-card.open { box-shadow: inset 3px 0 0 var(--gmh-doc-color); } .group-cds .section-card.open { box-shadow: inset 3px 0 0 var(--gmh-cds-color); } .group-ai .section-card.open { box-shadow: inset 3px 0 0 var(--gmh-ai-color); } .group-support .section-card.open { box-shadow: inset 3px 0 0 var(--gmh-support-color); } /* ── 12. SECTION BUTTON ─────────────────────────────────────── */ .section-btn { width: 100%; border: 0; background: transparent; padding: 14px 16px; text-align: left; cursor: pointer; display: flex; align-items: center; gap: 12px; font-size: 0.95rem; font-weight: 700; color: var(--gmh-text); transition: background .15s; } .section-btn:hover { background: #f0f6ff; } .group-orders .section-btn:hover { background: #fffbeb; } .group-medproc .section-btn:hover { background: #f0fdf4; } .group-close .section-btn:hover { background: #faf5ff; } .group-docmgmt .section-btn:hover { background: #f0f4ff; } .group-cds .section-btn:hover { background: var(--gmh-cds-light); } .group-ai .section-btn:hover { background: var(--gmh-ai-light); } .group-support .section-btn:hover { background: #f0f4fb; } /* ── 13. SECTION BUTTON ICON ────────────────────────────────── */ .sb-icon { width: 34px; height: 34px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 0.95rem; flex-shrink: 0; } .group-core .sb-icon { background: var(--gmh-core-light); color: var(--gmh-core-color); } .group-orders .sb-icon { background: var(--gmh-order-light); color: var(--gmh-order-color); } .group-medproc .sb-icon { background: var(--gmh-medproc-light); color: var(--gmh-medproc-color); } .group-close .sb-icon { background: var(--gmh-close-light); color: var(--gmh-close-color); } .group-docmgmt .sb-icon { background: var(--gmh-doc-light); color: var(--gmh-doc-color); } .group-cds .sb-icon { background: var(--gmh-cds-light); color: var(--gmh-cds-color); } .group-ai .sb-icon { background: var(--gmh-ai-light); color: var(--gmh-ai-color); } .group-support .sb-icon { background: var(--gmh-support-light); color: var(--gmh-support-color); } .sb-text { flex: 1; min-width: 0; } .sb-title { display: block; font-weight: 700; font-size: 0.95rem; } .sb-sub { display: block; font-weight: 400; font-size: 0.78rem; color: var(--gmh-muted); margin-top: 1px; } .sb-chevron { font-size: 0.75rem; color: var(--gmh-muted); transition: transform .25s; flex-shrink: 0; } .section-card.open .sb-chevron { transform: rotate(180deg); } /* ── 14. STATUS PILLS ───────────────────────────────────────── */ /* Base */ .status-pill { font-size: 0.72rem; font-weight: 700; padding: 3px 9px; border-radius: 999px; white-space: nowrap; flex-shrink: 0; } /* Amber (pending/warn share same palette) */ .pill-pending, .pill-warn { background: #fef3c7; color: #92400e; } /* Blue (draft/info share same palette) */ .pill-draft, .pill-info { background: #dbeafe; color: #1e40af; } /* Green (final/ok share same palette) */ .pill-final, .pill-ok { background: #dcfce7; color: #14532d; } .pill-alert { background: #fee2e2; color: #991b1b; } .pill-verified { background: #f3e8ff; color: #6b21a8; } /* ── 15. SECTION CONTENT ────────────────────────────────────── */ .section-content { display: none; padding: 0 16px 16px 62px; animation: gmhSlideDown .2s ease; } .section-card.open .section-content { display: block; } @keyframes gmhSlideDown { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } .sc-desc { font-size: 0.85rem; color: var(--gmh-muted); margin-bottom: 14px; line-height: 1.55; padding-top: 8px; } /* ── 16. MINI GRID + CARDS ──────────────────────────────────── */ .mini-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px; margin-bottom: 14px; } .mini-card { background: var(--gmh-bg); border: 1px solid var(--gmh-border); border-radius: 8px; padding: 10px 12px; font-size: 0.82rem; } .mini-card strong { display: block; font-size: 0.75rem; color: var(--gmh-muted); margin-bottom: 3px; text-transform: uppercase; letter-spacing: 0.03em; } .mini-card.warn { border-left: 3px solid var(--gmh-warning); background: #fffbeb; } .mini-card.alert { border-left: 3px solid var(--gmh-danger); background: #fef2f2; } .mini-card.good { border-left: 3px solid var(--gmh-success); background: #f0fdf4; } /* ── 17. ACTION ROW + BUTTONS ───────────────────────────────── */ .action-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; } .btn { border: 1px solid var(--gmh-border); background: var(--gmh-card); color: var(--gmh-text); border-radius: 7px; padding: 7px 14px; font-size: 0.82rem; font-weight: 700; cursor: pointer; transition: background .12s, border-color .12s; } .btn:hover { background: #f0f6ff; border-color: #93c5fd; } .btn-primary { background: var(--gmh-primary); color: #fff; border-color: var(--gmh-primary); } .btn-primary:hover { background: var(--gmh-primary-dark); border-color: var(--gmh-primary-dark); } .btn-order { background: var(--gmh-order-color); color: #fff; border-color: var(--gmh-order-color); } .btn-order:hover { background: var(--gmh-order-dark); } .btn-medproc { background: var(--gmh-medproc-color); color: #fff; border-color: var(--gmh-medproc-color); } .btn-medproc:hover { background: var(--gmh-medproc-dark); } .btn-close-g { background: var(--gmh-close-color); color: #fff; border-color: var(--gmh-close-color); } .btn-close-g:hover { background: var(--gmh-close-dark); } .btn-danger { background: var(--gmh-danger); color: #fff; border-color: var(--gmh-danger); } .btn-danger:hover { background: #991b1b; } /* ── 18. UTILITY ELEMENTS ───────────────────────────────────── */ .edi-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 0.72rem; font-weight: 700; padding: 3px 8px; border-radius: 5px; background: #e0e7ff; color: #3730a3; margin-bottom: 10px; letter-spacing: 0.04em; } .expand-btn { border: 1px solid #93c5fd; background: #fff; color: var(--gmh-primary); border-radius: 999px; width: 28px; height: 28px; font-size: 0.75rem; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background .12s, transform .12s; } .expand-btn:hover { background: #dbeafe; transform: scale(1.1); } /* ── 19. LOCK STATE ─────────────────────────────────────────── */ .section-card.locked .section-btn { opacity: 0.63; cursor: not-allowed; } .section-card.locked .section-btn:hover { background: transparent; } .lock-note { margin: 10px 0 12px; padding: 9px 11px; border-radius: 9px; background: #fff7ed; border: 1px solid #fed7aa; color: #92400e; font-size: 0.82rem; font-weight: 800; } /* ── 20. SIGNED-BY BLOCKS ───────────────────────────────────── */ .signed-by { margin-top: 13px; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 8px; } .signed-box { border: 1px dashed var(--gmh-border); background: #fff; border-radius: 9px; padding: 9px 10px; font-size: 0.78rem; } .signed-box strong { display: block; color: var(--gmh-primary-dark); margin-bottom: 3px; text-transform: uppercase; letter-spacing: 0.03em; font-size: 0.72rem; } /* ── 21. DRAG AND DROP ──────────────────────────────────────── */ .group-block.drag-enabled .group-header { cursor: grab; } .group-block.drag-enabled.dragging { opacity: .45; } .group-block.drag-enabled.drag-over { outline: 3px dashed var(--gmh-primary); outline-offset: 3px; } .group-core .group-header { cursor: pointer; } /* ── 22. MODAL ──────────────────────────────────────────────── */ .modal-overlay { position: fixed; inset: 0; z-index: 9999; background: rgba(15,23,42,.45); display: none; align-items: stretch; justify-content: center; padding: 16px; } .modal-overlay.open { display: flex; } .modal-window { width: min(1200px,98vw); height: min(900px,96vh); background: #fff; border-radius: 14px; overflow: hidden; box-shadow: 0 24px 70px rgba(15,23,42,.35); border: 2px solid var(--gmh-primary); display: flex; flex-direction: column; } .modal-header { background: linear-gradient(135deg, var(--gmh-primary), var(--gmh-primary-dark)); color: #fff; padding: 12px 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; font-weight: 900; font-size: 1rem; } .modal-close { border: 1px solid #fff; background: #7f1d1d; color: #fff; border-radius: 999px; width: 36px; height: 36px; font-size: 1rem; cursor: pointer; font-weight: 900; } .modal-body { flex: 1; overflow: auto; padding: 20px; background: #f8fbff; } /* Patient context bar inside modal */ .modal-patient-card { background: #f1f5f9; border-bottom: 1px solid #e2e8f0; padding: 8px 20px; font-size: .8rem; color: #334155; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font-family: 'Segoe UI', system-ui, sans-serif; } .modal-patient-card strong { color: #1e293b; } .mpc-sep { color: #94a3b8; font-weight: 400; } .mpc-val { font-weight: 800; color: #1e293b; } /* ── 23. PREVIEW & PRINT PANEL (PPP) ────────────────────────── */ #ppp-panel { max-width: 1100px; margin: 0 auto 8px; display: block; } #ppp-panel .ppp-body { display: none; } #ppp-panel.ppp-open .ppp-body { display: block; } .ppp-card { background: #fff; border: 1px solid var(--gmh-border); border-top: none; border-radius: 10px; overflow: hidden; } .ppp-hdr { background: linear-gradient(135deg, var(--gmh-primary), var(--gmh-primary-dark)); color: #fff; padding: 11px 16px; display: flex; align-items: center; gap: 12px; cursor: pointer; user-select: none; font-weight: 900; font-size: 0.95rem; letter-spacing: 0.04em; border-radius: 10px; } #ppp-panel.ppp-open .ppp-hdr { border-radius: 10px 10px 0 0; } .ppp-ttl { flex: 1; font-weight: 900; font-size: 0.95rem; } .ppp-sub { font-size: .75rem; opacity: .9; font-weight: 700; } .ppp-hdr-chev{ font-size: 1rem; transition: transform .25s; flex-shrink: 0; margin-left: auto; } #ppp-panel.ppp-open .ppp-hdr-chev { transform: rotate(90deg); } .ppp-body { padding: 18px 20px 22px; } .ppp-all-row { display: flex; align-items: center; gap: 10px; background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 9px; padding: 11px 14px; margin-bottom: 16px; cursor: pointer; } .ppp-all-row input { width: 18px; height: 18px; accent-color: var(--gmh-primary); cursor: pointer; } .ppp-all-row label { font-weight: 900; font-size: .95rem; color: var(--gmh-primary); cursor: pointer; } .ppp-cnt { margin-left: auto; font-size: .78rem; font-weight: 700; color: var(--gmh-muted); } .ppp-groups { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; } .ppp-grp { border: 1px solid var(--gmh-border); border-radius: 9px; overflow: hidden; } .ppp-ghdr { display: flex; align-items: center; gap: 10px; padding: 9px 13px; background: #f8fafc; border-bottom: 1px solid transparent; cursor: pointer; } .ppp-grp.ppp-x-expanded .ppp-ghdr { border-bottom-color: var(--gmh-border); } .ppp-ghdr input { width: 16px; height: 16px; accent-color: var(--gmh-primary); cursor: pointer; flex-shrink: 0; } .ppp-gicon { width: 28px; height: 28px; border-radius: 7px; display: flex; align-items: center; justify-content: center; font-size: .82rem; flex-shrink: 0; } .ppp-gname { flex: 1; font-weight: 800; font-size: .88rem; } .ppp-chev { font-size: .72rem; color: var(--gmh-muted); transition: transform .2s; } .ppp-grp.ppp-x-expanded .ppp-chev { transform: rotate(180deg); } /* PPP group color bands — single rule each */ .ppp-g-core .ppp-ghdr { border-left: 4px solid var(--gmh-core-color); } .ppp-g-core .ppp-gicon { background: var(--gmh-core-light); color: var(--gmh-core-color); } .ppp-g-orders .ppp-ghdr { border-left: 4px solid var(--gmh-order-color); } .ppp-g-orders .ppp-gicon { background: var(--gmh-order-light); color: var(--gmh-order-color); } .ppp-g-medproc .ppp-ghdr { border-left: 4px solid var(--gmh-medproc-color); } .ppp-g-medproc .ppp-gicon { background: var(--gmh-medproc-light); color: var(--gmh-medproc-color); } .ppp-g-ai .ppp-ghdr { border-left: 4px solid var(--gmh-primary); } .ppp-g-ai .ppp-gicon { background: #e0e7ff; color: #3730a3; } .ppp-g-close .ppp-ghdr { border-left: 4px solid var(--gmh-close-color); } .ppp-g-close .ppp-gicon { background: var(--gmh-close-light); color: var(--gmh-close-color); } .ppp-g-cds .ppp-ghdr { border-left: 4px solid var(--gmh-cds-color); } .ppp-g-cds .ppp-gicon { background: var(--gmh-cds-light); color: var(--gmh-cds-color); } .ppp-g-docs .ppp-ghdr { border-left: 4px solid var(--gmh-doc-color); } .ppp-g-docs .ppp-gicon { background: var(--gmh-doc-light); color: var(--gmh-doc-color); } .ppp-g-support .ppp-ghdr { border-left: 4px solid var(--gmh-support-color); } .ppp-g-support .ppp-gicon { background: var(--gmh-support-light); color: var(--gmh-support-color); } .ppp-secs { display: none; padding: 4px 12px 10px 52px; } .ppp-grp.ppp-x-expanded .ppp-secs { display: block; } .ppp-srow { display: flex; align-items: center; gap: 9px; padding: 6px 0; border-bottom: 1px solid #f1f5f9; cursor: pointer; } .ppp-srow:last-child { border-bottom: none; } .ppp-srow input { width: 15px; height: 15px; accent-color: var(--gmh-primary); cursor: pointer; } .ppp-srow label { flex: 1; font-size: .85rem; font-weight: 700; color: var(--gmh-text); cursor: pointer; } /* Section status pills in PPP (collapsed — amber/green/blue share palette with status-pill above) */ .ppp-spill { font-size: .68rem; font-weight: 800; padding: 2px 8px; border-radius: 999px; white-space: nowrap; } .sp-final, .sp-ok { background: #dcfce7; color: #15803d; } .sp-draft { background: #dbeafe; color: #1e40af; } .sp-pending, .sp-warn{ background: #fef3c7; color: #92400e; } .sp-alert { background: #fef2f2; color: #b91c1c; } .sp-info { background: #e0e7ff; color: #3730a3; } .sp-muted { background: #f1f5f9; color: #6b7280; } .ppp-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding-top: 14px; border-top: 1px solid var(--gmh-border); } .ppp-gen-btn { background: var(--gmh-primary); color: #fff; border: none; border-radius: 8px; padding: 10px 22px; font-size: .9rem; font-weight: 800; cursor: pointer; display: flex; align-items: center; gap: 8px; } .ppp-gen-btn:hover { background: var(--gmh-primary-dark); } .ppp-gen-btn:disabled { opacity: .4; cursor: not-allowed; } .ppp-none-btn { border: 1px solid var(--gmh-border); background: #fff; color: var(--gmh-muted); border-radius: 8px; padding: 9px 15px; font-size: .85rem; font-weight: 700; cursor: pointer; } .ppp-none-btn:hover { background: #f8fafc; } #ppp-sel-label { margin-left: auto; font-size: .82rem; font-weight: 700; color: var(--gmh-muted); } /* ── 24. HTML_SCHEMA FORM CLASSES (gmh_hs_ namespace) ──────── */ /* These classes are injected by html_schema form definitions rendered inside .modal-body. Prefix: gmh_hs_ */ .gmh_hs_form { background: #fff; border: 1px solid var(--gmh-border); border-radius: 10px; padding: 16px 18px; margin-top: 12px; } .gmh_hs_form_grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; margin-bottom: 12px; } .gmh_hs_field { display: flex; flex-direction: column; gap: 4px; } .gmh_hs_field label { font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--gmh-muted); } .gmh_hs_field input, .gmh_hs_field select, .gmh_hs_field textarea { border: 1px solid #cbd5e1; border-radius: 7px; padding: 8px 10px; font-size: .88rem; font-family: inherit; } .gmh_hs_field input:focus, .gmh_hs_field select:focus, .gmh_hs_field textarea:focus { outline: 2px solid var(--gmh-primary); border-color: var(--gmh-primary); } .gmh_hs_field.full { grid-column: 1 / -1; } .gmh_hs_priority_bar { display: flex; gap: 6px; margin-bottom: 12px; flex-wrap: wrap; } .gmh_hs_pri { border: 2px solid var(--gmh-border); border-radius: 8px; padding: 6px 14px; font-size: .78rem; font-weight: 800; cursor: pointer; background: #fff; color: var(--gmh-muted); transition: all .12s; } .gmh_hs_pri.sel-routine { background: #dcfce7; border-color: var(--gmh-success); color: var(--gmh-success); } .gmh_hs_pri.sel-urgent { background: #fef3c7; border-color: var(--gmh-warning); color: var(--gmh-warning); } .gmh_hs_pri.sel-emergency { background: #fef2f2; border-color: var(--gmh-danger); color: var(--gmh-danger); } .gmh_hs_ticket_list { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; } .gmh_hs_ticket_item { background: #fff; border: 1px solid var(--gmh-border); border-radius: 9px; padding: 11px 14px; display: flex; align-items: center; gap: 12px; } .gmh_hs_tick_status { font-size: .72rem; font-weight: 800; padding: 3px 9px; border-radius: 999px; white-space: nowrap; } .gmh_hs_tick_open { background: #fef3c7; color: #92400e; } .gmh_hs_tick_progress { background: #dbeafe; color: #1e40af; } .gmh_hs_tick_resolved { background: #dcfce7; color: #15803d; } .gmh_hs_toast { display: none; margin-top: 10px; background: #dcfce7; border: 1px solid #86efac; color: #14532d; border-radius: 8px; padding: 10px 14px; font-size: .85rem; font-weight: 700; align-items: center; gap: 8px; } .gmh_hs_toast.show { display: flex; } .gmh_hs_fhir_panel { background: #0f172a; color: #94a3b8; border-radius: 10px; padding: 14px; font-family: Consolas, 'Courier New', monospace; font-size: .78rem; line-height: 1.8; overflow: auto; max-height: 280px; margin-top: 10px; } /* ── 25. RESPONSIVE ─────────────────────────────────────────── */ @media (max-width: 640px) { .patient-meta { font-size: 0.78rem; } .section-content { padding-left: 16px; } .mini-grid { grid-template-columns: 1fr; } } /* ── 26. PRINT ──────────────────────────────────────────────── */ @media print { .encounter-strip button, .expand-btn, .modal-overlay, .btn, .sb-chevron, .gh-chevron { display: none !important; } body { background: #fff !important; color: #000 !important; } .patient-banner{ position: static !important; background: #fff !important; color: #000 !important; border-bottom: 2px solid #000 !important; } .section-content { display: block !important; } .group-block.collapsed .section-list{ display: block !important; } } /* ── 27. IPAD / PDF OVERFLOW + PRINT SAFETY OVERRIDES ───────── Added only as end-of-file overrides. Purpose: - Prevent iPad/WebKit from clipping docket to half screen. - Prevent PDF/print from being limited by hidden/scroll containers. - Do not change normal desktop layout. ───────────────────────────────────────────────────────────── */ /* iPad / tablet scrolling safety */ @media screen and (max-width: 1180px) { html, body { min-height: 100%; height: auto !important; overflow-x: hidden !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch; } .edi-container, .timeline-strip, #ppp-panel { max-width: 100%; } .modal-overlay.open { align-items: flex-start !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch; } .modal-window { height: auto !important; max-height: none !important; min-height: 0 !important; } .modal-body { overflow-y: auto !important; -webkit-overflow-scrolling: touch; } } /* PDF / browser print safety */ @page { size: auto; margin: 0.45in; } @media print { html, body { width: auto !important; height: auto !important; min-height: 0 !important; overflow: visible !important; background: #fff !important; color: #000 !important; } #gmh-sticky-header { position: static !important; top: auto !important; z-index: auto !important; box-shadow: none !important; } .edi-container, .timeline-strip, #ppp-panel, .ppp-card, .group-block, .section-list, .section-card, .section-content, .modal-window, .modal-body, .gmh_hs_form { height: auto !important; max-height: none !important; overflow: visible !important; } .section-list, .section-card { overflow: visible !important; } .section-content { display: block !important; padding-left: 0 !important; animation: none !important; } .section-card, .group-block, .mini-card, .signed-box, .gmh_hs_form { break-inside: avoid; page-break-inside: avoid; } .progress-bar, .timeline-strip, #ppp-panel, .action-row, .btn, .expand-btn, .modal-overlay, .sb-chevron, .gh-chevron { display: none !important; } .patient-banner, .encounter-strip { position: static !important; color: #000 !important; background: #fff !important; border-bottom: 1px solid #000 !important; } .group-header { color: #000 !important; background: #fff !important; border: 1px solid #000 !important; } .section-btn { color: #000 !important; background: #fff !important; border-bottom: 1px solid #ccc !important; } .group-block.collapsed .section-list { display: block !important; } } /* ═══════════════════════════════════════════════════════ INLINE ROW ICON COLOR UPGRADE — 3D commercial grade Only changes the small object-row icons. ═══════════════════════════════════════════════════════ */ .docket-sec-btn .dsb-icon{ width:28px !important; height:28px !important; min-width:28px !important; border-radius:10px !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; position:relative !important; overflow:hidden !important; font-size:.9rem !important; background:linear-gradient(145deg,#ffffff 0%,#edf6ff 44%,#d8e9f9 100%) !important; color:#0f3f5d !important; border:1px solid rgba(255,255,255,.92) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.95), inset 0 -2px 4px rgba(15,47,69,.10), 0 5px 10px rgba(15,47,69,.16) !important; text-shadow:0 1px 0 rgba(255,255,255,.7) !important; } .docket-sec-btn .dsb-icon:before{ content:''; position:absolute; left:4px; top:3px; width:15px; height:8px; border-radius:999px; background:rgba(255,255,255,.58); transform:rotate(-24deg); pointer-events:none; } .docket-sec-btn .dsb-icon i{ position:relative; z-index:2; filter:drop-shadow(0 1px 1px rgba(15,47,69,.18)); } .docket-section[data-objects-code="ENCOUNTER"] .dsb-icon{background:linear-gradient(145deg,#eff6ff,#dbeafe 48%,#bfdbfe) !important;color:#1d4ed8 !important;} .docket-section[data-objects-code="TRIAGE"] .dsb-icon{background:linear-gradient(145deg,#fff1f2,#ffe4e6 48%,#fecdd3) !important;color:#be123c !important;} .docket-section[data-objects-code="VITALS"] .dsb-icon{background:linear-gradient(145deg,#f0fdf4,#dcfce7 48%,#bbf7d0) !important;color:#15803d !important;} .docket-section[data-objects-code="DIAGNOSIS"] .dsb-icon{background:linear-gradient(145deg,#ecfeff,#cffafe 48%,#a5f3fc) !important;color:#0e7490 !important;} .docket-section[data-objects-code="LAB_ORDER"] .dsb-icon, .docket-section[data-objects-code="LAB_RESULT"] .dsb-icon{background:linear-gradient(145deg,#f5f3ff,#ede9fe 48%,#ddd6fe) !important;color:#6d28d9 !important;} .docket-section[data-objects-code="RADIOLOGY_ORDER"] .dsb-icon{background:linear-gradient(145deg,#f8fafc,#e2e8f0 48%,#cbd5e1) !important;color:#334155 !important;} .docket-section[data-objects-code="MAR"] .dsb-icon, .docket-section[data-objects-code="MED_RECON"] .dsb-icon{background:linear-gradient(145deg,#fff7ed,#ffedd5 48%,#fed7aa) !important;color:#c2410c !important;} .docket-section[data-objects-code="PROGRESS_NOTE"] .dsb-icon, .docket-section[data-objects-code="CLINICAL_NOTE"] .dsb-icon{background:linear-gradient(145deg,#fffbeb,#fef3c7 48%,#fde68a) !important;color:#a16207 !important;} .docket-section[data-objects-code="CARE_PLAN"] .dsb-icon, .docket-section[data-objects-code="QUALITY_MEASURES"] .dsb-icon{background:linear-gradient(145deg,#eef2ff,#e0e7ff 48%,#c7d2fe) !important;color:#4338ca !important;} .docket-section[data-objects-code="ALERTS"] .dsb-icon{background:linear-gradient(145deg,#fff7ed,#ffedd5 48%,#fdba74) !important;color:#ea580c !important;} .docket-section[data-objects-code="INTERFACES"] .dsb-icon{background:linear-gradient(145deg,#f0fdfa,#ccfbf1 48%,#99f6e4) !important;color:#0f766e !important;} .docket-section[data-objects-code="DOCUMENTS"] .dsb-icon, .docket-section[data-objects-code="IMAGES"] .dsb-icon, .docket-section[data-objects-code="EXTERNAL_RECORDS"] .dsb-icon{background:linear-gradient(145deg,#f0f9ff,#e0f2fe 48%,#bae6fd) !important;color:#0369a1 !important;} .docket-section[data-objects-code="DISCHARGE"] .dsb-icon{background:linear-gradient(145deg,#fef2f2,#fee2e2 48%,#fecaca) !important;color:#b91c1c !important;} .docket-section[data-objects-code="ENV_SERVICES"] .dsb-icon, .docket-section[data-objects-code="BED_MANAGEMENT"] .dsb-icon, .docket-section[data-objects-code="NUTRITION"] .dsb-icon, .docket-section[data-objects-code="TRANSPORT"] .dsb-icon, .docket-section[data-objects-code="SECURITY"] .dsb-icon, .docket-section[data-objects-code="HELP_DESK"] .dsb-icon{background:linear-gradient(145deg,#f1f5f9,#e2e8f0 48%,#cbd5e1) !important;color:#475569 !important;} /* ═══════════════════════════════════════════════════════ SURGICAL CLARITY FIX — Patient Locator / My Patients List only Keeps the inline panels crisp; no layout or function changes. ═══════════════════════════════════════════════════════ */ #ediInlinePanelHost, #ediInlinePanelHost *{ opacity:1 !important; filter:none !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; text-shadow:none !important; } #ediInlinePanelHost{ background:#ffffff !important; color:#0f172a !important; isolation:isolate !important; position:relative !important; z-index:41 !important; -webkit-font-smoothing:antialiased !important; text-rendering:geometricPrecision !important; } #ediInlinePanelHost input, #ediInlinePanelHost table, #ediInlinePanelHost td, #ediInlinePanelHost th, #ediInlinePanelHost label, #ediInlinePanelHost span, #ediInlinePanelHost strong{ color:inherit; -webkit-font-smoothing:antialiased !important; text-rendering:geometricPrecision !important; } /* ════════════════════════════════════════════════════════════════ MIGRATED FROM patient_docket.html inline