.p-speeddial-button {
    border-radius: 50%;
}

.p-speeddial-list {
    padding-left: unset;
    margin-bottom: 0rem;
}

.p-dropdown-panel .p-dropdown-items {
    padding-left: unset;
    margin-bottom: 0rem;
    padding: 0.25rem 0.25rem;
}

.p-paginator-element {
    border-radius: 50%;
}

/* Calendar */
.p-calendar .p-inputtext {
    padding-top: unset;
    padding-bottom: unset;
    width: 7.5rem;
}

.p-datepicker table td {
    padding: unset;
}

.p-datepicker .p-datepicker-header {
    padding: unset;
}

.p-component {
    /* uncomment the following to prevent font family being overridden */
    /* font-family: unset; */
}

.p-tooltip-text {
    padding: 0.5rem 0.75rem;
    text-align: center;
    text-wrap: balance;
}

.p-tooltip-text.small {
    font-size: 0.875em;
    padding: 0.4rem 0.65rem;
}

.p-tooltip-text.xsmall {
    font-size: 0.8em;
    padding: 0.35rem 0.55rem;
}

/* Make scrollable data-tables appear scrollable when overflowing */
/* When selectionMode is "multiple", include the checkbox column for proper styling. */
/* Omitting it causes background style issues 🤷‍♂️ */
.visually-scrollable .p-datatable-wrapper {
    overflow-y: scroll;
    background-color: white;
}

.visually-scrollable.p-datatable .p-datatable-tbody>tr:not(.p-highlight) {
    background: inherit;
}

/* Draw vertical overflow cues above the table cells so they remain visible across both ordinary and frozen columns.
   Negative margins prevent these sticky overlays from adding height to the table's scrollable content. */
.visually-scrollable .p-datatable-wrapper::before,
.visually-scrollable .p-datatable-wrapper::after {
    content: "";
    position: sticky;
    left: 0;
    z-index: 3;
    display: block;
    width: 100%;
    height: 0.875rem;
    pointer-events: none;
    opacity: 0;
}

.visually-scrollable .p-datatable-wrapper::before {
    top: var(--datatable-scroll-shadow-top, 0);
    margin-bottom: -0.875rem;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.2), transparent);
}

.visually-scrollable .p-datatable-wrapper::after {
    bottom: 0;
    margin-top: -0.875rem;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.2), transparent);
}

.visually-scrollable .p-datatable-wrapper.datatable-can-scroll-up::before,
.visually-scrollable .p-datatable-wrapper.datatable-can-scroll-down::after {
    opacity: 1;
}

/* Frozen cells remain opaque because ordinary columns move underneath them during horizontal scrolling. */
.visually-scrollable.p-datatable .p-datatable-tbody > tr:not(.p-highlight) > .p-frozen-column {
    background: var(--datatable-frozen-background, var(--surface-card, white));
}

.visually-scrollable.p-datatable .p-datatable-tbody > tr.bg-faded-secondary > .p-frozen-column {
    --datatable-frozen-background: color-mix(in srgb, var(--bs-secondary) 15%, white);
}

.visually-scrollable.p-datatable .p-datatable-tbody > tr.bg-faded-danger > .p-frozen-column {
    --datatable-frozen-background: color-mix(in srgb, var(--bs-danger) 15%, white);
}

/* A frozen selection column stays in place while the other columns move underneath it. Keep both its header and body
   cells opaque so row content cannot show through. Automatic table layout can expand a fixed-width column when spare
   room is available; a one-percent width keeps this checkbox-only column at its minimum useful size instead. */
.p-datatable .p-datatable-thead > tr > th.p-frozen-column:has(.p-checkbox),
.p-datatable .p-datatable-tbody > tr > td.p-selection-column.p-frozen-column {
    box-sizing: border-box;
    width: 1% !important;
    max-width: 3rem !important;
    white-space: nowrap;
}

.p-datatable .p-datatable-thead > tr > th.p-frozen-column:has(.p-checkbox) {
    background: var(--surface-section, #f9fafb);
}

.p-datatable .p-datatable-tbody > tr > td.p-selection-column.p-frozen-column {
    background: var(--datatable-frozen-background, var(--surface-card, white));
}

/* PrimeVue positions frozen body cells but does not raise their stacking order. Without this, moving cells can paint
   above the otherwise opaque frozen block while the user scrolls horizontally. The sticky table header remains higher. */
.p-datatable-scrollable .p-datatable-tbody > tr > .p-frozen-column {
    z-index: 1;
}

/* Match horizontal overflow cues to the table's top and bottom shadows. The overlays belong to the DataTable root so
   they remain fixed over the visible wrapper while its columns move underneath. global-scripts.js supplies the wrapper
   bounds because PrimeVue tables can also contain toolbars and paginators that must not be covered by these shadows. */
.p-datatable.datatable-cue-left-outer,
.p-datatable.datatable-cue-right-outer {
    position: relative;
}

.p-datatable.datatable-cue-left-outer::before,
.p-datatable.datatable-cue-right-outer::after {
    content: "";
    position: absolute;
    top: var(--datatable-scroll-wrapper-top, 0);
    z-index: 3;
    width: 0.875rem;
    height: var(--datatable-scroll-wrapper-height, 100%);
    pointer-events: none;
}

.p-datatable.datatable-cue-left-outer::before {
    left: var(--datatable-scroll-wrapper-left, 0);
    background: linear-gradient(to right, rgba(0, 0, 0, 0.2), transparent);
}

.p-datatable.datatable-cue-right-outer::after {
    right: var(--datatable-scroll-wrapper-right, 0);
    background: linear-gradient(to left, rgba(0, 0, 0, 0.2), transparent);
}

/* An outer shadow would sit behind a column that PrimeVue deliberately keeps frozen. Put the cue at the boundary where
   moving columns pass underneath the frozen block, leaving pinned names, selections, and actions fully legible. */
.p-datatable-wrapper.datatable-can-scroll-left .datatable-frozen-left-edge {
    box-shadow: 0.75rem 0 0.75rem -0.75rem rgba(0, 0, 0, 0.45);
}

.p-datatable-wrapper.datatable-can-scroll-right .datatable-frozen-right-edge {
    box-shadow: -0.75rem 0 0.75rem -0.75rem rgba(0, 0, 0, 0.45);
}

/* To fix issue where row-checkbox underneath column-header-checkbox gets selected */
.p-datatable-thead {
    z-index: 2;
}

/* Ensure visible top border on header when gridlines are enabled */
.p-datatable.p-datatable-gridlines .p-datatable-thead>tr:first-child>th {
    border-top: 1px solid var(--surface-border) !important;
}

/* Reinforce gridline borders where Bootstrap utilities may interfere */
.p-datatable.p-datatable-gridlines .p-datatable-thead>tr>th,
.p-datatable.p-datatable-gridlines .p-datatable-tbody>tr>td {
    border-right: 1px solid var(--surface-border) !important;
    border-bottom: 1px solid var(--surface-border) !important;
}

.p-datatable.p-datatable-gridlines .p-datatable-thead>tr>th:first-child,
.p-datatable.p-datatable-gridlines .p-datatable-tbody>tr>td:first-child {
    border-left: 1px solid var(--surface-border) !important;
}

/* PrimeVue ContextMenu spacing and link styling normalisation */
.p-contextmenu .p-submenu-list {
    margin: 0;
    padding: 0.2rem 0;
}

.p-contextmenu .p-menuitem-link {
    padding: 0.35rem 0.6rem;
    text-decoration: none;
}

.p-contextmenu .p-menuitem-text,
.p-contextmenu .p-menuitem-link:hover,
.p-contextmenu .p-menuitem-link:focus {
    text-decoration: none;
}

.p-contextmenu-root-list {
    margin: 0.2rem;
    padding: 0.2rem;
}

/* Align PrimeVue AutoComplete with Bootstrap small form controls */
.p-autocomplete,
.p-autocomplete .p-inputtext,
.p-autocomplete .p-autocomplete-dropdown {
    font-family: inherit;
    font-size: 0.875rem;
    line-height: 1.5;
}

.p-autocomplete-panel.p-component,
.p-autocomplete-panel .p-autocomplete-item {
    font-family: inherit;
    font-size: 0.875rem;
    line-height: 1.5;
}

.p-autocomplete {
    --sw-autocomplete-control-height: calc(1.3125rem + 0.5rem + 2px);
    align-items: stretch;
}

.p-autocomplete .p-inputtext {
    line-height: 1.5;
    padding: 0.25rem 0.5rem;
    height: var(--sw-autocomplete-control-height);
    min-height: var(--sw-autocomplete-control-height);
    box-sizing: border-box;
    border-color: var(--bs-border-color, #dee2e6);
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.p-autocomplete .p-autocomplete-dropdown {
    width: 1.75rem;
    min-width: 1.75rem;
    padding: 0;
    height: var(--sw-autocomplete-control-height);
    min-height: var(--sw-autocomplete-control-height);
    box-sizing: border-box;
    background-color: var(--bs-body-bg, #fff);
    color: var(--bs-secondary-color, #6c757d);
    border-color: var(--bs-border-color, #dee2e6);
    border-left: 0;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-top-right-radius: var(--bs-border-radius-sm, 0.25rem);
    border-bottom-right-radius: var(--bs-border-radius-sm, 0.25rem);
}

.p-autocomplete .p-autocomplete-dropdown .p-button-icon {
    margin: 0 !important;
}

.p-autocomplete-panel {
    /* Overlay panel is mounted outside the table row, so we set Bootstrap-sm metrics directly. */
    font-size: 0.875rem;
}

.p-autocomplete:focus-within .p-inputtext,
.p-autocomplete:focus-within .p-autocomplete-dropdown {
    border-color: #86b7fe;
}

.p-autocomplete:focus-within .p-inputtext {
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

/* Reduce autocomplete option spacing so long lists are easier to scan */
.p-autocomplete-panel .p-autocomplete-items {
    margin: 0;
    padding: 0.2rem 0;
}

.p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item {
    padding: 0.35rem 0.75rem;
    line-height: 1.35;
}

/* Align PrimeVue CascadeSelect with Bootstrap small form controls */
.p-cascadeselect,
.p-cascadeselect .p-cascadeselect-label,
.p-cascadeselect .p-cascadeselect-trigger {
    font-family: inherit;
    font-size: 0.875rem;
    line-height: 1.5;
}

.p-cascadeselect-panel.p-component,
.p-cascadeselect-panel .p-cascadeselect-item {
    font-family: inherit;
    font-size: 0.875rem;
    line-height: 1.5;
}

.p-cascadeselect {
    --sw-cascadeselect-control-height: calc(1.3125rem + 0.5rem + 2px);
    min-height: var(--sw-cascadeselect-control-height);
    box-sizing: border-box;
}

.p-cascadeselect .p-cascadeselect-label {
    display: flex;
    align-items: center;
    min-height: var(--sw-cascadeselect-control-height);
    padding: 0.25rem 0.5rem;
    box-sizing: border-box;
}

.p-cascadeselect .p-cascadeselect-trigger {
    width: 1.75rem;
    min-width: 1.75rem;
}

.p-cascadeselect-panel .p-cascadeselect-items,
.p-cascadeselect-panel .p-cascadeselect-sublist {
    margin: 0;
    padding: 0.2rem 0;
}

.p-cascadeselect-panel .p-cascadeselect-item-content {
    padding: 0.35rem 0.75rem;
    line-height: 1.35;
}

/* Keep PrimeVue close CTAs visually consistent as rounded controls across overlays/components. */
.p-dialog .p-dialog-header .p-dialog-header-icon,
.p-sidebar .p-sidebar-header .p-sidebar-icon,
.p-overlaypanel .p-overlaypanel-close,
.p-toast .p-toast-message .p-toast-icon-close,
.p-message .p-message-wrapper .p-message-close {
    border-radius: 9999px;
}

/* Lara’s 70% toast surfaces lose legibility over page content. Use an 80% midpoint to retain some context
   behind a toast while keeping its copy, icons, and dismiss control clearly contrasted. */
.p-toast .p-toast-message {
    box-shadow: 0 0.5rem 1rem rgba(33, 37, 41, 0.18);
}

.p-toast .p-toast-message.p-toast-message-success {
    background: rgba(183, 247, 209, 0.8);
    border-color: #83e9ae;
    color: #212529;
}

.p-toast .p-toast-message.p-toast-message-info {
    background: rgba(207, 226, 255, 0.8);
    border-color: #b6d4fe;
    color: #084298;
}

.p-toast .p-toast-message.p-toast-message-warn {
    background: rgba(255, 243, 205, 0.8);
    border-color: #ffecb5;
    color: #664d03;
}

.p-toast .p-toast-message.p-toast-message-error {
    background: rgba(255, 217, 220, 0.8);
    border-color: #ffb8c0;
    color: #212529;
}

.p-toast .p-toast-message .p-toast-icon-close {
    color: inherit;
}

/* Optional toast emphasis: add p-toast-sliding-outline via contentStyleClass or styleClass. */
.p-toast .p-toast-message.p-toast-sliding-outline .p-toast-message-content,
.p-toast .p-toast-message .p-toast-message-content.p-toast-sliding-outline {
    isolation: isolate;
    overflow: hidden;
    position: relative;
}

.p-toast .p-toast-message.p-toast-sliding-outline .p-toast-message-content::before,
.p-toast .p-toast-message .p-toast-message-content.p-toast-sliding-outline::before {
    animation: p-toast-sliding-outline-runner 1.2s linear infinite;
    background: conic-gradient(
        from var(--p-toast-sliding-outline-angle),
        transparent 0deg 250deg,
        currentColor 275deg 315deg,
        transparent 340deg 360deg
    );
    border-radius: inherit;
    content: "";
    inset: 0.2rem;
    padding: 2px;
    pointer-events: none;
    position: absolute;
    z-index: 0;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}

.p-toast .p-toast-message.p-toast-sliding-outline .p-toast-message-content > *,
.p-toast .p-toast-message .p-toast-message-content.p-toast-sliding-outline > * {
    position: relative;
    z-index: 1;
}

@property --p-toast-sliding-outline-angle {
    syntax: "<angle>";
    inherits: false;
    initial-value: 0deg;
}

@keyframes p-toast-sliding-outline-runner {
    to {
        --p-toast-sliding-outline-angle: 360deg;
    }
}

/* Toasts enter from the screen edge by default across the app. */
.p-toast .p-toast-message-enter-from,
.p-toast.p-toast-slide-from-right .p-toast-message-enter-from {
    opacity: 0;
    transform: translateX(100%);
}

.p-toast.p-toast-slide-from-left .p-toast-message-enter-from {
    opacity: 0;
    transform: translateX(-100%);
}

.p-toast.p-toast-slide-up .p-toast-message-enter-from {
    opacity: 0;
    transform: translateY(50%);
}

.p-toast .p-toast-message-enter-active,
.p-toast.p-toast-slide-from-right .p-toast-message-enter-active,
.p-toast.p-toast-slide-from-left .p-toast-message-enter-active,
.p-toast.p-toast-slide-up .p-toast-message-enter-active {
    transition: transform 0.3s ease-out, opacity 0.3s ease-out;
}