/* Kendu component styles — classes consumed by the React primitives in components/**.
   Interaction states live here (hover / active / focus / disabled); all values come from tokens. */

/* ── Icon ─────────────────────────────────────────────── */
.k-icon{display:inline-block;flex:none;vertical-align:-0.145em}

/* ── Button ───────────────────────────────────────────── */
.k-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-3);font-family:var(--font-sans);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-tight);border:var(--border-width) solid transparent;border-radius:var(--radius-control);cursor:pointer;text-decoration:none;white-space:nowrap;transition:var(--transition-control),transform var(--duration-instant) var(--ease-standard)}
.k-btn:hover{text-decoration:none}
.k-btn:active{transform:scale(var(--press-scale))}
.k-btn:focus-visible{box-shadow:var(--focus-ring)}
.k-btn--sm{height:var(--control-height-sm);padding:0 var(--space-5);font-size:var(--text-sm)}
.k-btn--md{height:var(--control-height);padding:0 var(--space-7);font-size:var(--text-sm)}
.k-btn--lg{height:var(--control-height-lg);padding:0 var(--space-8);font-size:var(--text-base)}
.k-btn--full{width:100%}
.k-btn--primary{background:var(--surface-brand);color:var(--text-on-brand);box-shadow:var(--shadow-xs)}
.k-btn--primary:hover{background:var(--surface-brand-hover)}
.k-btn--primary:active{background:var(--surface-brand-active)}
.k-btn--secondary{background:var(--surface-card);color:var(--text-heading);border-color:var(--border-default);box-shadow:var(--shadow-xs)}
.k-btn--secondary:hover{background:var(--surface-hover);border-color:var(--border-strong)}
.k-btn--secondary:active{background:var(--surface-active)}
.k-btn--ghost{background:transparent;color:var(--text-body)}
.k-btn--ghost:hover{background:var(--surface-hover);color:var(--text-heading)}
.k-btn--ghost:active{background:var(--surface-active)}
.k-btn--danger{background:var(--red-500);color:var(--text-inverse)}
.k-btn--danger:hover{filter:brightness(.93)}
.k-btn--inverse{background:rgba(255,255,255,.10);color:var(--text-on-ink);border-color:var(--border-inverse)}
.k-btn--inverse:hover{background:rgba(255,255,255,.18)}
.k-btn[disabled],.k-btn[aria-disabled="true"]{cursor:not-allowed;pointer-events:none;background:var(--surface-disabled);color:var(--text-subtle);border-color:transparent;box-shadow:none}
.k-btn__spin{width:1em;height:1em;border-radius:var(--radius-pill);border:1.5px solid currentColor;border-top-color:transparent;animation:k-spin .7s linear infinite}
@keyframes k-spin{to{transform:rotate(360deg)}}

/* ── IconButton ───────────────────────────────────────── */
.k-iconbtn{display:inline-flex;align-items:center;justify-content:center;border:var(--border-width) solid transparent;border-radius:var(--radius-control);background:transparent;color:var(--text-muted);cursor:pointer;transition:var(--transition-control)}
.k-iconbtn:hover{background:var(--surface-hover);color:var(--text-heading)}
.k-iconbtn:active{background:var(--surface-active)}
.k-iconbtn:focus-visible{box-shadow:var(--focus-ring)}
.k-iconbtn--sm{width:28px;height:28px}
.k-iconbtn--md{width:34px;height:34px}
.k-iconbtn--lg{width:40px;height:40px}
.k-iconbtn--outline{border-color:var(--border-default);background:var(--surface-card)}
.k-iconbtn--solid{background:var(--surface-brand);color:var(--text-on-brand)}
.k-iconbtn--solid:hover{background:var(--surface-brand-hover);color:var(--text-on-brand)}
.k-iconbtn[disabled]{cursor:not-allowed;color:var(--text-subtle);background:transparent}

/* ── Card ─────────────────────────────────────────────── */
.k-card{background:var(--surface-card);border:var(--border-width) solid var(--border-subtle);border-radius:var(--radius-card);box-shadow:var(--shadow-sm);transition:var(--transition-surface)}
.k-card--flat{box-shadow:none}
.k-card--raised{box-shadow:var(--shadow-md)}
.k-card--interactive{cursor:pointer}
.k-card--interactive:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px);border-color:var(--border-default)}
.k-card--interactive:active{transform:translateY(0)}
.k-card--brand{background:var(--surface-brand-soft);border-color:var(--border-brand)}
.k-card__pad{padding:var(--pad-card)}
.k-card__pad--tight{padding:var(--space-6)}
.k-card__pad--roomy{padding:var(--pad-card-lg)}
.k-card__header{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-6);padding:var(--space-7) var(--pad-card);border-bottom:var(--border-width) solid var(--border-subtle)}
.k-card__footer{padding:var(--space-6) var(--pad-card);border-top:var(--border-width) solid var(--border-subtle);background:var(--surface-sunken);border-radius:0 0 var(--radius-card) var(--radius-card)}

/* ── Badge (status) ───────────────────────────────────── */
.k-badge{display:inline-flex;align-items:center;gap:var(--space-2);height:22px;padding:0 var(--space-4);border-radius:var(--radius-pill);border:var(--border-width) solid;font-size:var(--text-xs);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-normal);white-space:nowrap}
.k-badge--lg{height:26px;padding:0 var(--space-5);font-size:var(--text-sm)}
.k-badge--neutral{color:var(--status-neutral-fg);background:var(--status-neutral-bg);border-color:var(--status-neutral-border)}
.k-badge--success{color:var(--status-success-fg);background:var(--status-success-bg);border-color:var(--status-success-border)}
.k-badge--warning{color:var(--status-warning-fg);background:var(--status-warning-bg);border-color:var(--status-warning-border)}
.k-badge--danger{color:var(--status-danger-fg);background:var(--status-danger-bg);border-color:var(--status-danger-border)}
.k-badge--info{color:var(--status-info-fg);background:var(--status-info-bg);border-color:var(--status-info-border)}
.k-badge--brand{color:var(--text-brand);background:var(--surface-brand-soft);border-color:var(--border-brand)}
.k-badge__dot{width:6px;height:6px;border-radius:var(--radius-pill);background:currentColor}

/* ── Tag (removable label) ────────────────────────────── */
.k-tag{display:inline-flex;align-items:center;gap:var(--space-3);height:26px;padding:0 var(--space-4);border-radius:var(--radius-xs);border:var(--border-width) solid var(--border-default);background:var(--surface-card);color:var(--text-body);font-size:var(--text-xs);font-weight:var(--weight-medium);transition:var(--transition-control)}
.k-tag--soft{background:var(--surface-sunken);border-color:transparent}
.k-tag--brand{background:var(--surface-brand-soft);border-color:var(--border-brand);color:var(--text-brand)}
.k-tag--clickable{cursor:pointer}
.k-tag--clickable:hover{border-color:var(--border-strong);background:var(--surface-hover)}
.k-tag__x{display:inline-flex;align-items:center;justify-content:center;border:0;background:none;padding:0;margin-right:-2px;color:var(--text-subtle);cursor:pointer;border-radius:var(--radius-xs)}
.k-tag__x:hover{color:var(--text-heading)}

/* ── Field shell (label / hint / error) ───────────────── */
.k-field{display:flex;flex-direction:column;gap:var(--space-3)}
.k-field__label{font-size:var(--text-sm);font-weight:var(--weight-semibold);color:var(--text-heading)}
.k-field__req{color:var(--text-danger);margin-left:2px}
.k-field__hint{font-size:var(--text-xs);color:var(--text-muted)}
.k-field__error{font-size:var(--text-xs);color:var(--text-danger);font-weight:var(--weight-medium)}

/* ── Input / Textarea / Select ────────────────────────── */
.k-input{width:100%;height:var(--control-height);padding:0 var(--space-5);background:var(--surface-card);border:var(--border-width) solid var(--border-default);border-radius:var(--radius-control);color:var(--text-heading);font-size:var(--text-sm);box-shadow:var(--shadow-inset-sunken);transition:var(--transition-control)}
.k-input::placeholder{color:var(--text-subtle)}
.k-input:hover{border-color:var(--border-strong)}
.k-input:focus{outline:none;border-color:var(--border-focus);box-shadow:var(--focus-ring)}
.k-input--sm{height:var(--control-height-sm);font-size:var(--text-xs)}
.k-input--lg{height:var(--control-height-lg);font-size:var(--text-base)}
.k-input--invalid{border-color:var(--red-500)}
.k-input--invalid:focus{box-shadow:0 0 0 3px rgba(179,56,44,.22)}
.k-input[disabled]{background:var(--surface-disabled);color:var(--text-subtle);cursor:not-allowed;box-shadow:none}
.k-input--textarea{height:auto;min-height:96px;padding:var(--space-5);line-height:var(--leading-normal);resize:vertical}
.k-input__wrap{position:relative;display:flex;align-items:center}
.k-input__affix{position:absolute;display:flex;align-items:center;color:var(--text-subtle);pointer-events:none}
.k-input__affix--start{left:var(--space-5)}
.k-input__affix--end{right:var(--space-5)}
.k-input--has-start{padding-left:calc(var(--space-5) * 2 + 16px)}
.k-input--has-end{padding-right:calc(var(--space-5) * 2 + 16px)}
.k-select{appearance:none;cursor:pointer;padding-right:calc(var(--space-5) * 2 + 14px);box-shadow:none}

/* ── Checkbox / Radio ─────────────────────────────────── */
.k-check{display:inline-flex;align-items:flex-start;gap:var(--space-4);cursor:pointer;font-size:var(--text-sm);color:var(--text-body)}
.k-check--disabled{cursor:not-allowed;color:var(--text-subtle)}
.k-check__box{position:relative;flex:none;width:18px;height:18px;margin-top:2px;border:var(--border-width-strong) solid var(--border-strong);border-radius:var(--radius-checkbox);background:var(--surface-card);display:flex;align-items:center;justify-content:center;transition:var(--transition-control)}
.k-check__box--radio{border-radius:var(--radius-pill)}
.k-check:hover .k-check__box{border-color:var(--border-focus)}
.k-check__box--on{background:var(--surface-brand);border-color:var(--surface-brand);color:var(--text-on-brand)}
.k-check__box--on.k-check__box--radio{background:var(--surface-card);border-color:var(--surface-brand)}
.k-check__dot{width:8px;height:8px;border-radius:var(--radius-pill);background:var(--surface-brand)}
.k-check__label{display:flex;flex-direction:column;gap:2px}
.k-check__desc{font-size:var(--text-xs);color:var(--text-muted)}
.k-check input{position:absolute;opacity:0;width:0;height:0}
.k-check input:focus-visible + .k-check__box{box-shadow:var(--focus-ring)}

/* ── Switch ───────────────────────────────────────────── */
.k-switch{display:inline-flex;align-items:center;gap:var(--space-5);cursor:pointer;font-size:var(--text-sm);color:var(--text-body)}
.k-switch__track{flex:none;width:38px;height:22px;padding:2px;border-radius:var(--radius-pill);background:var(--neutral-300);transition:background-color var(--duration-normal) var(--ease-standard)}
.k-switch__track--on{background:var(--surface-brand)}
.k-switch__knob{width:18px;height:18px;border-radius:var(--radius-pill);background:var(--neutral-0);box-shadow:var(--shadow-sm);transition:transform var(--duration-normal) var(--ease-spring)}
.k-switch__knob--on{transform:translateX(16px)}
.k-switch--disabled{cursor:not-allowed;opacity:.55}
.k-switch input{position:absolute;opacity:0;width:0;height:0}
.k-switch input:focus-visible + .k-switch__track{box-shadow:var(--focus-ring)}

/* ── Tabs ─────────────────────────────────────────────── */
.k-tabs{display:flex;gap:var(--space-8);border-bottom:var(--border-width) solid var(--border-default)}
.k-tab{position:relative;display:inline-flex;align-items:center;gap:var(--space-3);padding:0 0 var(--space-5);border:0;background:none;cursor:pointer;font-size:var(--text-sm);font-weight:var(--weight-semibold);color:var(--text-muted);transition:color var(--duration-fast) var(--ease-standard)}
.k-tab:hover{color:var(--text-heading)}
.k-tab--active{color:var(--text-brand)}
.k-tab--active::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--surface-brand);border-radius:var(--radius-pill)}
.k-tab[disabled]{color:var(--text-subtle);cursor:not-allowed}
.k-tab__count{font-size:var(--text-2xs);font-weight:var(--weight-semibold);padding:1px var(--space-3);border-radius:var(--radius-pill);background:var(--surface-sunken);color:var(--text-muted)}
.k-tabs--pill{gap:var(--space-2);border:0;padding:3px;background:var(--surface-sunken);border-radius:var(--radius-md);display:inline-flex}
.k-tabs--pill .k-tab{padding:var(--space-3) var(--space-6);border-radius:var(--radius-sm)}
.k-tabs--pill .k-tab--active{background:var(--surface-card);color:var(--text-heading);box-shadow:var(--shadow-xs)}
.k-tabs--pill .k-tab--active::after{display:none}

/* ── Dialog ───────────────────────────────────────────── */
.k-dialog__scrim{position:fixed;inset:0;background:var(--surface-overlay);backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center;padding:var(--space-9);z-index:60;animation:k-fade var(--duration-normal) var(--ease-out)}
.k-dialog{width:100%;background:var(--surface-card);border-radius:var(--radius-panel);box-shadow:var(--shadow-xl);overflow:hidden;animation:k-rise var(--duration-normal) var(--ease-out)}
.k-dialog__head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-6);padding:var(--space-9) var(--space-9) var(--space-6)}
.k-dialog__title{font-size:var(--text-xl);font-weight:var(--weight-semibold);color:var(--text-heading);letter-spacing:var(--tracking-tight)}
.k-dialog__desc{margin-top:var(--space-3);font-size:var(--text-sm);color:var(--text-muted)}
.k-dialog__body{padding:0 var(--space-9) var(--space-9);font-size:var(--text-sm)}
.k-dialog__foot{display:flex;justify-content:flex-end;gap:var(--space-4);padding:var(--space-6) var(--space-9);background:var(--surface-sunken);border-top:var(--border-width) solid var(--border-subtle)}
@keyframes k-fade{from{opacity:0}to{opacity:1}}
@keyframes k-rise{from{opacity:0;transform:translateY(8px) scale(.99)}to{opacity:1;transform:none}}

/* ── Toast ────────────────────────────────────────────── */
.k-toast{display:flex;align-items:flex-start;gap:var(--space-5);min-width:300px;max-width:420px;padding:var(--space-6);background:var(--surface-inverse);color:var(--text-on-ink);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);font-size:var(--text-sm);animation:k-rise var(--duration-normal) var(--ease-out)}
.k-toast--light{background:var(--surface-card);color:var(--text-heading);border:var(--border-width) solid var(--border-default)}
.k-toast__icon{flex:none;margin-top:1px}
.k-toast__title{font-weight:var(--weight-semibold)}
.k-toast__desc{margin-top:2px;color:var(--text-on-ink-muted)}
.k-toast--light .k-toast__desc{color:var(--text-muted)}
.k-toast__x{margin-left:auto;border:0;background:none;color:inherit;opacity:.6;cursor:pointer;padding:0}
.k-toast__x:hover{opacity:1}

/* ── Tooltip ──────────────────────────────────────────── */
.k-tip{position:relative;display:inline-flex}
.k-tip__bubble{position:absolute;z-index:70;padding:var(--space-3) var(--space-5);background:var(--ink-900);color:var(--text-on-ink);font-size:var(--text-xs);font-weight:var(--weight-medium);border-radius:var(--radius-sm);box-shadow:var(--shadow-md);white-space:nowrap;pointer-events:none;opacity:0;transform:translateY(2px);transition:opacity var(--duration-fast) var(--ease-standard),transform var(--duration-fast) var(--ease-standard)}
.k-tip:hover .k-tip__bubble,.k-tip__bubble--open{opacity:1;transform:none}
.k-tip__bubble--top{bottom:calc(100% + 6px);left:50%;translate:-50% 0}
.k-tip__bubble--bottom{top:calc(100% + 6px);left:50%;translate:-50% 0}
.k-tip__bubble--right{left:calc(100% + 6px);top:50%;translate:0 -50%}
.k-tip__bubble--left{right:calc(100% + 6px);top:50%;translate:0 -50%}