/**
 * KPI Components — product-wide UI primitives.
 * Restyles Bootstrap/Vuexy primitives to the KPI design system.
 */

/* Light/bordered only — dark uses stock Vuexy dark-layout */

/* ── Base type ── */

body,
.card,
.btn,
.form-control,
.table,
.dropdown-menu,
.modal,
.badge {
    font-family: var(--kpi-font);
}

/* ── Cards ── */

.card,
.kpi-card {
    background: var(--kpi-surface) !important;
    border: 1px solid var(--kpi-border) !important;
    border-radius: var(--kpi-radius-lg) !important;
    box-shadow: var(--kpi-shadow-sm) !important;
    color: var(--kpi-text-secondary);
}

.card .card-header,
.kpi-card__header {
    background: transparent !important;
    border-bottom: 1px solid var(--kpi-border) !important;
    padding: var(--kpi-spacing-md) var(--kpi-spacing-lg);
}

.card .card-title,
.kpi-card__title {
    color: var(--kpi-text) !important;
    font-size: var(--kpi-font-size-lg);
    font-weight: var(--kpi-font-weight-bold);
    margin: 0;
}

.card .card-body,
.kpi-card__body {
    padding: var(--kpi-spacing-lg);
}

.kpi-card--flush .card-body,
.kpi-card--flush .kpi-card__body {
    padding: 0;
}

.kpi-card--muted {
    background: var(--kpi-surface-muted) !important;
}

/* ── Buttons ── */

.btn,
.kpi-btn {
    border-radius: var(--kpi-radius-sm) !important;
    font-weight: var(--kpi-font-weight-semibold);
    font-size: var(--kpi-font-size-sm);
    padding: 0.55rem 1rem;
    transition: background var(--kpi-transition), border-color var(--kpi-transition),
        box-shadow var(--kpi-transition), color var(--kpi-transition), transform var(--kpi-transition);
    box-shadow: none !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    line-height: 1.3;
}

.btn:focus,
.kpi-btn:focus {
    outline: none;
    box-shadow: var(--kpi-shadow-focus) !important;
}

.btn:disabled,
.btn.disabled,
.kpi-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.btn-sm {
    padding: 0.4rem 0.75rem;
    font-size: var(--kpi-font-size-xs);
    border-radius: var(--kpi-radius-xs) !important;
}

.btn-lg {
    padding: 0.7rem 1.25rem;
    font-size: var(--kpi-font-size-md);
}

/* Primary = brand */
.btn-primary,
.kpi-btn--primary {
    background: var(--kpi-primary) !important;
    border-color: var(--kpi-primary) !important;
    color: var(--kpi-text-inverse) !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.kpi-btn--primary:hover {
    background: var(--kpi-primary-hover) !important;
    border-color: var(--kpi-primary-hover) !important;
    color: var(--kpi-text-inverse) !important;
}

/* Semantic colors restored */
.btn-success {
    background: var(--kpi-success) !important;
    border-color: var(--kpi-success) !important;
    color: #fff !important;
}

.btn-success:hover,
.btn-success:focus,
.btn-success:active {
    background: var(--kpi-success-hover) !important;
    border-color: var(--kpi-success-hover) !important;
}

.btn-warning {
    background: var(--kpi-warning) !important;
    border-color: var(--kpi-warning) !important;
    color: #fff !important;
}

.btn-warning:hover,
.btn-warning:focus,
.btn-warning:active {
    background: var(--kpi-warning-hover) !important;
    border-color: var(--kpi-warning-hover) !important;
}

.btn-danger {
    background: var(--kpi-danger) !important;
    border-color: var(--kpi-danger) !important;
    color: #fff !important;
}

.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active {
    background: var(--kpi-danger-hover) !important;
    border-color: var(--kpi-danger-hover) !important;
}

.btn-info {
    background: var(--kpi-info) !important;
    border-color: var(--kpi-info) !important;
    color: #fff !important;
}

.btn-info:hover,
.btn-info:focus,
.btn-info:active {
    background: var(--kpi-info-hover) !important;
    border-color: var(--kpi-info-hover) !important;
}

.btn-secondary {
    background: var(--kpi-surface-muted) !important;
    border-color: var(--kpi-border) !important;
    color: var(--kpi-text-secondary) !important;
}

.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active {
    background: var(--kpi-border) !important;
    border-color: var(--kpi-border-strong) !important;
    color: var(--kpi-text) !important;
}

/* Outlines */
.btn-outline-primary {
    color: var(--kpi-primary) !important;
    border-color: var(--kpi-primary) !important;
    background: transparent !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active {
    background: var(--kpi-primary) !important;
    color: #fff !important;
}

.btn-outline-success {
    color: var(--kpi-success) !important;
    border-color: var(--kpi-success) !important;
    background: transparent !important;
}

.btn-outline-success:hover {
    background: var(--kpi-success) !important;
    color: #fff !important;
}

.btn-outline-warning {
    color: var(--kpi-warning) !important;
    border-color: var(--kpi-warning) !important;
    background: transparent !important;
}

.btn-outline-warning:hover {
    background: var(--kpi-warning) !important;
    color: #fff !important;
}

.btn-outline-danger {
    color: var(--kpi-danger) !important;
    border-color: var(--kpi-danger) !important;
    background: transparent !important;
}

.btn-outline-danger:hover {
    background: var(--kpi-danger) !important;
    color: #fff !important;
}

.btn-outline-info {
    color: var(--kpi-info) !important;
    border-color: var(--kpi-info) !important;
    background: transparent !important;
}

.btn-outline-info:hover {
    background: var(--kpi-info) !important;
    color: #fff !important;
}

.btn-outline-secondary {
    color: var(--kpi-muted) !important;
    border-color: var(--kpi-border) !important;
    background: transparent !important;
}

.btn-outline-secondary:hover {
    background: var(--kpi-surface-muted) !important;
    color: var(--kpi-text) !important;
    border-color: var(--kpi-border-strong) !important;
}

/* ── Forms ── */

label,
.col-form-label {
    color: var(--kpi-text) !important;
    font-size: var(--kpi-font-size-sm);
    font-weight: var(--kpi-font-weight-semibold);
    margin-bottom: 0.35rem;
}

.form-control,
.custom-select,
select.form-control,
textarea.form-control,
.kpi-input,
.kpi-select {
    border: 1px solid var(--kpi-border) !important;
    border-radius: var(--kpi-radius-sm) !important;
    background: var(--kpi-surface) !important;
    color: var(--kpi-text) !important;
    font-size: var(--kpi-font-size-sm);
    min-height: 42px;
    padding: 0.55rem 0.85rem;
    transition: border-color var(--kpi-transition), box-shadow var(--kpi-transition);
    box-shadow: none !important;
}

.form-control:hover,
.kpi-input:hover,
.kpi-select:hover {
    border-color: var(--kpi-border-strong) !important;
}

.form-control:focus,
.custom-select:focus,
.kpi-input:focus,
.kpi-select:focus {
    border-color: var(--kpi-primary) !important;
    box-shadow: var(--kpi-shadow-focus) !important;
    background: var(--kpi-surface) !important;
    color: var(--kpi-text) !important;
}

.form-control::placeholder {
    color: var(--kpi-text-disabled) !important;
}

.form-control:disabled,
.form-control[readonly] {
    background: var(--kpi-surface-muted) !important;
    color: var(--kpi-text-disabled) !important;
    cursor: not-allowed;
}

.form-control.is-invalid,
.kpi-input.is-invalid {
    border-color: var(--kpi-danger) !important;
}

.invalid-feedback {
    color: var(--kpi-danger);
    font-size: var(--kpi-font-size-xs);
}

.form-group {
    margin-bottom: var(--kpi-spacing-md);
}

.custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--kpi-primary) !important;
    border-color: var(--kpi-primary) !important;
}

.custom-control-input:focus ~ .custom-control-label::before {
    box-shadow: var(--kpi-shadow-focus) !important;
}

.custom-control-label {
    color: var(--kpi-text-secondary) !important;
    font-weight: var(--kpi-font-weight-medium);
}

/* Form field helper */
.kpi-field__hint {
    display: block;
    margin-top: 0.25rem;
    font-size: var(--kpi-font-size-xs);
    color: var(--kpi-muted);
}

/* ── Badges / status ── */

.badge,
.kpi-badge {
    border-radius: var(--kpi-radius-pill) !important;
    font-weight: var(--kpi-font-weight-semibold);
    font-size: 0.7rem;
    letter-spacing: 0.01em;
    padding: 0.35em 0.7em;
    border: 1px solid transparent;
}

.badge-primary,
.badge-light-primary,
.kpi-badge--primary {
    background: var(--kpi-primary-soft) !important;
    color: var(--kpi-primary) !important;
}

.badge-success,
.badge-light-success,
.kpi-badge--success {
    background: var(--kpi-success-soft) !important;
    color: var(--kpi-success) !important;
}

.badge-warning,
.badge-light-warning,
.kpi-badge--warning {
    background: var(--kpi-warning-soft) !important;
    color: var(--kpi-warning) !important;
}

.badge-danger,
.badge-light-danger,
.kpi-badge--danger {
    background: var(--kpi-danger-soft) !important;
    color: var(--kpi-danger) !important;
}

.badge-info,
.badge-light-info,
.kpi-badge--info {
    background: var(--kpi-info-soft) !important;
    color: var(--kpi-info) !important;
}

.badge-secondary,
.badge-light-secondary,
.kpi-badge--secondary {
    background: var(--kpi-surface-muted) !important;
    color: var(--kpi-muted) !important;
    border-color: var(--kpi-border);
}

/* ── Tables ── */

.card-datatable,
.kpi-table-wrap {
    border-radius: var(--kpi-radius-lg);
    overflow: hidden;
}

.table,
.kpi-table {
    color: var(--kpi-text-secondary) !important;
    margin-bottom: 0;
}

.table thead th,
.kpi-table thead th {
    background: var(--kpi-surface-muted) !important;
    border-bottom: 1px solid var(--kpi-border) !important;
    border-top: none !important;
    color: var(--kpi-muted) !important;
    font-size: var(--kpi-font-size-xs);
    font-weight: var(--kpi-font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.85rem 1rem !important;
    white-space: nowrap;
}

.table td,
.kpi-table td {
    border-top: 1px solid var(--kpi-border) !important;
    padding: 0.9rem 1rem !important;
    vertical-align: middle;
    font-size: var(--kpi-font-size-sm);
    color: var(--kpi-text-secondary);
}

.table-hover tbody tr:hover {
    background: var(--kpi-primary-subtle) !important;
}

.table .btn {
    margin-inline-end: 0.25rem;
    margin-bottom: 0.15rem;
}

/* Pagination */
.pagination {
    gap: 0.25rem;
}

.page-item .page-link {
    border: 1px solid var(--kpi-border) !important;
    border-radius: var(--kpi-radius-sm) !important;
    color: var(--kpi-text-secondary) !important;
    background: var(--kpi-surface) !important;
    margin: 0 2px;
    min-width: 36px;
    text-align: center;
    font-size: var(--kpi-font-size-sm);
    font-weight: var(--kpi-font-weight-medium);
}

.page-item .page-link:hover {
    background: var(--kpi-primary-soft) !important;
    color: var(--kpi-primary) !important;
    border-color: var(--kpi-primary-muted) !important;
}

.page-item.active .page-link {
    background: var(--kpi-primary) !important;
    border-color: var(--kpi-primary) !important;
    color: #fff !important;
    box-shadow: none !important;
}

.page-item.disabled .page-link {
    color: var(--kpi-text-disabled) !important;
    background: var(--kpi-surface-muted) !important;
}

/* ── Alerts ── */

.alert,
.kpi-alert {
    border-radius: var(--kpi-radius) !important;
    border: 1px solid transparent !important;
    padding: 0.85rem 1rem;
    font-size: var(--kpi-font-size-sm);
}

.alert-primary,
.kpi-alert--primary {
    background: var(--kpi-primary-soft) !important;
    color: var(--kpi-primary) !important;
    border-color: rgba(196, 91, 116, 0.25) !important;
}

.alert-success,
.kpi-alert--success {
    background: var(--kpi-success-soft) !important;
    color: var(--kpi-success) !important;
    border-color: rgba(31, 157, 87, 0.25) !important;
}

.alert-warning,
.kpi-alert--warning {
    background: var(--kpi-warning-soft) !important;
    color: var(--kpi-warning) !important;
    border-color: rgba(212, 135, 15, 0.25) !important;
}

.alert-danger,
.kpi-alert--danger {
    background: var(--kpi-danger-soft) !important;
    color: var(--kpi-danger) !important;
    border-color: rgba(214, 69, 69, 0.25) !important;
}

.alert-info,
.kpi-alert--info {
    background: var(--kpi-info-soft) !important;
    color: var(--kpi-info) !important;
    border-color: rgba(61, 126, 166, 0.25) !important;
}

/* ── Empty state ── */

.kpi-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--kpi-spacing-2xl) var(--kpi-spacing-lg);
    color: var(--kpi-muted);
}

.kpi-empty__icon {
    width: 56px;
    height: 56px;
    border-radius: var(--kpi-radius);
    background: var(--kpi-surface-muted);
    border: 1px solid var(--kpi-border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--kpi-primary);
    margin-bottom: var(--kpi-spacing-md);
}

.kpi-empty__icon svg {
    width: 24px;
    height: 24px;
}

.kpi-empty__title {
    color: var(--kpi-text);
    font-size: var(--kpi-font-size-lg);
    font-weight: var(--kpi-font-weight-bold);
    margin-bottom: 0.35rem;
}

.kpi-empty__text {
    max-width: 360px;
    font-size: var(--kpi-font-size-sm);
    margin-bottom: var(--kpi-spacing-md);
    line-height: var(--kpi-line-normal);
}

/* ── Filter bar / search / toolbar ── */

.kpi-filter-bar,
.kpi-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--kpi-spacing-md);
    padding: var(--kpi-spacing-md) var(--kpi-spacing-lg);
    background: var(--kpi-surface);
    border: 1px solid var(--kpi-border);
    border-radius: var(--kpi-radius-lg);
    box-shadow: var(--kpi-shadow-sm);
    margin-bottom: var(--kpi-spacing-lg);
}

.kpi-filter-bar .form-group,
.kpi-toolbar .form-group {
    margin-bottom: 0;
    flex: 1 1 160px;
    min-width: 140px;
}

.kpi-filter-bar__actions,
.kpi-toolbar__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--kpi-spacing-xs);
    align-items: center;
    margin-inline-start: auto;
}

.kpi-search {
    position: relative;
}

.kpi-search .form-control {
    padding-inline-start: 2.4rem;
}

.kpi-search__icon {
    position: absolute;
    inset-inline-start: 0.85rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--kpi-muted);
    pointer-events: none;
    width: 16px;
    height: 16px;
}

/* ── Modal ── */

.modal-content,
.kpi-modal__content {
    border: 1px solid var(--kpi-border) !important;
    border-radius: var(--kpi-radius-lg) !important;
    box-shadow: var(--kpi-shadow-lg) !important;
    background: var(--kpi-surface) !important;
    overflow: hidden;
}

.modal-header {
    border-bottom: 1px solid var(--kpi-border) !important;
    padding: var(--kpi-spacing-md) var(--kpi-spacing-lg);
}

.modal-title {
    color: var(--kpi-text);
    font-weight: var(--kpi-font-weight-bold);
}

.modal-body {
    padding: var(--kpi-spacing-lg);
    color: var(--kpi-text-secondary);
}

.modal-footer {
    border-top: 1px solid var(--kpi-border) !important;
    padding: var(--kpi-spacing-md) var(--kpi-spacing-lg);
    background: var(--kpi-surface-muted);
}

.kpi-modal-icon {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--kpi-spacing-md);
}

.kpi-modal-icon--danger {
    background: var(--kpi-danger-soft);
    color: var(--kpi-danger);
}

/* ── Action toolbar inside cards ── */

.kpi-actions {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    align-items: center;
}

/* ── Progress ── */

.progress {
    background: var(--kpi-surface-muted) !important;
    border-radius: var(--kpi-radius-pill) !important;
    height: 8px;
}

.progress-bar,
.progress-bar-primary {
    background: var(--kpi-primary) !important;
}

/* ── Text utilities ── */

.text-primary { color: var(--kpi-primary) !important; }
.text-success { color: var(--kpi-success) !important; }
.text-warning { color: var(--kpi-warning) !important; }
.text-danger { color: var(--kpi-danger) !important; }
.text-info { color: var(--kpi-info) !important; }
.text-muted { color: var(--kpi-muted) !important; }

.bg-light-primary { background: var(--kpi-primary-soft) !important; color: var(--kpi-primary) !important; }
.bg-light-success { background: var(--kpi-success-soft) !important; color: var(--kpi-success) !important; }
.bg-light-warning { background: var(--kpi-warning-soft) !important; color: var(--kpi-warning) !important; }
.bg-light-danger { background: var(--kpi-danger-soft) !important; color: var(--kpi-danger) !important; }
.bg-light-info { background: var(--kpi-info-soft) !important; color: var(--kpi-info) !important; }

.bg-primary { background-color: var(--kpi-primary) !important; }
.border-primary { border-color: var(--kpi-primary) !important; }

/* ── Toasts — brand primary (not green) ── */

#toast-container > .toast {
    border-radius: var(--kpi-radius) !important;
    box-shadow: var(--kpi-shadow-md) !important;
}

#toast-container > .toast.toast-success {
    background-color: var(--kpi-primary-subtle) !important;
    border: 1px solid color-mix(in srgb, var(--kpi-primary) 35%, transparent) !important;
}

#toast-container > .toast.toast-success .toast-message,
#toast-container > .toast.toast-success .toast-title,
#toast-container > .toast.toast-success .toast-close-button {
    color: var(--kpi-primary-active) !important;
}

#toast-container > .toast.toast-success .toast-progress,
#toast-container > .toast.toast-success:before,
.toast-success:before {
    background-color: var(--kpi-primary) !important;
    opacity: 1 !important;
}

#toast-container > .toast.toast-success .toast-progress {
    background-color: var(--kpi-primary) !important;
}

#toast-container > .toast.toast-error {
    background-color: color-mix(in srgb, var(--kpi-danger) 8%, #fff) !important;
    border: 1px solid color-mix(in srgb, var(--kpi-danger) 35%, transparent) !important;
}

#toast-container > .toast.toast-error .toast-message,
#toast-container > .toast.toast-error .toast-title {
    color: var(--kpi-danger) !important;
}

#toast-container > .toast.toast-error .toast-progress,
#toast-container > .toast.toast-error:before {
    background-color: var(--kpi-danger) !important;
    opacity: 1 !important;
}

#toast-container > .toast.toast-warning {
    background-color: color-mix(in srgb, var(--kpi-warning) 8%, #fff) !important;
    border: 1px solid color-mix(in srgb, var(--kpi-warning) 35%, transparent) !important;
}

#toast-container > .toast.toast-warning .toast-message,
#toast-container > .toast.toast-warning .toast-title {
    color: var(--kpi-warning) !important;
}

#toast-container > .toast.toast-warning .toast-progress,
#toast-container > .toast.toast-warning:before {
    background-color: var(--kpi-warning) !important;
    opacity: 1 !important;
}

#toast-container > .toast.toast-info {
    background-color: var(--kpi-primary-soft) !important;
    border: 1px solid color-mix(in srgb, var(--kpi-primary) 28%, transparent) !important;
}

#toast-container > .toast.toast-info .toast-message,
#toast-container > .toast.toast-info .toast-title {
    color: var(--kpi-primary-active) !important;
}

#toast-container > .toast.toast-info .toast-progress,
#toast-container > .toast.toast-info:before,
.toast-info:before {
    background-color: var(--kpi-primary) !important;
    opacity: 1 !important;
}

/* ── Avatar light ── */

.avatar.bg-light-primary,
.avatar.bg-light-success,
.avatar.bg-light-warning,
.avatar.bg-light-danger,
.avatar.bg-light-info {
    border-radius: var(--kpi-radius-sm);
}

/* Image upload — soft drop zone (light + dark via tokens) */
.kpi-image-upload {
    position: relative;
}

.kpi-image-upload__input {
    position: absolute;
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    z-index: -1;
}

.kpi-image-upload__zone {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 148px;
    padding: 1.35rem 1.25rem;
    margin: 0;
    border: 2px dashed var(--kpi-border) !important;
    border-radius: var(--kpi-radius-lg);
    background: linear-gradient(
        180deg,
        var(--kpi-surface-muted) 0%,
        var(--kpi-surface) 100%
    );
    cursor: pointer;
    transition:
        border-color var(--kpi-transition),
        background var(--kpi-transition),
        box-shadow var(--kpi-transition);
    text-align: center;
}

.kpi-image-upload__zone:hover,
.kpi-image-upload__zone.is-dragover {
    border-color: color-mix(in srgb, var(--kpi-primary) 40%, var(--kpi-border)) !important;
    background: var(--kpi-primary-soft) !important;
    box-shadow: var(--kpi-shadow-sm);
}

.kpi-image-upload__placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.55rem;
    max-width: 100%;
}

.kpi-image-upload__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--kpi-primary-soft) !important;
    color: var(--kpi-primary) !important;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--kpi-primary) 12%, transparent);
}

.kpi-image-upload__icon svg {
    width: 26px;
    height: 26px;
    stroke: currentColor;
}

.kpi-image-upload__title {
    color: var(--kpi-text);
    font-weight: var(--kpi-font-weight-semibold);
    font-size: var(--kpi-font-size-sm);
    line-height: var(--kpi-line-normal);
}

.kpi-image-upload__filename,
.kpi-image-upload__hint {
    color: var(--kpi-muted);
    font-size: var(--kpi-font-size-xs);
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kpi-image-upload__preview {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
}

.kpi-image-upload__preview img {
    width: 88px;
    height: 88px;
    object-fit: cover;
    border-radius: var(--kpi-radius);
    border: 2px solid var(--kpi-border);
    box-shadow: var(--kpi-shadow-xs);
}

.kpi-image-upload__change {
    color: var(--kpi-primary);
    font-size: var(--kpi-font-size-xs);
    font-weight: var(--kpi-font-weight-semibold);
}

.kpi-image-upload__zone.has-image {
    min-height: 160px;
}

.kpi-image-upload.is-invalid .kpi-image-upload__zone {
    border-color: var(--kpi-danger) !important;
    background: var(--kpi-danger-soft) !important;
}

/* Fallback icons (replace emoji placeholders) */
.kpi-table-fallback-icon,
.kpi-program-header__fallback-icon,
.kpi-indicator-card__fallback-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--kpi-radius-sm);
    background: var(--kpi-primary-soft);
    color: var(--kpi-primary);
}

.kpi-table-fallback-icon svg,
.kpi-program-header__fallback-icon svg,
.kpi-indicator-card__fallback-icon svg {
    width: 18px;
    height: 18px;
}

.kpi-dash-panel__head-icon--info {
    background: var(--kpi-info-soft) !important;
    color: var(--kpi-info) !important;
}

/* Nested search inside filter fields */
.kpi-filter-bar .kpi-search {
    width: 100%;
}

.kpi-filter-bar .kpi-search .form-control {
    width: 100%;
}

/* ── Form sections ── */

.kpi-form-section {
    margin-bottom: var(--kpi-spacing-lg);
    padding-bottom: var(--kpi-spacing-lg);
    border-bottom: 1px solid var(--kpi-border);
}

.kpi-form-section:last-of-type {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.kpi-form-section__head {
    margin-bottom: var(--kpi-spacing-md);
}

.kpi-form-section__title {
    margin: 0;
    font-size: var(--kpi-font-size-md);
    font-weight: var(--kpi-font-weight-bold);
    color: var(--kpi-text);
    line-height: var(--kpi-line-tight);
}

.kpi-form-section__subtitle {
    margin: 0.25rem 0 0;
    font-size: var(--kpi-font-size-sm);
    color: var(--kpi-muted);
}

.kpi-form-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--kpi-spacing-sm);
    margin-top: var(--kpi-spacing-lg);
    padding-top: var(--kpi-spacing-lg);
    border-top: 1px solid var(--kpi-border);
}

.kpi-form-actions__end {
    display: flex;
    flex-wrap: wrap;
    gap: var(--kpi-spacing-xs);
    align-items: center;
}

.kpi-checkbox {
    margin-top: 0.35rem;
}

.kpi-permission-grid .card {
    margin-bottom: var(--kpi-spacing-sm) !important;
}

.kpi-permission-grid .card-body {
    padding: var(--kpi-spacing-md) !important;
}

.kpi-permission-grid h6 {
    color: var(--kpi-text);
    font-weight: var(--kpi-font-weight-semibold);
    margin-bottom: var(--kpi-spacing-sm);
}

.kpi-inline-edit {
    background: var(--kpi-surface-muted) !important;
    border-top: none !important;
}

.kpi-inline-edit form {
    padding: var(--kpi-spacing-md) !important;
}

input[type="color"].form-control {
    min-height: 42px;
    padding: 0.25rem 0.4rem;
    cursor: pointer;
}

/* Skeleton / loading */
.kpi-skeleton {
    background: linear-gradient(90deg, var(--kpi-surface-muted) 25%, var(--kpi-accent) 50%, var(--kpi-surface-muted) 75%);
    background-size: 200% 100%;
    animation: kpi-skeleton 1.2s ease-in-out infinite;
    border-radius: var(--kpi-radius-sm);
    height: 1rem;
}



.kpi-btn.is-loading {
    position: relative;
    pointer-events: none;
    color: transparent !important;
}

.kpi-btn.is-loading::after {
    content: '';
    position: absolute;
    width: 1rem;
    height: 1rem;
    border: 2px solid rgba(255,255,255,0.35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: kpi-spin 0.6s linear infinite;
}



/* Skip link */
.kpi-skip-link {
    position: absolute;
    inset-inline-start: -999px;
    top: 0;
    z-index: 9999;
    padding: 0.75rem 1rem;
    background: var(--kpi-primary);
    color: #fff !important;
    border-radius: var(--kpi-radius-sm);
    font-weight: var(--kpi-font-weight-semibold);
}

.kpi-skip-link:focus {
    inset-inline-start: var(--kpi-spacing-md);
    top: var(--kpi-spacing-md);
}

/* Color input row */
.kpi-color-field {
    display: flex;
    align-items: center;
    gap: var(--kpi-spacing-sm);
}

.kpi-color-field input[type="color"] {
    width: 52px;
    flex-shrink: 0;
}

@keyframes kpi-skeleton {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

@keyframes kpi-spin {
    to { transform: rotate(360deg); }
}