@import "./kleo-date.css" layer(components);
@import "./kleo-item-list.css";
@import "./kleo-amount.css" layer(components);
@import "./kleo-input.css" layer(components);
@import "./kleo-select.css";
@import "./resource-palette.css";
/* ──────────────────────────────────────────────────────────────────────────
   Kleo base components — the pieces every Kleo product renders.
   ──────────────────────────────────────────────────────────────────────────
   Written against the tokens in kleo-tokens.css and nothing else. Anything that
   describes a specific product's screens (Verkstada's map chrome, project
   covers, tenant monograms) stays with that product — a component earns a place
   here by being needed twice, not by looking generic.

   Uses @apply, so a consumer must be on Tailwind v4. Both Verkstada (4.0-beta)
   and utbodsgatt (4.1) are.
   ────────────────────────────────────────────────────────────────────────── */

@import "./kleo-native.css";

@layer components {
  .btn-primary {
    @apply bg-accent text-canvas font-medium px-4 py-2 rounded-md hover:opacity-90;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
  }
  .btn-primary[disabled],
  .btn-primary[aria-disabled="true"] {
    opacity: 0.6;
    cursor: not-allowed;
  }
  /* HTMX in-flight state for submit buttons: spinner + disabled feel.
     Targets the submit button inside any form that's currently issuing
     an htmx request. */
  form.htmx-request button[type="submit"].btn-primary {
    pointer-events: none;
    opacity: 0.85;
  }
  form.htmx-request button[type="submit"].btn-primary::before {
    content: "";
    width: 0.875rem;
    height: 0.875rem;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: kleo-spin 0.6s linear infinite;
    flex-shrink: 0;
  }
  .btn-ghost {
    @apply border border-edge text-body px-3 py-1.5 rounded-md hover:bg-surface;
  }
  /* "This tool is on" — same accent-fill convention as .vk-segment/.asset-view-toggle's
     is-active, applied to a plain .btn-ghost toggle (the embed page's Mæla button). */
  .btn-ghost.is-active {
    @apply bg-accent text-canvas border-accent;
  }

  /* ── Modal overlay ── */
  .modal-overlay {
    position: fixed; inset: 0; z-index: 200;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0,0,0,0);
    opacity: 0; pointer-events: none;
    transition: all 0.3s cubic-bezier(0.16,1,0.3,1);
  }
  .modal-overlay.active {
    background: rgba(0,0,0,0.55);
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    opacity: 1; pointer-events: all;
  }
  .modal-panel {
    width: 580px; max-width: 92vw; max-height: 88vh;
    background: var(--color-surface);
    border: 1px solid var(--color-edge);
    border-radius: 16px; overflow: hidden;
    transform: scale(0.92) translateY(20px);
    transition: transform 0.4s cubic-bezier(0.16,1,0.3,1);
    display: flex; flex-direction: column;
    box-shadow: 0 25px 80px rgba(0,0,0,0.6), 0 0 0 1px color-mix(in srgb, var(--color-accent) 5%, transparent);
  }
  .modal-overlay.active .modal-panel {
    transform: scale(1) translateY(0);
  }
  /* ── Form primitives ──
     A shared module's markup may only reference classes defined here, so the
     pieces its forms are built from have to live here too. */
  .kleo-field-label {
    @apply block text-xs text-muted mb-1;
  }
  /* The one-time code: reads as a code, not a sentence. */
  .kleo-code {
    @apply text-center text-lg;
    font-family: var(--font-mono-family);
    letter-spacing: .35em;
    text-indent: .35em;
  }
  .kleo-alt { @apply flex flex-col gap-2; }
  .kleo-mt-4 { margin-top: 1rem; }
  .kleo-mt-6 { margin-top: 1.5rem; }
  .kleo-btn-block {
    @apply w-full px-4 py-2.5 text-sm font-medium;
  }
  .kleo-alert-error {
    @apply mb-3 rounded border border-red-500/40 bg-red-500/10 px-3 py-2 text-sm text-red-300;
  }
  /* Forms render an empty alert slot that htmx fills on error. */
  .kleo-alert-error:empty { display: none; }
  .kleo-form {
    @apply space-y-3;
  }
  /* ── Auth shell ──
     A standalone page, not a card on top of the app: sign-in happens before
     there is an app. Ported from utbodsgatt's identity shell, expressed in
     tokens so each product themes it. */
  .kleo-auth-shell {
    @apply min-h-screen flex flex-col;
    background: var(--color-canvas);
    padding: 1.75rem 2rem;
  }
  .kleo-auth-top   { @apply flex justify-between items-start mb-8; }
  .kleo-auth-brand { @apply flex items-center gap-3 font-bold; color: var(--color-body); }
  .kleo-auth-tile  {
    @apply flex items-center justify-center text-white;
    width: 2.5rem; height: 2.5rem; border-radius: .75rem; background: var(--color-accent);
  }
  .kleo-auth-mid   { @apply flex-1 flex items-center justify-center; }
  .kleo-auth-col   { @apply w-full; max-width: 22rem; }
  .kleo-auth-foot  { @apply flex justify-center gap-4 text-xs; color: var(--color-muted); }

  .kleo-h1   { @apply text-2xl font-semibold; color: var(--color-body); }
  .kleo-lead { @apply mt-2 text-sm leading-relaxed; color: var(--color-muted); }

  /* Prefixed field (+354 …). The ring lives on the wrapper so the prefix is inside it. */
  .kleo-field {
    @apply flex items-center overflow-hidden rounded-lg;
    border: 1px solid var(--color-edge);
    background: var(--color-surface);
  }
  .kleo-field:focus-within {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-accent) 18%, transparent);
  }
  .kleo-field > input { @apply flex-1 border-0 bg-transparent px-3 py-2.5 text-sm; outline: 0; color: var(--color-body); }
  .kleo-field > .kleo-field-pre { @apply pl-3 text-sm; color: var(--color-muted); }

  /* One box per digit — reads as a code rather than a text field. */
  .kleo-pins { @apply flex gap-2 justify-center items-center; }
  .kleo-pins input {
    @apply text-center rounded-lg text-lg;
    width: 2.5rem; height: 3rem; outline: 0;
    font-family: var(--font-mono-family);
    border: 1px solid var(--color-edge);
    background: var(--color-surface);
    color: var(--color-body);
  }
  .kleo-pins input:focus {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-accent) 18%, transparent);
  }

  /* An alternative sign-in method: quieter than the primary form. */
  .kleo-altbtn {
    @apply flex items-center gap-3 w-full px-3 py-2.5 rounded-lg text-sm font-medium text-left;
    border: 1px solid var(--color-edge);
    background: var(--color-surface);
    color: var(--color-body);
  }
  .kleo-altbtn:hover { border-color: var(--color-accent); }
  .kleo-altbtn-ico {
    @apply flex items-center justify-center text-sm;
    width: 1.5rem; height: 1.5rem; border-radius: .35rem; background: var(--color-canvas);
  }

  .kleo-sep { @apply flex items-center gap-3 text-xs; color: var(--color-muted); }
  .kleo-sep::before, .kleo-sep::after {
    content: ""; @apply flex-1; border-top: 1px solid var(--color-edge);
  }

  .kleo-back { @apply inline-block text-sm; color: var(--color-muted); }
  .kleo-back:hover { color: var(--color-body); }

}