/* pioneer-theme.css — Maps --pioneer-* CSS variables to Bootstrap overrides.
   Scoped under .pioneer-layout so only pages using PioneerLayout are affected.
   Ship as Static Web Asset: <link href="_content/Pioneer.Common.Blazor/pioneer-theme.css" /> */

/* ====== Body / Page Background ====== */
.pioneer-layout {
    background-color: var(--pioneer-body-bg, #f0f2f5);
    color: var(--pioneer-text-primary, #212529);
}

/* ====== Cards ====== */
.pioneer-layout .card,
.pioneer-layout .card.border-0,
.pioneer-layout .card.shadow-sm,
.pioneer-layout .card.h-100 {
    background-color: var(--pioneer-card-bg, white) !important;
    border-color: var(--pioneer-card-border, rgba(0,0,0,0.125));
    color: var(--pioneer-text-primary, #212529);
}

.pioneer-layout .card-header {
    background-color: var(--pioneer-card-bg, white);
    color: var(--pioneer-text-primary, #212529);
    border-bottom-color: var(--pioneer-card-border, rgba(0,0,0,0.125));
}

.pioneer-layout .card-footer {
    border-top-color: var(--pioneer-card-border, rgba(0,0,0,0.125));
}

/* ====== Tables ====== */
.pioneer-layout .table {
    background-color: var(--pioneer-card-bg, white);
    color: var(--pioneer-text-primary, #212529);
    border-color: var(--pioneer-card-border, rgba(0,0,0,0.125));
}

.pioneer-layout .table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: var(--pioneer-table-stripe, rgba(0,0,0,0.02));
    color: var(--pioneer-text-primary, #212529);
}

.pioneer-layout .table > :not(caption) > * > * {
    border-bottom-color: var(--pioneer-card-border, rgba(0,0,0,0.125));
}

.pioneer-layout .table th {
    background-color: var(--pioneer-table-stripe, rgba(0,0,0,0.02));
    color: var(--pioneer-text-primary, #212529);
}

.pioneer-layout .table > tbody > tr > * {
    background-color: transparent;
    color: var(--pioneer-text-primary, #212529);
}

.pioneer-layout .table-hover > tbody > tr:hover > * {
    background-color: var(--pioneer-table-stripe, rgba(0,0,0,0.02));
    color: var(--pioneer-text-primary, #212529);
}

/* ====== Bootstrap Subtle Backgrounds (dark-theme safe) ====== */
.pioneer-layout .bg-light-subtle,
.pioneer-layout .bg-light {
    background-color: rgba(255,255,255,0.05) !important;
    color: var(--pioneer-text-primary, #212529);
}

.pioneer-layout .bg-success-subtle {
    background-color: rgba(40,167,69,0.1) !important;
}

.pioneer-layout .bg-danger-subtle {
    background-color: rgba(220,53,69,0.1) !important;
}

.pioneer-layout .bg-warning-subtle {
    background-color: rgba(255,193,7,0.1) !important;
}

.pioneer-layout .bg-info-subtle {
    background-color: rgba(23,162,184,0.1) !important;
}

.pioneer-layout .bg-primary-subtle {
    background-color: color-mix(in srgb, var(--pioneer-accent, #0d6efd) 15%, transparent) !important;
}

/* ====== Forms ====== */
.pioneer-layout .form-control,
.pioneer-layout .form-select {
    background-color: var(--pioneer-input-bg, white);
    border-color: var(--pioneer-input-border, #dee2e6);
    color: var(--pioneer-text-primary, #212529);
}

.pioneer-layout .form-control:focus,
.pioneer-layout .form-select:focus {
    border-color: var(--pioneer-accent, #0d6efd);
    box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--pioneer-accent, #0d6efd) 25%, transparent);
}

.pioneer-layout .form-control::placeholder {
    color: var(--pioneer-text-muted, #6c757d);
    opacity: 0.6;
}

.pioneer-layout .form-label {
    color: var(--pioneer-text-primary, #212529);
}

.pioneer-layout .form-text {
    color: var(--pioneer-text-muted, #6c757d);
}

.pioneer-layout .input-group-text {
    background-color: var(--pioneer-input-bg, white);
    border-color: var(--pioneer-input-border, #dee2e6);
    color: var(--pioneer-text-primary, #212529);
}

/* ====== Buttons ====== */
.pioneer-layout .btn-primary {
    background-color: var(--pioneer-accent, #0d6efd);
    border-color: var(--pioneer-accent, #0d6efd);
}

.pioneer-layout .btn-primary:hover,
.pioneer-layout .btn-primary:focus {
    background-color: var(--pioneer-accent-hover, #0b5ed7);
    border-color: var(--pioneer-accent-hover, #0b5ed7);
}

.pioneer-layout .btn-outline-primary {
    color: var(--pioneer-accent, #0d6efd);
    border-color: var(--pioneer-accent, #0d6efd);
}

.pioneer-layout .btn-outline-primary:hover,
.pioneer-layout .btn-outline-primary:focus {
    background-color: var(--pioneer-accent, #0d6efd);
    border-color: var(--pioneer-accent, #0d6efd);
    color: white;
}

/* ====== Badges ====== */
.pioneer-layout .badge.bg-primary {
    background-color: var(--pioneer-accent, #0d6efd) !important;
}

.pioneer-layout .badge.border:not([class*="bg-"]) {
    background-color: color-mix(in srgb, var(--pioneer-accent, #0d6efd) 15%, transparent);
    color: var(--pioneer-text-primary, #212529);
    border-color: color-mix(in srgb, var(--pioneer-accent, #0d6efd) 30%, transparent) !important;
}

/* ====== Links ====== */
.pioneer-layout a:not(.btn):not(.nav-link):not(.navbar-brand):not(.nav-item a):not(.dropdown-item) {
    color: var(--pioneer-accent, #0d6efd);
}

.pioneer-layout a:not(.btn):not(.nav-link):not(.navbar-brand):not(.nav-item a):not(.dropdown-item):hover {
    color: var(--pioneer-accent-hover, #0b5ed7);
}

/* ====== Muted Text ====== */
.pioneer-layout .text-muted {
    color: var(--pioneer-text-muted, #6c757d) !important;
}

/* ====== Modals ====== */
.pioneer-layout .modal-content {
    background-color: var(--pioneer-card-bg, white);
    color: var(--pioneer-text-primary, #212529);
    border-color: var(--pioneer-card-border, rgba(0,0,0,0.125));
}

.pioneer-layout .modal-header {
    border-bottom-color: var(--pioneer-card-border, rgba(0,0,0,0.125));
}

.pioneer-layout .modal-footer {
    border-top-color: var(--pioneer-card-border, rgba(0,0,0,0.125));
}

/* ====== Dropdowns ====== */
.pioneer-layout .dropdown-menu {
    background-color: var(--pioneer-card-bg, white);
    border-color: var(--pioneer-card-border, rgba(0,0,0,0.125));
    color: var(--pioneer-text-primary, #212529);
}

.pioneer-layout .dropdown-item {
    color: var(--pioneer-text-primary, #212529);
}

.pioneer-layout .dropdown-item:hover,
.pioneer-layout .dropdown-item:focus {
    background-color: var(--pioneer-table-stripe, rgba(0,0,0,0.04));
    color: var(--pioneer-text-primary, #212529);
}

.pioneer-layout .dropdown-divider {
    border-top-color: var(--pioneer-card-border, rgba(0,0,0,0.125));
}

/* ====== List Groups ====== */
.pioneer-layout .list-group-item {
    background-color: var(--pioneer-card-bg, white);
    border-color: var(--pioneer-card-border, rgba(0,0,0,0.125));
    color: var(--pioneer-text-primary, #212529);
}

/* ====== Pagination ====== */
.pioneer-layout .page-link {
    background-color: var(--pioneer-card-bg, white);
    border-color: var(--pioneer-card-border, rgba(0,0,0,0.125));
    color: var(--pioneer-accent, #0d6efd);
}

.pioneer-layout .page-item.active .page-link {
    background-color: var(--pioneer-accent, #0d6efd);
    border-color: var(--pioneer-accent, #0d6efd);
}

/* ====== Alerts (theme-aware) ====== */
.pioneer-layout .alert {
    --bs-alert-color: var(--pioneer-text-primary, #212529);
    border-left-width: 4px;
    border-left-style: solid;
}

.pioneer-layout .alert-info {
    --bs-alert-bg: rgba(13, 110, 253, 0.1);
    --bs-alert-border-color: rgba(13, 110, 253, 0.25);
    border-left-color: #0d6efd;
}

.pioneer-layout .alert-success {
    --bs-alert-bg: rgba(25, 135, 84, 0.1);
    --bs-alert-border-color: rgba(25, 135, 84, 0.25);
    border-left-color: #198754;
}

.pioneer-layout .alert-warning {
    --bs-alert-bg: rgba(255, 193, 7, 0.1);
    --bs-alert-border-color: rgba(255, 193, 7, 0.25);
    border-left-color: #ffc107;
}

.pioneer-layout .alert-danger {
    --bs-alert-bg: rgba(220, 53, 69, 0.1);
    --bs-alert-border-color: rgba(220, 53, 69, 0.25);
    border-left-color: #dc3545;
}

/* ====== Accordions ====== */
.pioneer-layout .accordion {
    --bs-accordion-bg: var(--pioneer-card-bg, white);
    --bs-accordion-color: var(--pioneer-text-primary, #212529);
    --bs-accordion-border-color: var(--pioneer-card-border, rgba(0,0,0,0.125));
    --bs-accordion-btn-bg: var(--pioneer-card-bg, white);
    --bs-accordion-btn-color: var(--pioneer-text-primary, #212529);
    --bs-accordion-active-bg: var(--pioneer-card-bg, white);
    --bs-accordion-active-color: var(--pioneer-text-primary, #212529);
    --bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--pioneer-accent, #0d6efd) 25%, transparent);
}

.pioneer-layout .accordion-button::after {
    filter: var(--pioneer-accordion-arrow-filter, none);
}

.pioneer-layout .accordion-button:not(.collapsed)::after {
    filter: var(--pioneer-accordion-arrow-filter, none);
}

/* ====== Date Pickers ====== */
/* Standard date input: hide native calendar icon, use Bootstrap Icons addon instead.
   Markup pattern:
     <div class="input-group">
       <input type="date" class="form-control pioneer-date-input" />
       <span class="input-group-text pioneer-date-icon"
             onclick="this.previousElementSibling.showPicker()">
         <i class="bi bi-calendar3 text-info"></i>
       </span>
     </div>
*/
.pioneer-theme-dark .pioneer-date-input {
    color-scheme: dark;
}
.pioneer-date-input::-webkit-calendar-picker-indicator {
    display: none;
}
.pioneer-date-icon {
    cursor: pointer;
}

/* ====== Spin animation (refresh buttons, loading indicators) ====== */
.pioneer-layout .spin {
    animation: pioneer-spin 1s linear infinite;
}

@keyframes pioneer-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ====== Breadcrumbs ====== */
.pioneer-layout .breadcrumb {
    background-color: transparent;
}

.pioneer-layout .breadcrumb-item a {
    color: var(--pioneer-accent, #0d6efd);
}

.pioneer-layout .breadcrumb-item.active {
    color: var(--pioneer-text-muted, #6c757d);
}

/* ====== Connection Status (built-in Blazor reconnect UI) ====== */
.pioneer-layout #components-reconnect-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;
}

.pioneer-layout #components-reconnect-modal .reconnect-state {
    display: none;
}

.pioneer-layout #components-reconnect-modal.components-reconnect-show .reconnecting {
    display: block;
}

.pioneer-layout #components-reconnect-modal.components-reconnect-failed .failed {
    display: block;
}

.pioneer-layout #components-reconnect-modal.components-reconnect-rejected .failed {
    display: block;
}

.pioneer-reconnect-banner {
    padding: 12px 24px;
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    backdrop-filter: blur(8px);
}

.pioneer-reconnect-warning {
    background-color: var(--pioneer-card-bg, #1e2940);
    color: var(--pioneer-accent, #ffc107);
    border-bottom: 2px solid var(--pioneer-accent, #ffc107);
}

.pioneer-reconnect-error {
    background-color: var(--pioneer-card-bg, #1e2940);
    color: #e57373;
    border-bottom: 2px solid #e57373;
}

.pioneer-reconnect-reload {
    display: inline-block;
    padding: 4px 16px;
    border-radius: 4px;
    font-weight: 600;
    font-size: 13px;
    text-decoration: none;
    background-color: var(--pioneer-accent, #3498db);
    color: #ffffff;
    border: none;
}

.pioneer-reconnect-reload:hover {
    opacity: 0.85;
    color: #ffffff;
}