@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  /* ── Card ─────────────────────────────────────────────────────────── */
  .card {
    @apply relative flex flex-col min-w-0 break-words bg-white shadow-soft-xl rounded-2xl bg-clip-border;
  }
  .card-header {
    /* border-black/12.5 */
    @apply  rounded-t-2xl border-b-0 border-solid p-6 pb-0;
  }
  .card-body {
    @apply flex-auto p-6 pt-4;
  }

  /* ── Buttons ──────────────────────────────────────────────────────── */
  /* Use display (inline-block / inline-flex) and sizing (px-* py-* w-*) as utilities alongside these. */
  .btn-primary {
    @apply font-bold text-center text-white uppercase align-middle transition-all ease-in border-0 rounded-lg select-none shadow-soft-md bg-150 bg-x-25 leading-pro text-xs bg-gradient-to-tl from-purple-700 to-pink-500 hover:shadow-soft-2xl hover:scale-102 disabled:opacity-60 disabled:cursor-not-allowed disabled:hover:scale-100;
  }
  .btn-white {
    @apply font-bold text-center text-slate-700 uppercase align-middle transition-all ease-in bg-white border border-solid border-gray-300 rounded-lg shadow-soft-sm leading-pro text-xs hover:shadow-soft-md hover:scale-102;
  }
  .btn-outlined {
    @apply font-bold text-center uppercase align-middle transition-all bg-transparent border border-solid rounded-lg shadow-none cursor-pointer leading-pro text-xs border-fuchsia-500 ease-soft-in text-fuchsia-500 hover:border-fuchsia-500 active:bg-fuchsia-500 hover:bg-transparent hover:shadow-none;
  }

  /* ── Forms ────────────────────────────────────────────────────────── */
  .form-label {
    @apply mb-2 text-xs font-semibold text-slate-700 uppercase block;
  }
  .form-input {
    @apply text-sm focus:shadow-soft-primary-outline ease-soft block w-full rounded-lg border border-solid border-gray-300 bg-white bg-clip-padding py-2 px-3 text-gray-700 transition-all placeholder:text-gray-500 focus:border-fuchsia-300 focus:outline-none focus:transition-shadow;
  }

  /* ── Sidebar nav ──────────────────────────────────────────────────── */
  /* .nav-item-active and .nav-item-inactive are modifiers applied alongside .nav-item */
  .nav-item {
    @apply py-2.7 text-sm ease-nav-brand my-0 mx-4 flex items-center whitespace-nowrap rounded-lg px-4 font-semibold transition-colors;
  }
  .nav-item-active {
    @apply shadow-soft-xl bg-white text-slate-700;
  }
  .nav-item-inactive {
    @apply text-slate-500 hover:text-slate-700;
  }
  /* .nav-icon-active and .nav-icon-inactive are modifiers applied alongside .nav-icon */
  .nav-icon {
    @apply mr-2 flex h-8 w-8 items-center justify-center rounded-lg bg-center stroke-0 text-center xl:p-2.5;
  }
  .nav-icon-active {
    @apply bg-gradient-to-tl from-purple-700 to-pink-500 shadow-soft-2xl;
  }
  .nav-icon-inactive {
    @apply bg-white shadow-soft-sm;
  }
}