/* ==========================================================
   Baziniai UI elementai: mygtukai, laukai, žymos, kortelės.
   Perkelta iš sufleris-ds-storybook (be Bootstrap), klasių vardai tie patys.
   Būsenos veikia ir tikrai (:hover, :disabled), ir per klases
   (.is-hover, .is-disabled), kad jas būtų galima parodyti statiškai.
   ========================================================== */

/* ---------- Mygtukai ---------- */
.btn-ds {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--ds-space-sm);
  height: 40px; padding: 0 var(--ds-space-xl);
  border: 1px solid transparent; border-radius: var(--ds-radius-sm);
  font-family: var(--ds-font-family); font-size: var(--ds-text-btn-size); line-height: var(--ds-text-btn-lh); font-weight: 600;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color var(--ds-duration-fast) ease, color var(--ds-duration-fast) ease, border-color var(--ds-duration-fast) ease;
}
.btn-ds:disabled, .btn-ds.is-disabled { cursor: not-allowed; }
.btn-ds--sm { height: 32px; padding: 0 var(--ds-space-lg); font-size: var(--ds-text-sm-size); } /* papildyta, nėra Figmoje */

.btn-ds--primary { background: var(--ds-teal-500); color: var(--ds-white); }
.btn-ds--primary:hover, .btn-ds--primary.is-hover { background: var(--ds-teal-600); color: var(--ds-white); }
.btn-ds--primary:disabled, .btn-ds--primary.is-disabled { background: var(--ds-teal-200); color: var(--ds-grey-500); }

.btn-ds--secondary { background: var(--ds-white); color: var(--ds-teal-600); border-color: var(--ds-teal-500); }
.btn-ds--secondary:hover, .btn-ds--secondary.is-hover { background: var(--ds-teal-100); color: var(--ds-teal-600); }
.btn-ds--secondary:disabled, .btn-ds--secondary.is-disabled { background: var(--ds-white); color: var(--ds-grey-400); border-color: var(--ds-grey-200); }

.btn-ds--tertiary { background: transparent; color: var(--ds-teal-600); }
.btn-ds--tertiary:hover, .btn-ds--tertiary.is-hover { background: var(--ds-teal-100); color: var(--ds-teal-600); }
.btn-ds--tertiary:disabled, .btn-ds--tertiary.is-disabled { background: transparent; color: var(--ds-grey-400); }

.btn-ds--destructive { background: var(--ds-red-500); color: var(--ds-white); }
.btn-ds--destructive:hover, .btn-ds--destructive.is-hover { background: var(--ds-red-600); color: var(--ds-white); }
.btn-ds--destructive:disabled, .btn-ds--destructive.is-disabled { background: var(--ds-teal-200); color: var(--ds-grey-500); }

.btn-ds--link { height: auto; padding: 0; background: transparent; color: var(--ds-teal-600); }
.btn-ds--link:hover, .btn-ds--link.is-hover { color: var(--ds-teal-800); text-decoration: underline; }
.btn-ds--link:disabled, .btn-ds--link.is-disabled { color: var(--ds-grey-400); text-decoration: none; }

.btn-ds__spinner { width: 16px; height: 16px; flex: 0 0 auto; animation: btn-ds-spin .8s linear infinite; }
@keyframes btn-ds-spin { to { transform: rotate(360deg); } }

/* ---------- Įvesties laukas ---------- */
.input-ds-field { display: flex; flex-direction: column; gap: var(--ds-space-sm); }
.input-ds-label { font-size: 14px; line-height: 20px; font-weight: 600; color: var(--ds-grey-900); }
.input-ds-required { margin-left: 2px; color: var(--ds-red-500); }
.input-ds {
  width: 100%; height: 44px; padding: 0 var(--ds-space-lg);
  border: 1px solid var(--ds-grey-300); border-radius: var(--ds-radius-sm);
  background: var(--ds-white); color: var(--ds-grey-900); font-size: var(--ds-text-md-size);
  transition: border-color var(--ds-duration-fast) ease, box-shadow var(--ds-duration-fast) ease;
}
.input-ds::placeholder { color: var(--ds-grey-400); }
.input-ds:focus, .input-ds.is-focused { outline: none; border-color: var(--ds-teal-600); box-shadow: var(--ds-focus-ring); }
.input-ds:disabled, .input-ds.is-disabled { background: var(--ds-grey-100); border-color: var(--ds-grey-200); color: var(--ds-grey-400); }
.input-ds.is-error { border-color: var(--ds-red-500); }
.input-ds-hint { font-size: var(--ds-text-sm-size); line-height: var(--ds-text-sm-lh); color: var(--ds-grey-500); }
.input-ds-hint.is-error { color: var(--ds-red-500); }

/* ---------- Žymos ---------- */
.badge-ds {
  display: inline-flex; align-items: center; padding: 2px var(--ds-space-lg);
  border: 1px solid transparent; border-radius: var(--ds-radius-full);
  font-size: var(--ds-text-sm-size); line-height: var(--ds-text-sm-lh); font-weight: 600; white-space: nowrap;
}
.badge-ds--pill    { background: var(--ds-teal-100); color: var(--ds-teal-800); }
.badge-ds--outline { background: var(--ds-white); color: var(--ds-teal-700); border-color: var(--ds-teal-300); }
.badge-ds--gray    { background: var(--ds-white); color: var(--ds-grey-700); border-color: var(--ds-grey-300); }
.badge-ds--brand   { background: var(--ds-teal-100); color: var(--ds-teal-800); border-color: var(--ds-teal-200); }
.badge-ds--error   { background: var(--ds-red-100); color: var(--ds-red-700); border-color: var(--ds-red-200); }
.badge-ds--warning { background: var(--ds-orange-100); color: var(--ds-orange-700); border-color: var(--ds-orange-200); }
.badge-ds--success { background: var(--ds-green-100); color: var(--ds-green-700); border-color: var(--ds-green-200); }

/* ---------- Kortelė (DS dar neturi bazinio komponento, tai pavyzdinis) ---------- */
.card-ds {
  padding: var(--ds-space-2xl);
  border: 1px solid var(--ds-border); border-radius: var(--ds-radius-lg);
  background: var(--ds-bg-shell); box-shadow: var(--ds-shadow-sm);
}
.card-ds__title { font-size: 18px; line-height: 26px; font-weight: 700; color: var(--ds-text-title); }
.card-ds__meta { margin-top: var(--ds-space-xxs); color: var(--ds-text-muted); }
.card-ds__divider { height: 1px; margin: var(--ds-space-lg) 0; border: 0; background: var(--ds-border); }
.card-ds__body { color: var(--ds-text-muted); }
.card-ds__footer { margin-top: var(--ds-space-xl); }