/* ============================================================
   Kmp.Blazor — ortak kmpGrid stilleri (tasarım-sistemi-agnostik)
   Tüm renk/ölçü --kmp-* TOKEN'larından gelir (Bootstrap'a/--bs-*'a bağımlı DEĞİL).
   Host token'ları kendi paletine eşler (Sovos indigo, saas kendi paleti); aşağıdaki
   :root yalnız makul VARSAYILANLARDIR.
   ============================================================ */
:root {
  --kmp-font: var(--kmp-font-sans, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
  --kmp-primary: #4f46e5;
  --kmp-primary-subtle: #eef2ff;
  --kmp-primary-border-subtle: #c7d2fe;
  --kmp-primary-text: #3730a3;
  --kmp-surface: #ffffff;
  --kmp-surface-muted: #f1f5f9;
  --kmp-body: #1f2937;
  --kmp-secondary: #6b7280;
  --kmp-secondary-bg: #eef2f6;
  --kmp-tertiary-bg: #f8fafc;
  --kmp-border: #e5e7eb;
  --kmp-danger: #dc2626;
  --kmp-danger-subtle: #fef2f2;
  --kmp-success: #16a34a;
  --kmp-radius-sm: .375rem;
  --kmp-radius-md: .625rem;
  --kmp-radius-lg: .875rem;
  --kmp-radius-pill: 999px;
  --kmp-shadow-xs: 0 1px 2px rgba(16, 24, 40, .06);
  --kmp-shadow-lg: 0 8px 28px rgba(16, 24, 40, .14);
  --kmp-ease: cubic-bezier(.4, 0, .2, 1);
  --kmp-transition: .18s var(--kmp-ease);
}

/* ============================================================
   Primitive'ler + layout utility'leri (Bootstrap utility'lerinin yerine)
   ============================================================ */
.kmp-btn {
  display: inline-flex; align-items: center; gap: .35rem;
  border: 1px solid var(--kmp-border); background: var(--kmp-surface); color: var(--kmp-body);
  border-radius: var(--kmp-radius-md); padding: .35rem .7rem; font-size: .85rem; line-height: 1.2;
  cursor: pointer; transition: var(--kmp-transition); font-family: inherit;
}
.kmp-btn:hover { background: var(--kmp-surface-muted); }
.kmp-btn:focus-visible { outline: 2px solid var(--kmp-primary); outline-offset: 1px; }
.kmp-btn--sm { padding: .15rem .5rem; font-size: .76rem; }
.kmp-btn--primary { background: var(--kmp-primary); border-color: var(--kmp-primary); color: #fff; }
.kmp-btn--primary:hover { filter: brightness(.96); background: var(--kmp-primary); }
.kmp-btn--success { border-color: var(--kmp-success); color: var(--kmp-success); }
.kmp-input {
  display: block; width: 100%; border: 1px solid var(--kmp-border); border-radius: var(--kmp-radius-sm);
  padding: .25rem .5rem; font-size: .85rem; background: var(--kmp-surface); color: var(--kmp-body); font-family: inherit;
}
.kmp-input:focus { outline: none; border-color: var(--kmp-primary); box-shadow: 0 0 0 .12rem var(--kmp-primary-subtle); }
.kmp-input--sm { font-size: .76rem; padding: .15rem .4rem; }
.kmp-dd { position: relative; }
.kmp-row { display: flex; align-items: center; }
.kmp-col { display: flex; flex-direction: column; }
.kmp-gap-1 { gap: .25rem; }
.kmp-gap-2 { gap: .5rem; }
.kmp-ms-auto { margin-left: auto; }
.kmp-between { justify-content: space-between; }
.kmp-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kmp-w-100 { width: 100%; }
.kmp-text-end { text-align: right; }
.kmp-muted { color: var(--kmp-secondary); }
.kmp-small { font-size: .8rem; }
.kmp-empty { text-align: center; padding: .75rem; color: var(--kmp-secondary); }

/* ============================================================
   Grid — toolbar / popover
   ============================================================ */
.kmp-grid-toolbar {
  display: flex; align-items: center; gap: .5rem; padding: .25rem 0 .75rem; flex-wrap: wrap;
}
.kmp-grid-toolbar .kmp-btn { box-shadow: none; }
.kmp-grid .kmp-dd { position: relative; }
.kmp-grid-pop {
  position: absolute; top: calc(100% + 4px); left: 0; z-index: 30;
  min-width: 210px; max-height: 340px; overflow: auto;
  background: var(--kmp-surface); border: 1px solid var(--kmp-border);
  border-radius: var(--kmp-radius-md); box-shadow: var(--kmp-shadow-lg); padding: .35rem;
}
.kmp-grid-pop .dropdown-item {
  display: block; width: 100%; text-align: left; border: 0; background: transparent;
  padding: .4rem .6rem; border-radius: var(--kmp-radius-sm); cursor: pointer;
  color: var(--kmp-body); font-size: .85rem; font-family: inherit;
}
.kmp-grid-pop .dropdown-item:hover { background: var(--kmp-tertiary-bg); }
.kmp-pill-pop { top: calc(100% + 4px); min-width: 170px; white-space: nowrap; }
/* Popover'ı sola hizala (SOL-yarı kolonlar): SAĞA, tablonun içine açılır → dar uç kolonlarda
   overflow:auto kabının dışına taşıp kırpılmaz (2 sınıf right:0'ı yener). */
.kmp-grid-pop.kmp-pop-l { left: 0; right: auto; }

/* Grouping bar (drag-to-group) */
.kmp-grid-groupbar {
  display: flex; align-items: center; gap: .4rem; padding: .55rem .75rem;
  background: var(--kmp-tertiary-bg); border: 1px dashed var(--kmp-border);
  border-radius: var(--kmp-radius-md); margin-bottom: .6rem; flex-wrap: wrap;
  transition: border-color var(--kmp-transition), background var(--kmp-transition);
}
.kmp-grid-groupbar.kmp-drop-active { border-color: var(--kmp-primary); border-style: solid; background: var(--kmp-primary-subtle); }
.kmp-group-chip {
  position: relative; display: inline-flex; align-items: center; gap: .35rem;
  background: var(--kmp-primary-subtle); color: var(--kmp-primary-text);
  box-shadow: inset 0 0 0 1px var(--kmp-primary-border-subtle);
  border-radius: var(--kmp-radius-pill); padding: .2rem .65rem; font-size: .8rem; font-weight: 500;
  cursor: grab; user-select: none;
}
.kmp-group-chip:active { cursor: grabbing; }
.kmp-group-chip--dragging { opacity: .45; }
.kmp-group-chip button { border: 0; background: transparent; cursor: pointer; color: inherit; line-height: 1; }
.kmp-group-chip__menu { font-size: .7rem; opacity: .75; padding: 0 .1rem; }
.kmp-group-chip__menu:hover { opacity: 1; }

/* Scroll container — dock-fill (az/0 satırda bile sticky filtre açılırına yer açar) */
.kmp-grid-scroll {
  min-height: 460px; max-height: calc(100vh - 240px); overflow: auto;
  border: 1px solid var(--kmp-border); border-radius: var(--kmp-radius-lg);
  background: var(--kmp-surface); box-shadow: var(--kmp-shadow-xs);
}
.kmp-grid-scroll table { margin-bottom: 0; }

/* Sort + filter header */
.kmp-sortable { cursor: pointer; user-select: none; white-space: nowrap; transition: background var(--kmp-transition); }
.kmp-sortable:hover { background: var(--kmp-tertiary-bg); }
.kmp-sort-ind { color: var(--kmp-primary); font-size: .72rem; font-weight: 700; }

/* Sticky head */
.kmp-grid thead th {
  position: sticky; background: var(--kmp-tertiary-bg); z-index: 3; color: var(--kmp-secondary);
  font-weight: 600; font-size: .76rem; text-transform: uppercase; letter-spacing: .03em;
}
.kmp-grid thead tr.kmp-head-row th { top: 0; height: 40px; vertical-align: middle; box-shadow: inset 0 -1px 0 var(--kmp-border); }
.kmp-grid thead tr.kmp-filter-row th { top: 40px; z-index: 2; background: var(--kmp-surface); box-shadow: inset 0 -1px 0 var(--kmp-border); }
.kmp-grid thead tr.kmp-filter-row th.kmp-th-pop-open { z-index: 60; }
.kmp-grid-table { table-layout: fixed; width: 100%; border-collapse: collapse; }
.kmp-grid-table th { position: relative; }
.kmp-grid-table th, .kmp-grid-table td { padding: .4rem .6rem; text-align: left; }
.kmp-grid-table td {
  overflow: hidden; text-overflow: ellipsis; vertical-align: middle;
  padding-top: .55rem; padding-bottom: .55rem; border-top: 1px solid var(--kmp-border);
}
/* Row hover + subtle zebra */
.kmp-grid-table tbody tr { transition: background var(--kmp-transition); }
.kmp-grid-table tbody tr:not(.kmp-group-row):not(.kmp-group-footer):hover > td { background: var(--kmp-primary-subtle); }
.kmp-grid-table tbody tr.kmp-data-row:nth-of-type(even) > td { background: color-mix(in srgb, var(--kmp-tertiary-bg) 45%, transparent); }
.kmp-grid-table tbody tr.kmp-data-row:nth-of-type(even):hover > td { background: var(--kmp-primary-subtle); }

/* Set-filter */
.kmp-setfilter { position: relative; }
.kmp-setfilter > .kmp-btn { font-size: .76rem; padding: .15rem .4rem; line-height: 1.2; min-width: 0; }
.kmp-setfilter--active { box-shadow: 0 0 0 .12rem var(--kmp-primary-subtle); border-radius: var(--kmp-radius-sm); }
.kmp-setfilter-pop { left: auto; right: 0; min-width: 210px; max-width: 320px; z-index: 40; }
.kmp-setfilter-all { border-bottom: 1px solid var(--kmp-border); margin-bottom: .25rem; padding-bottom: .4rem; font-weight: 600; }
.kmp-setfilter-list { max-height: 260px; overflow: auto; }
.kmp-setfilter-pop .dropdown-item { align-items: center; cursor: default; }
.kmp-setfilter-pop input[type=checkbox] { cursor: pointer; }

/* Date-range filter (gg.aa.yyyy) — tek satır tetik düğmesi → popover'da Başlangıç/Bitiş flatpickr.
   Takvim <body>'ye iliştirilir (kırpılmaz). */
.kmp-datefilter { position: relative; }
.kmp-datefilter > .kmp-btn { font-size: .76rem; padding: .15rem .4rem; line-height: 1.2; min-width: 0; }
.kmp-datefilter--active { box-shadow: 0 0 0 .12rem var(--kmp-primary-subtle); border-radius: var(--kmp-radius-sm); }
.kmp-datefilter-pop { left: auto; right: 0; min-width: 210px; max-width: 280px; z-index: 40; }
.kmp-datefilter-field { display: flex; flex-direction: column; gap: .2rem; margin-bottom: .5rem; }
.kmp-datefilter-field > label { font-size: .68rem; font-weight: 600; color: var(--kmp-secondary); text-transform: uppercase; letter-spacing: .04em; margin: 0; }
.kmp-datefilter__inp { font-size: .8rem; padding: .25rem .5rem; line-height: 1.3; cursor: pointer; }
.kmp-datefilter-clear { width: 100%; border: 0; background: transparent; color: var(--kmp-danger); font-size: .78rem; font-weight: 500; padding: .35rem; border-radius: var(--kmp-radius-sm); cursor: pointer; transition: background var(--kmp-transition); }
.kmp-datefilter-clear:hover { background: var(--kmp-danger-subtle); }
/* Çekme-aralığı tarih+saat input'ları (flatpickr datetime) */
.kmp-datetime-inp { cursor: pointer; }

/* flatpickr — accent (seçili gün) + kmp yüzeyiyle uyum (light) */
.flatpickr-calendar { font-family: var(--kmp-font); box-shadow: 0 8px 28px rgba(16, 24, 40, .18); }
.flatpickr-day.selected, .flatpickr-day.selected:hover, .flatpickr-day.startRange, .flatpickr-day.endRange { background: var(--kmp-primary); border-color: var(--kmp-primary); color: #fff; }
.flatpickr-day.today { border-color: var(--kmp-primary); }
.flatpickr-day:hover { background: var(--kmp-primary-subtle); }

/* flatpickr — DARK (host kökünde [data-bs-theme="dark"] ile; renkler --kmp-* token'larından) */
[data-bs-theme="dark"] .flatpickr-calendar { background: var(--kmp-surface); color: var(--kmp-body); border: 1px solid var(--kmp-border); box-shadow: 0 8px 28px rgba(0, 0, 0, .5); }
[data-bs-theme="dark"] .flatpickr-calendar.arrowTop::before, [data-bs-theme="dark"] .flatpickr-calendar.arrowBottom::before { border-top-color: var(--kmp-border); border-bottom-color: var(--kmp-border); }
[data-bs-theme="dark"] .flatpickr-calendar.arrowTop::after { border-bottom-color: var(--kmp-surface); }
[data-bs-theme="dark"] .flatpickr-calendar.arrowBottom::after { border-top-color: var(--kmp-surface); }
[data-bs-theme="dark"] .flatpickr-months .flatpickr-month, [data-bs-theme="dark"] .flatpickr-current-month .flatpickr-monthDropdown-months, [data-bs-theme="dark"] .flatpickr-weekday { background: transparent; color: var(--kmp-body); fill: var(--kmp-body); }
[data-bs-theme="dark"] .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month { background: var(--kmp-surface); color: var(--kmp-body); }
[data-bs-theme="dark"] .flatpickr-current-month input.cur-year { color: var(--kmp-body); }
[data-bs-theme="dark"] .flatpickr-prev-month svg, [data-bs-theme="dark"] .flatpickr-next-month svg { fill: var(--kmp-body); }
[data-bs-theme="dark"] .flatpickr-prev-month:hover svg, [data-bs-theme="dark"] .flatpickr-next-month:hover svg { fill: var(--kmp-primary); }
[data-bs-theme="dark"] .flatpickr-day { color: var(--kmp-body); }
[data-bs-theme="dark"] .flatpickr-day:hover { background: var(--kmp-surface-muted); }
[data-bs-theme="dark"] .flatpickr-day.flatpickr-disabled, [data-bs-theme="dark"] .flatpickr-day.prevMonthDay, [data-bs-theme="dark"] .flatpickr-day.nextMonthDay { color: var(--kmp-secondary); }
[data-bs-theme="dark"] .flatpickr-day.selected, [data-bs-theme="dark"] .flatpickr-day.selected:hover { background: var(--kmp-primary); border-color: var(--kmp-primary); color: #fff; }
[data-bs-theme="dark"] .numInputWrapper span.arrowUp::after { border-bottom-color: var(--kmp-body); }
[data-bs-theme="dark"] .numInputWrapper span.arrowDown::after { border-top-color: var(--kmp-body); }
[data-bs-theme="dark"] .flatpickr-calendar .flatpickr-time input, [data-bs-theme="dark"] .flatpickr-calendar .flatpickr-time .flatpickr-time-separator { color: var(--kmp-body); }

.kmp-col-resize { position: absolute; right: 0; top: 0; width: 6px; height: 100%; cursor: col-resize; user-select: none; }
.kmp-col-resize:hover { background: var(--kmp-primary); opacity: .5; }

/* Group rows */
.kmp-group-row { cursor: pointer; background: var(--kmp-secondary-bg); }
.kmp-group-row > td { font-weight: 600; }
.kmp-group-row:hover > td { background: var(--kmp-primary-subtle); }
.kmp-group-footer { font-weight: 600; background: var(--kmp-tertiary-bg); }
.kmp-group-toggle { display: inline-flex; align-items: center; justify-content: center; width: 1.4rem; height: 1.4rem; margin-right: .35rem; border-radius: var(--kmp-radius-sm); font-size: .78rem; line-height: 1; vertical-align: middle; transition: transform .12s ease, background .12s ease; }
.kmp-group-toggle--closed { color: #fff; background: var(--kmp-danger); }
.kmp-group-toggle--open { color: #fff; background: var(--kmp-success); }
.kmp-group-row:hover .kmp-group-toggle { transform: scale(1.12); }
.kmp-sum-sym { font-weight: 700; color: var(--kmp-secondary); margin-right: .4rem; }

/* Grand total — sticky bottom */
.kmp-grandtotal td { font-weight: 700; background: var(--kmp-secondary-bg); border-top: 2px solid var(--kmp-primary); position: sticky; bottom: 0; z-index: 2; }
.kmp-grandtotal-print td { font-weight: 700; border-top: 2px solid #000; }

/* Print-only table */
.kmp-print-table { display: none; }
.kmp-print-baslik { caption-side: top; text-align: left; font-weight: 600; padding: .25rem 0; color: #000; }

@media (prefers-reduced-motion: reduce) {
  .kmp-group-toggle, .kmp-grid-groupbar, .kmp-btn, .kmp-grid-table tbody tr, .kmp-sortable { transition: none; }
}

/* Yalnız grid'e ait print kuralları. Host chrome'unu (topbar/sidebar) host kendi @media print'inde gizler. */
@media print {
  .kmp-noprint { display: none !important; }
  .kmp-grid-scroll { display: none !important; }
  .kmp-print-table { display: table !important; width: 100%; table-layout: auto !important; }
  .kmp-print-table th, .kmp-print-table td { word-break: break-word; overflow-wrap: anywhere; border-color: #ccc; }
  .kmp-print-table .kmp-group-row { background: #eee !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body.kmp-print-single .kmp-grid:not(.kmp-printing) { display: none !important; }
}

/* ============================================================
   SATELLITES — KmpStatusPill / KmpSteps / KmpModal / KmpConfirm
   Tum renkler --kmp-* ve --bs-* token'larindan gelir (tasarim-sistemi-agnostik).
   ============================================================ */

/* -------- KmpStatusPill -------- */
.kmp-status-pill {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .28rem .7rem;
    border-radius: var(--kmp-radius-pill);
    font-size: .78rem;
    font-weight: 550;
    border: 1px solid transparent;
    line-height: 1.2;
}
.kmp-status-pill__dot { font-size: .5rem; line-height: 1; }
.kmp-status-pill--unknown {
    background: var(--bs-secondary-bg);
    color: var(--bs-secondary-color);
    border-color: var(--bs-border-color);
}
.kmp-status-pill--running {
    background: var(--bs-success-bg-subtle);
    color: var(--bs-success-text-emphasis);
    border-color: var(--bs-success-border-subtle);
}
.kmp-status-pill--running .kmp-status-pill__dot {
    animation: kmpPulse 2.4s var(--kmp-ease) infinite;
}
.kmp-status-pill--stopped {
    background: var(--bs-warning-bg-subtle);
    color: var(--bs-warning-text-emphasis);
    border-color: var(--bs-warning-border-subtle);
}
.kmp-status-pill--pending {
    background: var(--bs-info-bg-subtle);
    color: var(--bs-info-text-emphasis);
    border-color: var(--bs-info-border-subtle);
}
@keyframes kmpPulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: .35; }
}

/* -------- KmpSteps (premium wizard stepper) -------- */
.kmp-steps-wrapper { display: flex; flex-direction: column; gap: 0; }

.kmp-steps-header {
    display: flex;
    align-items: center;
    gap: 0;
    padding: .25rem 0 1.5rem;
    flex-wrap: nowrap;
    overflow-x: auto;
}
.kmp-step {
    display: flex;
    align-items: center;
    gap: .55rem;
    flex-shrink: 0;
    transition: opacity var(--kmp-transition);
}
.kmp-step:not(.kmp-step--active):not(.kmp-step--done) { opacity: .6; }

/* Clickable stepper: <button> sifirlanir, dokunsal hover/odak afordansi eklenir (serbest gezinme). */
.kmp-step--clickable {
    appearance: none;
    background: transparent;
    border: 0;
    margin: 0;
    padding: .25rem .4rem;
    border-radius: var(--kmp-radius, .5rem);
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
    transition: opacity var(--kmp-transition), background-color var(--kmp-transition), box-shadow var(--kmp-transition);
}
.kmp-step--clickable:hover { opacity: 1; background: var(--bs-secondary-bg, rgba(0,0,0,.05)); }
.kmp-step--clickable:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--kmp-primary) 35%, transparent);
}
@media (prefers-reduced-motion: reduce) {
    .kmp-step--clickable { transition: none; }
}

.kmp-step__num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 50%;
    font-size: .85rem;
    font-weight: 650;
    font-variant-numeric: tabular-nums;
    border: 1.5px solid var(--bs-border-color);
    background: var(--kmp-surface);
    color: var(--bs-secondary-color);
    box-shadow: var(--kmp-shadow-xs);
    transition: background var(--kmp-transition), border-color var(--kmp-transition),
                color var(--kmp-transition), box-shadow var(--kmp-transition), transform var(--kmp-transition);
    flex-shrink: 0;
}
.kmp-step--active .kmp-step__num {
    background: var(--kmp-primary);
    border-color: var(--kmp-primary);
    color: #fff;
    box-shadow: 0 0 0 4px rgba(var(--kmp-primary-rgb), .18), var(--kmp-shadow-sm);
    transform: scale(1.04);
}
.kmp-step--done .kmp-step__num {
    background: var(--bs-success);
    border-color: var(--bs-success);
    color: #fff;
    box-shadow: var(--kmp-shadow-xs);
}
.kmp-step__label {
    font-size: .85rem;
    font-weight: 500;
    white-space: nowrap;
    color: var(--bs-secondary-color);
    transition: color var(--kmp-transition);
}
.kmp-step--done .kmp-step__label { color: var(--bs-body-color); }
.kmp-step--active .kmp-step__label { color: var(--kmp-primary); font-weight: 650; }

.kmp-step__connector {
    flex: 1 1 1.5rem;
    height: 2px;
    min-width: 1rem;
    background: var(--bs-border-color);
    margin: 0 .65rem;
    border-radius: 2px;
    position: relative;
    overflow: hidden;
}
/* Connector that trails a completed step is filled */
.kmp-step--done + .kmp-step__connector { background: var(--bs-success); }

.kmp-steps-body { display: grid; }
.kmp-step-pane { grid-area: 1 / 1; }
.kmp-tab-off { visibility: hidden; }

.kmp-steps-nav {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--bs-border-color);
    margin-top: 1.5rem;
}
.kmp-steps-nav__spacer { flex: 1; }

.kmp-tabstack { display: grid; }
.kmp-tabstack > .kmp-tabstack-pane { grid-area: 1 / 1; }

/* -------- KmpModal — legacy flex-centered backdrop (kmp-modal-backdrop) -------- */
.kmp-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1080;
    background: var(--kmp-scrim-bg);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    opacity: 0;
    transition: opacity var(--kmp-transition-slow);
}
.kmp-modal-backdrop.show { opacity: 1; }
.kmp-modal {
    background: var(--kmp-surface);
    color: var(--bs-body-color);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--kmp-radius-lg);
    box-shadow: var(--kmp-shadow-xl);
    width: min(90vw, 1100px);
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: translateY(12px) scale(.98);
    transition: transform var(--kmp-transition-slow);
}
.kmp-modal-backdrop.show .kmp-modal { transform: translateY(0) scale(1); }
.kmp-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--bs-border-color);
}
.kmp-modal__title { font-size: 1.05rem; font-weight: 600; margin: 0; display: flex; align-items: center; gap: .5rem; }
.kmp-modal__body { padding: 0; overflow: auto; flex: 1 1 auto; background: var(--kmp-surface); }

@media (prefers-reduced-motion: reduce) {
    .kmp-modal-backdrop, .kmp-modal { transition: none; }
}

/* -------- KmpModal — draggable + resizable (KmpModal.razor / kmp-modal.js) -------- */
.kmp-mdrag-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1080;
    background: var(--kmp-scrim-bg);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    animation: kmpFadeIn .16s var(--kmp-ease);
}
.kmp-modal--drag {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(720px, 94vw);
    max-height: 86vh;
    z-index: 1081;
    overflow: visible;
    background: var(--kmp-surface);
    color: var(--bs-body-color);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--kmp-radius-lg);
    box-shadow: var(--kmp-shadow-xl);
    display: flex;
    flex-direction: column;
    animation: kmpModalIn .18s var(--kmp-ease);
}
.kmp-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .85rem 1.1rem;
    border-bottom: 1px solid var(--bs-border-color);
    font-weight: 600;
    cursor: move;
    user-select: none;
}
.kmp-modal-head__title { font-size: 1.05rem; font-weight: 600; }
.kmp-modal-body { padding: 1.1rem; overflow: auto; flex: 1 1 auto; }
.kmp-modal-foot {
    padding: .85rem 1.1rem;
    border-top: 1px solid var(--bs-border-color);
    background: var(--bs-tertiary-bg);
    display: flex;
    gap: .5rem;
    justify-content: flex-end;
    border-radius: 0 0 var(--kmp-radius-lg) var(--kmp-radius-lg);
}
.kmp-modal-resize {
    position: absolute;
    right: 4px;
    bottom: 4px;
    width: 16px;
    height: 16px;
    cursor: nwse-resize;
    opacity: .55;
    background: linear-gradient(135deg,
        transparent 50%, var(--bs-secondary-color) 50%, var(--bs-secondary-color) 60%,
        transparent 60%, transparent 70%, var(--bs-secondary-color) 70%, var(--bs-secondary-color) 80%,
        transparent 80%);
    transition: opacity var(--kmp-transition);
}
.kmp-modal-resize:hover { opacity: .9; }

/* -------- KmpConfirm — async confirm dialog -------- */
.kmp-confirm {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1090;
    width: min(440px, 92vw);
    background: var(--kmp-surface);
    color: var(--bs-body-color);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--kmp-radius-lg);
    box-shadow: var(--kmp-shadow-xl);
    overflow: hidden;
    animation: kmpConfirmIn .16s var(--kmp-ease);
}
.kmp-confirm__head {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: 1.15rem 1.35rem .5rem;
    font-weight: 600;
    font-size: 1.05rem;
}
.kmp-confirm__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 50%;
    background: var(--bs-primary-bg-subtle);
    color: var(--bs-primary);
    box-shadow: inset 0 0 0 1px var(--bs-primary-border-subtle);
    font-size: 1.1rem;
    flex: 0 0 auto;
}
.kmp-confirm--danger .kmp-confirm__icon {
    background: var(--bs-danger-bg-subtle);
    color: var(--bs-danger);
    box-shadow: inset 0 0 0 1px var(--bs-danger-border-subtle);
}
.kmp-confirm__body { padding: .25rem 1.35rem 1.1rem; color: var(--bs-secondary-color); line-height: 1.55; }
.kmp-confirm__foot {
    display: flex;
    justify-content: flex-end;
    gap: .5rem;
    padding: .85rem 1.35rem;
    background: var(--bs-tertiary-bg);
    border-top: 1px solid var(--bs-border-color);
}

/* -------- Satellite keyframes -------- */
@keyframes kmpFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes kmpModalIn {
    from { opacity: 0; transform: translate(-50%, -46%) scale(.97); }
    to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@keyframes kmpConfirmIn {
    from { opacity: 0; transform: translate(-50%, -46%) scale(.97); }
    to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .kmp-mdrag-backdrop, .kmp-modal--drag, .kmp-confirm { animation: none !important; }
}