/* 
    Most customizations should be in the presets defined in /src/assets/presets, but there were some things
    that the theme system doesn't seem to apply to.  This is for global CSS to address those things.
*/
.p-button {
    margin-right: 0.5rem;
    /* These rules were necessary to prevent the "loading" state from shifting the button's alignment */
    vertical-align: middle; /* Ensure vertical alignment */
    display: inline-flex; /* Use inline-flex to align the spinner properly */
    align-items: center; /* Center the content vertically */
    justify-content: center; /* Center the content horizontally */
    height: 100%; /* Ensure the button maintains its height */
}

.p-datatable-table th.numeric-content, .p-datatable-table td.numeric-content {
    text-align: right;
}

.p-datatable-header-cell.numeric-content .p-datatable-column-header-content {
    display: flex;
    justify-content: end;
}

.p-datatable-header-cell {
    background-color: rgb(34, 34, 34);
    color: white;
    font-weight: normal;
}

.p-datatable-column-title {
    font-weight: normal;
}
/* I couldn't figure out how to do this with the preset, though it certainly can be done.  The docs may need work, but probably I just don't understand the ones that
   are there well enough.  Don't have time to experiment right now.
*/
.p-datatable-tbody > tr > td {
    border: none;
}

.p-dialog-header {
    padding: 5px 0 5px 10px;
    background-color: rgb(34, 34, 34);
    border-radius: 12px 12px 0 0;
    color: white;
    font-weight: normal;
}

.p-dialog-title {
    font-weight: normal;
}

.p-dialog-content {
    background-color: rgb(238, 238, 238);
    border-radius: 0 0 12px 12px;
    color: rgb(34, 34, 34);
    padding-top: 0.5em;
}

/* The bottom corners above are for a dialog whose content is the last thing in it.  When there is a footer,
   the footer rounds off the dialog instead, and leaving the content rounded as well notches the seam between
   the two - the panel shows through the curve at each corner. */
.p-dialog-content:has(+ .p-dialog-footer) {
    border-end-start-radius: 0;
    border-end-end-radius: 0;
}

/* The footer takes the same background as .p-dialog-content above so the two read as one panel rather than
   the theme's tinted footer, and it rounds off the dialog because it is the last element in it.  That colour
   is a literal, not a design token, and has to be changed together with the content's.
   justify-content overrides PrimeVue's flex-end to put the buttons on the left. */
.p-dialog-footer {
    background-color: rgb(238, 238, 238);
    border-radius: 0 0 12px 12px;
    color: rgb(34, 34, 34);
    padding-top: 0.5em;
    justify-content: flex-start !important;
}

.p-tabs {
    margin-top: 1em;
    padding: 15px;
    background-color: rgb(206, 206, 206);
}