/* ===================================================================== PROF component layer — canonical styling for shared UI primitives. Single source of truth for cross-app consistency of BUTTONS, INPUTS, CARDS and PAGINATION. Loaded LAST in every base template so it wins the cascade over: - paper-dashboard.css (.btn 20px, .btn-lg 50px, .btn-sm 26px) - incodeks style.css (.btn / .btn-sutro / .btn-primary 8px !important) - legacy sutro.css / stores.css button + card rules HOW TO RETUNE THE WHOLE APP: change the tokens in :root below. Every button radius, input radius, card radius, etc. keys off these — a one-line edit here restyles every page. Per-role exceptions (e.g. the search pill) are defined once, further down, and also token-driven. Scope: main portals + incodeks_inrec internal pages. NOT applied to WAR/print documents or email templates (those use inline hex for PDF / email-client compatibility and are intentionally excluded). ===================================================================== */ :root { /* ---- Shape tokens (radius) ---- */ --prof-btn-radius: 4px; /* standard actions: Add / Edit / View / Submit / Save / Delete / Cancel */ --prof-btn-radius-pill: 20px; /* search + other explicit pill actions */ --prof-input-radius: 4px; /* text inputs, selects, textareas */ --prof-card-radius: 6px; /* cards / panels */ /* ---- Surface tokens ---- */ --prof-card-border: #e6e9f0; --prof-card-shadow: 0 1px 3px rgba(16, 24, 40, 0.08); --prof-modal-radius: 14px; /* modal dialog corners (from PRF-1145 design) */ --prof-modal-inner-radius: 8px; /* inputs/buttons inside modals */ /* ---- Pagination tokens — mirror the dashboard .ptd-page-btn exactly ---- */ --prof-page-radius: 8px; --prof-page-size: 32px; /* min box width & height (dashboard = 32px) */ --prof-page-pad: 0 9px; --prof-page-gap: 3px; /* 3px each side = 6px between boxes (dashboard gap) */ --prof-page-font: 12.5px; --prof-page-color: #46536b; /* --ink-2: page-number text */ --prof-page-border: #e4ebf4; /* --line */ --prof-page-hover-bg: #eef2f8; /* --line-soft */ --prof-page-hover-border: #cfdcef; --prof-page-disabled: #8493a8; /* --ink-3 */ } /* ===================================================================== BUTTONS --------------------------------------------------------------------- One canonical radius for every standard action button, regardless of which theme/class it happens to use. !important + high specificity are required here purely to defeat the pre-existing !important radius rules in incodeks style.css and the hard-coded pill radii in paper-dashboard. Circular icon buttons (.btn-round / .rounded-circle) and intentional pills (.rounded-pill / .btn-search / .btn-pill) are excluded so we don't square off things that are meant to be round. ===================================================================== */ .btn:not(.btn-round):not(.rounded-circle):not(.rounded-pill):not(.btn-search):not(.btn-pill), .btn-sutro, .btn-sutro-seconday, .btn-teal, .btn-white, .btn-red { border-radius: var(--prof-btn-radius) !important; } /* Search + explicit pill actions keep the rounded look (per design: the search control is a pill, standard actions are not). */ .btn-search, .btn.btn-search, .btn-pill { border-radius: var(--prof-btn-radius-pill) !important; } /* Filled brand buttons must carry their own border colour — otherwise they inherit paper-dashboard's cream .btn border (#F1EAE0) as a stray outline. */ .btn-teal { border-color: var(--prof-primary, #003DA5) !important; } .btn-white { border-color: var(--prof-primary, #003DA5) !important; } /* ===================================================================== INPUTS --------------------------------------------------------------------- Consistent corner radius on form controls everywhere. Deliberately no !important so third-party widgets (select2, flatpickr, intlTelInput) keep their own control styling. The PROF blue border on body.store / Sutro Central surfaces still comes from prof-theme.css; this only normalises the radius to match buttons. ===================================================================== */ .form-control, select.form-control, textarea.form-control { border-radius: var(--prof-input-radius); } /* ===================================================================== CARDS --------------------------------------------------------------------- One canonical card shell (Bootstrap .card). Specialised card systems (.ptd-card dashboard tiles, .chemical-form-card, .treatment-form-card) are separate classes and are NOT touched here — they'll be folded into this system in the per-portal rollout. ===================================================================== */ .card { border-radius: var(--prof-card-radius); border: 1px solid var(--prof-card-border); box-shadow: var(--prof-card-shadow); } /* ===================================================================== PAGINATION — one canonical "boxed / separated" design everywhere. --------------------------------------------------------------------- Two markup styles exist in the app and BOTH are covered here so every list page looks identical to the reference design (rounded boxes with a light border + gap, solid PROF-blue active page): A) Bootstrap: