/* Shared layout rules for CmsPageList and CmsPageEditor.
   Kept global (not *.razor.css) because Blazor CSS isolation scopes styles per component,
   and these classes are used by both admin pages. */

.cms-admin-page {
    padding: 1.5rem;
    max-width: 1200px;
    margin: 0 auto;
}

.cms-admin-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

/* BitDatePicker (only used here, in the announcement block's start/end date fields) renders
   its input chrome and calendar popup on --bit-clr-bg-pri, which the dark app theme sets to a
   near-black value - unreadable paired with the equally dark text. The popup callout can
   portal to <body> instead of staying nested under .cms-admin-page (Fluent-style collision
   avoidance), so the fix targets the component's own classes globally rather than relying on
   DOM nesting, to match the light Bootstrap form-controls around it. */
.bit-dtp-icn {
    background-color: var(--cms-datepicker-bg, #ffffff);
    border-color: var(--cms-datepicker-border, #ced4da);
}

.bit-dtp-cac {
    background-color: var(--cms-datepicker-bg, #ffffff);
}

.bit-dtp-dbt:hover {
    background-color: var(--cms-datepicker-hover-bg, #f1f3f5);
}

.bit-dtp-dbt:active {
    background-color: var(--cms-datepicker-active-bg, #e9ecef);
}

/* BitDialog (used for the CMS page delete confirmation) renders its title/message on
   --bit-clr-bg-pri, which the dark app theme sets to a dark value, while --bit-clr-fg-pri/
   --bit-clr-fg-sec keep the light-theme's near-black/dark-gray text colors - unreadable
   paired with the dark background. The dialog portals to <body> (see the BitDatePicker
   comment above for why), so the fix targets the component's own classes globally. */
.bit-dlg-ttl {
    color: var(--cms-dialog-title-fg, #f6f7f8);
}

.bit-dlg-msg {
    color: var(--cms-dialog-message-fg, #adb5bf);
}