/* * Plan Mappings detail (PD-29427) -- matches the design mockup's #v-planedit section * (link_formulary_part1-3_mockups.html, lines 463-547). Reuses formularies.css's * `.formulary-badge`/`.formulary-btn` primitives; this file adds only what that * section introduces with no formularies-index equivalent: the two-column layout, * the key/value plan-details list, the select2 picker sizing, the mapping-history log * list, and the formulary warning box. Scoped under `.plan-mappings` -- the layout * emits `mappings`/`mappings-show` on for this controller/action * (Plans::MappingsController#show), so a same-named class here would leak through * that ancestor instead of scoping to it (mirrors plans.css / formularies.css's * identical convention). Colors are the mockup's literal hex, commented with its * var name. */ /* Same white-panel neutralization as plans.css / formularies.css -- see either file's * identical comment for why `.main-content` is in the selector for specificity. */ body.mappings-show .main-content { background-color: #f2f3f6; /* --bg */ } body.mappings-show .main-content .site-contents { background-color: transparent; padding: 0; border-radius: 0; overflow-x: hidden; } .plan-mappings h1 { font-size: 22px; font-weight: 800; margin-bottom: 4px; } .plan-mappings .sub { color: #6b7183; /* --muted */ font-size: 12px; margin-bottom: 14px; } .plan-mappings .plink { color: #8b2fa8; /* --link */ font-weight: 600; text-decoration: none; } .plan-mappings .plink:hover { text-decoration: underline; } .plan-mappings .card { background: #fff; /* --card */ border-radius: 12px; box-shadow: 0 1px 3px rgba(20, 24, 40, .07); padding: 20px 22px; margin-bottom: 16px; } .plan-mappings .mini { font-size: 10.5px; color: #6b7183; /* --muted */ margin-bottom: 9px; } /* Two-column layout: read-only plan details + ancestry (left), editable Network * mapping + read-only Formulary mapping (right). Collapses to one column below the * mockup's own 1050px breakpoint. */ .plan-mappings .two { display: grid; grid-template-columns: 1fr 420px; gap: 16px; align-items: start; } @media (max-width: 1050px) { .plan-mappings .two { grid-template-columns: 1fr; } } /* Plan details key/value list. */ /* Mockup: h3{font-size:13.5px;font-weight:800;margin-bottom:10px}. Without an explicit rule the card headings inherit the app's global heading scale, which is larger. */ .plan-mappings .card h3 { font-size: 13.5px; font-weight: 800; margin-bottom: 10px; } .plan-mappings .kv { display: grid; grid-template-columns: 160px 1fr; row-gap: 8px; column-gap: 12px; font-size: 12.5px; /* Mockup body is line-height:1.45; the app's global value is looser, which shows up as extra space between detail rows even with the row-gap matched. */ line-height: 1.45; } /* The mockup carries a global `*{margin:0;padding:0}` reset that this app does not, so without these the

's own browser margins stack on top of .kv's grid row-gap and dd's default 40px indent fights the two-column grid. Scoped to .kv rather than added app-wide -- a global reset here would reflow every other screen. */ .plan-mappings .kv, .plan-mappings .kv dt, .plan-mappings .kv dd { margin: 0; } .plan-mappings .kv dt { color: #6b7183; /* --muted */ font-weight: 600; } .plan-mappings .kv dd { font-weight: 500; } .plan-mappings table { width: 100%; border-collapse: collapse; } .plan-mappings th { font-size: 11px; font-weight: 700; color: #8b2fa8; /* --link */ text-align: left; padding: 8px 9px; border-bottom: 2px solid #e3e5ec; /* --line */ white-space: nowrap; } .plan-mappings td { padding: 9px; border-bottom: 1px solid #e3e5ec; /* --line */ vertical-align: middle; font-size: 12.3px; } .plan-mappings .fld { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; } .plan-mappings .fld label { font-size: 11px; font-weight: 700; color: #1c2130; /* --ink */ } /* select2 in ajax mode is the picker on both mapping cards. Only sizing is overridden -- select2 ships its own dropdown and highlight styling, and matching that to the hand-rolled combobox this replaced would be re-implementing what we just deleted. */ .plan-mappings .select2-container { width: 100% !important; min-width: 0; } .plan-mappings .select2-container .select2-selection--single { height: auto; padding: 3px 0; font-size: 12px; font-weight: 600; border: 1px solid #cfd3de; border-radius: 8px; } .plan-mappings .btn { font-size: 12.5px; font-weight: 700; background: #7d219c; /* --purple */ color: #fff; border: none; border-radius: 7px; padding: 8px 16px; cursor: pointer; white-space: nowrap; } .plan-mappings .btn:hover { background: #651b7e; /* --purple-dk */ } .plan-mappings .btn.sm { padding: 5px 11px; font-size: 11.5px; } .plan-mappings .btn:disabled { opacity: .45; cursor: not-allowed; } .plan-mappings .warnbox { background: #fdf1d6; /* --warn-bg */ border: 1px solid #ecd9a0; border-radius: 8px; padding: 9px 12px; font-size: 11.5px; color: #8a6d00; /* --warn */ margin-top: 10px; } .plan-mappings .loglist { list-style: none; margin-top: 6px; } .plan-mappings .loglist li { font-size: 11px; color: #6b7183; /* --muted */ padding: 6px 0; border-top: 1px dashed #e3e5ec; /* --line */ } .plan-mappings .loglist li b { color: #1c2130; /* --ink */ } .plan-mappings details summary { cursor: pointer; font-size: 12px; font-weight: 700; color: #8b2fa8; /* --link */ }