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

@layer components {
  .btn {
    @apply rounded-md py-1.5 px-6 bg-gray-100 font-medium cursor-pointer text-center flex justify-items-center gap-3 items-center self-center justify-center overflow-hidden outline-pink-600;
  }
  .btn span {
    @apply truncate text-ellipsis;
  }
  .btn-primary {
    @apply bg-pink-600 text-white outline-offset-2;
  }
  .btn-danger {
    @apply text-red-600;
  }
  .btn-icon {
    @apply inline-flex items-center justify-center w-5 h-5 -ml-2;
  }
  .btn-primary .btn-icon {
    @apply invert;
  }
  button.link, a.link {
    @apply text-pink-700 hover:text-pink-800;
  }
  a.disabled {
    @apply pointer-events-none;
  }

  .page-header {
    @apply mb-4;
  }
  .page-header .title {
    @apply text-2xl font-bold;
  }

  .header-link {
    @apply relative py-1.5 px-4 rounded-md;
  }
  .header-link.active {
    @apply bg-gray-200/50;
  }
  .menu-item {
    @apply px-4 py-2 text-gray-700 text-sm flex gap-x-3;
  }
  .menu-item img {
    @apply size-5;
  }
  .nav-link {
    @apply decoration-pink-500 decoration-4 hover:underline underline-offset-8
  }
  .nav-link.active {
    @apply underline;
  }

  .table-header {
    @apply mb-4 grid gap-y-2;
  }
  .table-header .title {
    @apply text-2xl font-bold row-[1] col-[1] flex items-center gap-x-4;
  }
  .table-header .sub-title {
    @apply row-[2] col-span-2;
  }
  .table-header .actions {
    @apply row-[1] col-[2] justify-end flex gap-2 flex-wrap;
  }

  .table {
    @apply table-fixed w-full text-sm text-gray-900 border border-gray-200 shadow-md rounded-lg;
  }
  .table thead th {
    @apply bg-gray-100 py-4 px-4 uppercase text-left text-xs font-medium truncate;
  }
  .table--condensed thead th {
    @apply py-2;
  }
  .table thead th:last-child {
    @apply text-right;
  }
  .table tbody td {
    @apply py-6 px-4 text-sm text-gray-900 truncate;
  }
  .table--condensed tbody td {
    @apply py-4;
  }
  .table tbody tr {
    @apply border-b border-gray-100 relative;
  }
  .table tbody.clickable tr {
    @apply cursor-pointer hover:bg-gray-50;
  }
  .table td.actions {
    @apply h-full items-center;
  }
  .table tbody td.actions {
    @apply flex items-center gap-1;
  }
  .table tbody td.actions.hoverable {
    @apply hidden absolute right-1 pl-4;
  }
  .table tbody tr:hover td.hoverable {
    @apply flex bg-gray-50;
  }

  input[type="text"], input[type="email"], input[type="password"], input[type="date"], input[type="number"], textarea {
    @apply w-full appearance-none block shadow rounded-md border border-gray-400 placeholder-gray-500 focus:outline-1 focus:outline-pink-600 px-3 py-2;
  }
  input:disabled, textarea:disabled {
    @apply bg-gray-50 text-gray-500 cursor-not-allowed;
  }
  select {
    @apply w-full appearance-none block shadow rounded-md border border-gray-400 placeholder-gray-500 focus:outline-1 focus:outline-pink-600 px-3 py-2;
    background-image: url("/assets/dropdown_arrow-357d1b0f.svg");
    background-repeat: no-repeat;
    background-position: center right 1em;
    background-size: 1em;
  }
  input[type="color"] {
    @apply h-10 w-10 border border-gray-400 bg-white rounded-md p-0.5 appearance-none block;
  }
  [type="checkbox"] {
    @apply h-5 w-5 rounded-md accent-pink-500 text-pink-500 bg-gray-100 border-gray-300 ;
  }
  .multi-input {
    @apply w-full block shadow rounded-md border border-gray-400 focus-within:outline-2 focus-within:outline-pink-600 focus-within:outline;
  }
  .multi-input .row {
    @apply h-10 w-full flex items-center px-3 py-2 outline-none focus:ring-0 focus:outline-none;
  }
  .multi-input .row:not(:last-child) {
    @apply border-b border-gray-400;
  }
  .form {
    @apply flex flex-col gap-6;
  }
  .input-group {
    @apply flex flex-col gap-1 justify-items-stretch;
  }
  .input-group label {
    @apply text-gray-700 text-sm font-bold;
  }
  .form-actions {
    @apply mt-3;
  }
  .checkbox-group {
    @apply flex gap-2 items-center;
  }

  .details-header {
    @apply mb-4 grid;
  }
  .details-header .title {
    @apply text-2xl font-bold row-[1] col-[1];
  }
  .details-header .sub-title {
    @apply row-[2] col-[1] ;
  }
  .details-header .actions {
    @apply row-[1] col-[2] justify-end flex gap-2;
  }
  .details {
    @apply flex flex-col gap-4;
  }
  .details-group label {
    @apply text-gray-700 text-sm font-bold;
  }
  .details-group .value {
    @apply block text-gray-700;
  }
  .details-buttons {
    @apply mt-3;
  }


  .alert {
    @apply px-4 py-3 rounded relative mb-4;
  }
  .alert--error {
    @apply bg-red-100 border border-red-400 text-red-700;
  }

  .label {
    @apply text-xs font-medium text-gray-500 uppercase;
  }
  .card {
    @apply bg-white shadow-sm px-8 py-10;
  }
  .blog {
    @apply !text-gray-800 leading-7;
  }
  .blog p {
    @apply mb-4;
  }
  .blog h2 {
    @apply text-lg font-bold text-gray-900 mt-12 mb-4;
  }
  .blog ul {
    @apply list-disc list-outside ml-8;
  }
  .blog li {
    @apply mt-2;
  }
  .blog-card {
    @apply px-8 py-10 bg-pink-100 rounded-md rounded-br-3xl;
  }
  .progress-container {
    @apply w-full h-1 fixed z-50 left-0 top-0;
  }
  
  .progress-bar {
    @apply w-0 h-1 bg-pink-500;
  }

  .password-strength-bar {
    @apply absolute right-0 bottom-0 transform bg-gray-800 text-white text-xs rounded px-6 opacity-0 transition-opacity duration-300 pointer-events-none group-hover:opacity-100 group-focus-within:opacity-100;
  }
  .level-1 .password-strength-bar {
    @apply bg-gray-500;
  }
  .level-1 .form-control {
    @apply focus:outline-gray-400;
  }
  .level-2 .password-strength-bar {
    @apply bg-red-500;
  }
  .level-2 .form-control {
    @apply focus:outline-red-500;
  }
  .level-3 .password-strength-bar {
    @apply bg-orange-500;
  }
  .level-3 .form-control {
    @apply focus:outline-orange-500;
  }
  .level-4 .password-strength-bar {
    @apply bg-green-500;
  }
  .level-4 .form-control {
    @apply focus:outline-green-500;
  }
  .level-5 .password-strength-bar {
    @apply bg-green-500;
  }
  .level-5 .form-control {
    @apply focus:outline-green-500;
  }

  .confirmation {
    @apply mx-auto max-w-md;
  }
  .confirmation-title {
    @apply text-2xl font-bold mb-4;
  }
  .confirmation-content {
    @apply text-gray-700 mb-4 flex flex-col gap-4;
  }
  .confirmation-actions {
    @apply flex gap-4;
  }
  .notice {
    @apply absolute w-96 max-w-full top-8 right-2/4 translate-y-1/4 translate-x-2/4 py-2 px-3 font-medium rounded-lg z-50 opacity-0 transition-all;
  }
  .notice.show {
    @apply opacity-100 translate-y-2/4 duration-200;
  }
  .notice.hide {
    @apply opacity-0 translate-y-1/4 duration-700;
  }
  .notice-title {
    @apply font-bold;
  }
  .notice--success {
    @apply bg-green-50 my-2 text-green-600;
  }
  .notice--success .notice-title {
    @apply text-green-600;
  }
  .notice--alert {
    @apply bg-red-50 my-2 text-red-500;
  }
  .notice--alert .notice-title {
    @apply text-red-600;
  }
  .modal-container {
    @apply fixed inset-0 bg-gray-800 bg-opacity-50 transition-opacity duration-300 ease-out opacity-0;
  }
  .modal-container.modal--show {
    @apply opacity-100;
  }
  .modal-container .modal {
    @apply absolute bottom-0 left-0 right-0 md:left-auto md:w-3/6 md:top-0 xl:relative xl:max-w-2xl max-h-screen overflow-y-auto mx-auto bg-white shadow-lg rounded-lg md:rounded-none xl:rounded-lg transition-all duration-300 ease-out translate-y-full md:translate-y-0 md:translate-x-full xl:translate-x-0 xl:scale-75;
  }
  .modal-content {
    @apply p-6 md:p-8 lg:p-12;
  }
  .modal-container.modal--show .modal {
    @apply scale-100 opacity-100 translate-y-0 translate-x-0;
  }
  .badge {
    @apply text-xs font-medium me-2 px-2.5 py-0.5 rounded-full;
  }
  .badge--green {
    @apply bg-green-100 text-green-800;
  }
  .badge--gray {
    @apply bg-gray-100 text-gray-800;
  }
  .badge--pink {
    @apply bg-pink-100 text-pink-800;
  }
  .badge--red {
    @apply bg-red-200 text-red-800;
  }
  .counter {
    @apply absolute inline-flex items-center justify-center w-6 h-6 text-xs font-bold text-white bg-red-500 border-2 border-white rounded-full -top-2 -end-2;
  }
  .legal {
    @apply mx-auto max-w-3xl;
  }
  .legal h1 {
    @apply text-3xl;
  }
  .legal h2 {
    @apply text-xl mt-8 mb-2;
  }
  .legal p {
    @apply mb-2;
  }
  .legal ul {
    @apply list-disc ml-5;
  }
  .legal strong {
    @apply font-medium;
  }
  .legal a {
    @apply underline;
  }
}