/* ============================================================================
   COMPONENTS — THEME OVERRIDES
   Bootstrap/Badges · Rich Text Editor · Purpose Modal · ConfirmDialog
   Toast · CapacityWidget · CalendarTimeBlockStrip
   ============================================================================ */

/* ============================================================================
   BOOTSTRAP & UTILITY CLASS OVERRIDES
   ============================================================================ */

/* Light Theme */
.theme-light .text-muted { color: #6B7280 !important; }
.theme-light .btn-primary {
    background-color: #4F46E5 !important;
    border-color: #4F46E5 !important;
    color: white !important;
}
.theme-light .btn-primary:hover {
    background-color: #4338CA !important;
    border-color: #4338CA !important;
}
.theme-light .btn-outline-primary {
    color: #4F46E5 !important;
    border-color: #4F46E5 !important;
}
.theme-light .btn-outline-primary:hover {
    background-color: #4F46E5 !important;
    color: white !important;
}
.theme-light .btn-outline-secondary {
    color: #6B7280 !important;
    border-color: #D1D5DB !important;
}
.theme-light .btn-outline-secondary:hover {
    background-color: #F3F4F6 !important;
    color: #374151 !important;
}

/* Dark Theme */
.theme-dark .text-muted { color: #9CA3AF !important; }
.theme-dark .btn-primary {
    background-color: #3B82F6 !important;
    border-color: #3B82F6 !important;
    color: white !important;
}
.theme-dark .btn-primary:hover {
    background-color: #2563EB !important;
    border-color: #2563EB !important;
}
.theme-dark .btn-outline-primary {
    color: #60A5FA !important;
    border-color: #3B82F6 !important;
}
.theme-dark .btn-outline-primary:hover {
    background-color: #3B82F6 !important;
    color: white !important;
}
.theme-dark .btn-outline-secondary {
    color: #D1D5DB !important;
    border-color: #4B5563 !important;
}
.theme-dark .btn-outline-secondary:hover {
    background-color: #374151 !important;
    color: white !important;
}

/* Default Theme (OS Preference) */
@media (prefers-color-scheme: dark) {
    .theme-default .text-muted { color: #9CA3AF !important; }
    .theme-default .btn-primary {
        background-color: #3B82F6 !important;
        border-color: #3B82F6 !important;
        color: white !important;
    }
    .theme-default .btn-primary:hover {
        background-color: #2563EB !important;
        border-color: #2563EB !important;
    }
    .theme-default .btn-outline-primary {
        color: #60A5FA !important;
        border-color: #3B82F6 !important;
    }
    .theme-default .btn-outline-primary:hover {
        background-color: #3B82F6 !important;
        color: white !important;
    }
    .theme-default .btn-outline-secondary {
        color: #D1D5DB !important;
        border-color: #4B5563 !important;
    }
    .theme-default .btn-outline-secondary:hover {
        background-color: #374151 !important;
        color: white !important;
    }
}

/* ============================================================================
   BADGE THEME OVERRIDES
   ============================================================================ */

.theme-light .badge-neutral { background-color: #F3F4F6 !important; color: #374151 !important; }
.theme-dark .badge-neutral { background-color: #374151 !important; color: #D1D5DB !important; }
.theme-default .badge-neutral { background-color: #F3F4F6 !important; color: #374151 !important; }

@media (prefers-color-scheme: dark) {
    .theme-default .badge-neutral { background-color: #374151 !important; color: #D1D5DB !important; }
}

/* ============================================================================
   RICH TEXT EDITOR — THEME OVERRIDES
   Must live here (global) — scoped .razor.css cannot target html-level theme
   classes in Blazor WebAssembly.
   ============================================================================ */

/* Dark Theme */
.theme-dark .sf-rich-text-editor {
    background-color: var(--sf-bg-secondary) !important;
    border-color: var(--sf-border-color) !important;
}
.theme-dark .sf-rte-toolbar {
    background-color: var(--sf-bg-primary) !important;
    border-bottom-color: var(--sf-border-color) !important;
}
.theme-dark .sf-rte-toolbar-separator { background-color: var(--sf-neutral-600) !important; }
.theme-dark .sf-rte-btn { color: var(--sf-text-muted) !important; }
.theme-dark .sf-rte-btn:hover {
    background-color: var(--sf-neutral-700) !important;
    color: var(--sf-text-heading) !important;
}
.theme-dark .sf-rte-editor {
    background-color: var(--sf-bg-secondary) !important;
    color: var(--sf-text-heading) !important;
}
.theme-dark .sf-rte-editor:empty::before { color: var(--sf-neutral-600) !important; }
.theme-dark .sf-rte-dialog {
    background: var(--sf-bg-secondary) !important;
    border-color: var(--sf-border-color) !important;
}
.theme-dark .sf-rte-dialog-header { border-bottom-color: var(--sf-border-color) !important; }
.theme-dark .sf-rte-dialog-header h6 { color: var(--sf-text-heading) !important; }
.theme-dark .sf-rte-dialog-close { color: var(--sf-text-muted) !important; }
.theme-dark .sf-rte-dialog-close:hover {
    background-color: var(--sf-neutral-700) !important;
    color: var(--sf-text-heading) !important;
}
.theme-dark .sf-rte-dialog-footer { border-top-color: var(--sf-border-color) !important; }
.theme-dark .sf-rich-text-editor:focus-within {
    border-color: var(--sf-primary-400) !important;
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.2) !important;
}

/* Light Theme */
.theme-light .sf-rich-text-editor {
    background-color: white !important;
    border-color: var(--sf-neutral-300) !important;
}
.theme-light .sf-rte-toolbar {
    background-color: var(--sf-neutral-50) !important;
    border-bottom-color: var(--sf-neutral-200) !important;
}
.theme-light .sf-rte-editor {
    background-color: white !important;
    color: var(--sf-neutral-900) !important;
}

/* Default Theme (OS dark preference) */
@media (prefers-color-scheme: dark) {
    .theme-default .sf-rich-text-editor {
        background-color: var(--sf-bg-secondary) !important;
        border-color: var(--sf-border-color) !important;
    }
    .theme-default .sf-rte-toolbar {
        background-color: var(--sf-bg-primary) !important;
        border-bottom-color: var(--sf-border-color) !important;
    }
    .theme-default .sf-rte-toolbar-separator { background-color: var(--sf-neutral-600) !important; }
    .theme-default .sf-rte-btn { color: var(--sf-text-muted) !important; }
    .theme-default .sf-rte-btn:hover {
        background-color: var(--sf-neutral-700) !important;
        color: var(--sf-text-heading) !important;
    }
    .theme-default .sf-rte-editor {
        background-color: var(--sf-bg-secondary) !important;
        color: var(--sf-text-heading) !important;
    }
    .theme-default .sf-rte-editor:empty::before { color: var(--sf-neutral-600) !important; }
    .theme-default .sf-rte-dialog {
        background: var(--sf-bg-secondary) !important;
        border-color: var(--sf-border-color) !important;
    }
    .theme-default .sf-rte-dialog-header { border-bottom-color: var(--sf-border-color) !important; }
    .theme-default .sf-rte-dialog-header h6 { color: var(--sf-text-heading) !important; }
    .theme-default .sf-rte-dialog-close { color: var(--sf-text-muted) !important; }
    .theme-default .sf-rte-dialog-close:hover {
        background-color: var(--sf-neutral-700) !important;
        color: var(--sf-text-heading) !important;
    }
    .theme-default .sf-rte-dialog-footer { border-top-color: var(--sf-border-color) !important; }
    .theme-default .sf-rich-text-editor:focus-within {
        border-color: var(--sf-primary-400) !important;
        box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.2) !important;
    }
}

/* ============================================================================
   PURPOSE MODAL BASE
   Global shared layout — child components have a different Blazor scope attr.
   ============================================================================ */

.purpose-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 1040;
}

.purpose-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1050;
    background: #fff;
    border-radius: 0.625rem;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.18);
    width: min(480px, 96vw);
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.purpose-modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #dee2e6;
    flex-shrink: 0;
}

.purpose-modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 1.25rem;
}

.purpose-modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 0.875rem 1.25rem;
    border-top: 1px solid #dee2e6;
    flex-shrink: 0;
}

/* Dark theme overrides for purpose modal */
.theme-dark .purpose-modal,
.theme-dark .purpose-modal-header,
.theme-dark .purpose-modal-footer {
    background: #1f2937 !important;
    color: #f3f4f6 !important;
    border-color: #374151 !important;
}
.theme-dark .purpose-modal-body {
    background: #1f2937 !important;
    color: #f3f4f6 !important;
}

/* Default (OS dark) overrides */
@media (prefers-color-scheme: dark) {
    .theme-default .purpose-modal,
    .theme-default .purpose-modal-header,
    .theme-default .purpose-modal-footer {
        background: #1f2937 !important;
        color: #f3f4f6 !important;
        border-color: #374151 !important;
    }
    .theme-default .purpose-modal-body {
        background: #1f2937 !important;
        color: #f3f4f6 !important;
    }
}

/* ============================================================================
   CONFIRM DIALOG
   ============================================================================ */

.btn-warning {
    background-color: var(--sf-warning, #f59e0b);
    border-color: var(--sf-warning, #f59e0b);
    color: #1f2937;
}

.btn-warning:hover:not(:disabled) {
    background-color: #d97706;
    border-color: #d97706;
    color: #fff;
}

/* ============================================================================
   TOAST HOST
   ============================================================================ */

.sf-toast-host {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 9999;
    display: flex;
    flex-direction: column-reverse;
    gap: 0.625rem;
    max-width: min(380px, calc(100vw - 2rem));
    pointer-events: none;
}

.sf-toast {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    border-radius: 0.5rem;
    background: #fff;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.14);
    border-left: 4px solid #6b7280;
    pointer-events: all;
    opacity: 1;
    transform: translateX(0);
    transition: opacity 0.25s ease, transform 0.25s ease;
    font-size: 0.875rem;
    word-break: break-word;
}

.sf-toast--enter {
    opacity: 0;
    transform: translateX(1.5rem);
}

.sf-toast--success { border-left-color: #10b981; }
.sf-toast--error   { border-left-color: #ef4444; }
.sf-toast--warning { border-left-color: #f59e0b; }
.sf-toast--info    { border-left-color: #3b82f6; }

.sf-toast-icon {
    flex-shrink: 0;
    margin-top: 0.1rem;
    font-size: 1rem;
}

.sf-toast--success .sf-toast-icon { color: #10b981; }
.sf-toast--error   .sf-toast-icon { color: #ef4444; }
.sf-toast--warning .sf-toast-icon { color: #f59e0b; }
.sf-toast--info    .sf-toast-icon { color: #3b82f6; }

.sf-toast-body {
    flex: 1;
    min-width: 0;
}

.sf-toast-title {
    font-weight: 600;
    color: #111827;
    line-height: 1.3;
}

.sf-toast-message {
    color: #6b7280;
    margin-top: 0.2rem;
    line-height: 1.4;
    font-size: 0.8125rem;
}

.sf-toast-close {
    flex-shrink: 0;
    background: none;
    border: none;
    cursor: pointer;
    color: #9ca3af;
    padding: 0.1rem 0.25rem;
    border-radius: 0.25rem;
    line-height: 1;
    transition: color 0.15s;
    align-self: flex-start;
}

.sf-toast-close:hover { color: #374151; }

@media (max-width: 480px) {
    .sf-toast-host {
        bottom: 1rem;
        right: 0.75rem;
        left: 0.75rem;
        max-width: none;
    }
}

/* Dark theme overrides for toasts */
.theme-dark .sf-toast,
.theme-dark .sf-toast-title {
    background: #1f2937 !important;
    color: #f3f4f6 !important;
}
.theme-dark .sf-toast-message { color: #9ca3af !important; }
.theme-dark .sf-toast-close   { color: #6b7280 !important; }
.theme-dark .sf-toast-close:hover { color: #d1d5db !important; }

@media (prefers-color-scheme: dark) {
    .theme-default .sf-toast,
    .theme-default .sf-toast-title {
        background: #1f2937 !important;
        color: #f3f4f6 !important;
    }
    .theme-default .sf-toast-message { color: #9ca3af !important; }
    .theme-default .sf-toast-close   { color: #6b7280 !important; }
}

/* ============================================================================
   CAPACITY WIDGET — THEME OVERRIDES
   AC: SF-CAP-001/002/003
   ============================================================================ */

/* Dark theme */
.theme-dark .cap-widget {
    background-color: #1e293b !important;
    border-color: #334155 !important;
}
.theme-dark .cap-widget-title  { color: #e2e8f0 !important; }
.theme-dark .cap-execution-label { color: #94a3b8 !important; }
.theme-dark .cap-bar-track     { background-color: #334155 !important; }
.theme-dark .cap-bar-band--remainder { background-color: #1e3a5f !important; }
.theme-dark .cap-legend-item   { color: #94a3b8 !important; }
.theme-dark .cap-legend-hours  { color: #e2e8f0 !important; }
.theme-dark .cap-alert--mismatch {
    background-color: #451a03 !important;
    border-color: #92400e !important;
    color: #fcd34d !important;
}
.theme-dark .cap-alert--recovery {
    background-color: #052e16 !important;
    border-color: #166534 !important;
    color: #86efac !important;
}

/* Default theme (OS dark preference) */
@media (prefers-color-scheme: dark) {
    .theme-default .cap-widget {
        background-color: #1e293b !important;
        border-color: #334155 !important;
    }
    .theme-default .cap-widget-title  { color: #e2e8f0 !important; }
    .theme-default .cap-execution-label { color: #94a3b8 !important; }
    .theme-default .cap-bar-track     { background-color: #334155 !important; }
    .theme-default .cap-bar-band--remainder { background-color: #1e3a5f !important; }
    .theme-default .cap-legend-item   { color: #94a3b8 !important; }
    .theme-default .cap-legend-hours  { color: #e2e8f0 !important; }
    .theme-default .cap-alert--mismatch {
        background-color: #451a03 !important;
        border-color: #92400e !important;
        color: #fcd34d !important;
    }
    .theme-default .cap-alert--recovery {
        background-color: #052e16 !important;
        border-color: #166534 !important;
        color: #86efac !important;
    }
}

/* ============================================================================
   CALENDAR TIME BLOCK STRIP — THEME OVERRIDES
   Overrides for CalendarTimeBlockStrip.razor
   ============================================================================ */

/* Dark theme */
.theme-dark .tb-strip-cell--free {
    background-color: #1e3a5f !important;
    opacity: 0.7;
}
.theme-dark .tb-free-badge   { color: #93c5fd !important; }
.theme-dark .tb-committed-text { color: #cbd5e1 !important; }
.theme-dark .tb-strip-meta-sep { color: #475569 !important; }
.theme-dark .tb-meta-label   { color: #94a3b8 !important; }

/* Default theme (OS dark preference) */
@media (prefers-color-scheme: dark) {
    .theme-default .tb-strip-cell--free {
        background-color: #1e3a5f !important;
        opacity: 0.7;
    }
    .theme-default .tb-free-badge   { color: #93c5fd !important; }
    .theme-default .tb-committed-text { color: #cbd5e1 !important; }
    .theme-default .tb-strip-meta-sep { color: #475569 !important; }
    .theme-default .tb-meta-label   { color: #94a3b8 !important; }
}