/* ========================================================= DentalGenius native DataView safety layer Loaded after the native shell to keep table actions, badges, pagination and Iconify masks constrained after legacy shell removal. ========================================================= */ /* Iconify mask guard: a missing/overridden font-size on .ti icons can create huge solid mask shapes. Keep icons constrained inside cards, tables and modals. */ .dg-tw-stat__icon, .dg-tw-hero__icon, .dg-tw-module__icon, .dg-tw-panel__icon, .dg-tw-empty__icon, .dg-data-view__icon, .dg-data-view__empty-icon, .dg-data-avatar, .dg-action-menu__toggle, .dg-pagination__link, .dg-mobile-record-card__chevron, .dg-tw-modal__icon, .dg-tw-modal__floating-close { overflow: hidden !important; } .dg-tw-stat__icon > .icon-base.ti, .dg-tw-hero__icon > .icon-base.ti, .dg-tw-module__icon > .icon-base.ti, .dg-tw-panel__icon > .icon-base.ti, .dg-tw-empty__icon > .icon-base.ti, .dg-data-view__icon > .icon-base.ti, .dg-data-view__empty-icon > .icon-base.ti, .dg-data-avatar > .icon-base.ti, .dg-action-menu__toggle > .icon-base.ti, .dg-action-menu__item > .icon-base.ti, .dg-pagination__link > .icon-base.ti, .dg-mobile-record-card__chevron > .icon-base.ti, .dg-mobile-record-card__link > .icon-base.ti, .dg-tw-modal__icon > .icon-base.ti, .dg-tw-modal__floating-close > .icon-base.ti, .dg-data-table .icon-base.ti, .dg-mobile-record-list .icon-base.ti { display: inline-block !important; flex: 0 0 1em !important; width: 1em !important; min-width: 1em !important; max-width: 1em !important; height: 1em !important; min-height: 1em !important; max-height: 1em !important; font-size: 1em !important; line-height: 1 !important; vertical-align: -.12em !important; background-color: currentColor !important; } .dg-tw-stat__icon > .icon-base.ti, .dg-data-view__icon > .icon-base.ti, .dg-data-view__empty-icon > .icon-base.ti, .dg-tw-modal__icon > .icon-base.ti { color: inherit !important; } /* DataView shell/table: keep table content inside the card and keep the action column predictable on every module. */ .dg-data-view { width: 100% !important; max-width: 100% !important; min-width: 0 !important; overflow: visible !important; } .dg-data-view__content, .dg-data-view__desktop { width: 100% !important; max-width: 100% !important; min-width: 0 !important; } .dg-data-view__desktop { overflow-x: auto !important; overflow-y: visible !important; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: rgba(0, 174, 189, .72) rgba(7, 27, 77, .06); } .dg-data-table { width: 100% !important; max-width: 100% !important; margin: 0 !important; border-collapse: separate !important; border-spacing: 0 !important; table-layout: fixed !important; } .dg-data-table th, .dg-data-table td { min-width: 0 !important; max-width: 100% !important; overflow: hidden !important; text-overflow: ellipsis; } .dg-data-table td > *, .dg-data-table th > * { min-width: 0 !important; max-width: 100% !important; } .dg-data-table__actions, .dg-data-table__actions-head, .dg-data-table td:last-child, .dg-data-table th:last-child { width: 8.75rem !important; min-width: 8.75rem !important; max-width: 8.75rem !important; overflow: visible !important; text-align: right !important; white-space: nowrap !important; } .dg-data-table__actions > .dg-action-menu { max-width: 100% !important; } /* Native action dropdowns: The legacy dropdown runtime is gone, so make the button/menu fully self-sufficient and safe when it is portaled to . */ .dg-action-menu { position: relative !important; display: inline-flex !important; justify-content: flex-end !important; max-width: 100% !important; overflow: visible !important; z-index: 5; } .dg-action-menu__toggle { position: relative !important; z-index: 6 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: .45rem !important; min-width: 7.1rem !important; max-width: 100% !important; min-height: 2.55rem !important; padding: .58rem .95rem !important; border: 0 !important; border-radius: 999px !important; color: #fff !important; background: linear-gradient(135deg, #00c9bd, #00a7d8) !important; box-shadow: 0 .85rem 1.9rem rgba(0, 201, 189, .22) !important; font-size: .82rem !important; font-weight: 950 !important; line-height: 1 !important; text-decoration: none !important; white-space: nowrap !important; cursor: pointer !important; transform: none !important; } .dg-action-menu__toggle:hover, .dg-action-menu__toggle:focus-visible, .dg-action-menu.show .dg-action-menu__toggle { color: #fff !important; background: linear-gradient(135deg, #071b4d, #00c9bd) !important; box-shadow: 0 1rem 2.2rem rgba(7, 27, 77, .18) !important; } .dg-action-menu__toggle .icon-base.ti { font-size: 1.05rem !important; } .dg-action-menu__dropdown, .dropdown-menu.dg-action-menu__dropdown { display: none !important; min-width: 13.5rem !important; max-width: min(19rem, calc(100vw - 1.5rem)) !important; padding: .55rem !important; margin: .55rem 0 0 !important; border: 1px solid rgba(8, 27, 77, .12) !important; border-radius: 1.15rem !important; background: rgba(255, 255, 255, .98) !important; box-shadow: 0 1.5rem 4rem rgba(7, 26, 70, .18) !important; backdrop-filter: blur(18px) !important; -webkit-backdrop-filter: blur(18px) !important; list-style: none !important; overflow: hidden auto !important; } .dg-action-menu__dropdown.show, .dropdown-menu.dg-action-menu__dropdown.show, .dg-action-menu.show > .dg-action-menu__dropdown { display: grid !important; gap: .25rem !important; } body > .dg-action-menu__dropdown[data-dg-dropdown-portal='1'], body > .dropdown-menu.dg-action-menu__dropdown[data-dg-dropdown-portal='1'] { position: fixed !important; z-index: 70000 !important; margin: 0 !important; } .dg-action-menu__dropdown::before, .dg-action-menu__dropdown::after { content: none !important; display: none !important; } .dg-action-menu__item, .dg-action-menu__dropdown .dropdown-item, .dg-action-menu__dropdown a, .dg-action-menu__dropdown button { display: flex !important; align-items: center !important; justify-content: flex-start !important; gap: .65rem !important; width: 100% !important; min-height: 2.6rem !important; padding: .65rem .75rem !important; border: 0 !important; border-radius: .9rem !important; color: #071b4d !important; background: transparent !important; box-shadow: none !important; font-size: .86rem !important; font-weight: 900 !important; line-height: 1.15 !important; text-align: left !important; text-decoration: none !important; white-space: normal !important; cursor: pointer !important; } .dg-action-menu__item:hover, .dg-action-menu__item:focus-visible, .dg-action-menu__dropdown .dropdown-item:hover, .dg-action-menu__dropdown a:hover, .dg-action-menu__dropdown button:hover { color: #027b83 !important; background: rgba(0, 201, 189, .10) !important; } .dg-action-menu__item.is-danger, .dg-action-menu__item.text-danger, .dg-action-menu__dropdown .text-danger { color: #ef4444 !important; } .dg-action-menu__item.is-danger:hover, .dg-action-menu__item.text-danger:hover, .dg-action-menu__dropdown .text-danger:hover { background: rgba(239, 68, 68, .10) !important; } /* Native pagination: prevent naked page numbers from collapsing into a single long text run and keep controls aligned inside the DataView footer. */ .dg-data-view__footer { width: 100% !important; max-width: 100% !important; overflow: hidden !important; } .dg-pagination-wrap { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: .75rem !important; width: 100% !important; min-width: 0 !important; } .dg-pagination-summary { min-width: 0 !important; color: #7b8aa4 !important; font-size: .84rem !important; font-weight: 820 !important; white-space: nowrap !important; } .dg-pagination, .dg-pagination__numbers { display: flex !important; align-items: center !important; justify-content: flex-end !important; gap: .4rem !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; list-style: none !important; } .dg-pagination__link { display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 auto !important; min-width: 2.35rem !important; height: 2.35rem !important; padding: .45rem .72rem !important; border: 1px solid rgba(15, 36, 72, .07) !important; border-radius: .9rem !important; color: #53637d !important; background: rgba(248, 251, 255, .82) !important; box-shadow: none !important; font-size: .82rem !important; font-weight: 950 !important; line-height: 1 !important; text-decoration: none !important; white-space: nowrap !important; } .dg-pagination__link--wide { min-width: 7.2rem !important; } .dg-pagination__link:hover, .dg-pagination__link:focus-visible { color: #027b83 !important; background: rgba(0, 201, 189, .10) !important; } .dg-pagination__link.is-active { color: #fff !important; border-color: transparent !important; background: linear-gradient(135deg, #00c9bd, #00a7d8) !important; box-shadow: 0 .75rem 1.5rem rgba(0, 201, 189, .20) !important; } .dg-pagination__link.is-disabled { opacity: .42 !important; pointer-events: none !important; } @media (max-width: 991.98px) { .dg-data-view__desktop { display: none !important; } .dg-data-view__mobile { display: block !important; } .dg-data-view__footer { overflow: visible !important; } .dg-pagination-wrap { align-items: stretch !important; flex-direction: column !important; } .dg-pagination { width: 100% !important; justify-content: space-between !important; } .dg-pagination__numbers { display: none !important; } .dg-pagination__link--wide { flex: 1 1 0 !important; min-width: 0 !important; } }