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

.asy-btn-index {
  @apply rounded-lg py-3 px-5 bg-gray-500 inline-block font-medium text-white;
}
.asy-btn-primary {
  @apply rounded-lg py-3 px-5 bg-blue-100 inline-block font-medium;
}
.asy-btn-create {
  @apply rounded-lg py-3 px-5 bg-green-100 inline-block font-medium;
}
.asy-btn-edit {
  @apply rounded-lg py-3 px-5 bg-yellow-100 inline-block font-medium;
}
.asy-btn-destroy {
  @apply rounded-lg py-3 px-5 bg-red-100 inline-block font-medium;
}

.asy-bd {
  @apply border-2 border-black border-solid
}

/*

@layer components {
  .btn-primary {
    @apply py-2 px-4 bg-blue-200;
  }
}

*/

@layer components {

  .nowrap-cells td,
  .nowrap-cells th {
    @apply whitespace-nowrap;
  }

  .dashboard-appointments-table td,
  .dashboard-appointments-table th {
    @apply whitespace-nowrap;
  }

  .table-header {
    @apply py-2 px-4 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider;
  }

  .table-cell {
    @apply py-2 px-4 border-b border-gray-200
  }

  .link {
    @apply text-blue-500 hover:text-blue-600
    }
}

/* for will-paginate */
/* included here so it's loaded after tailwindcss and has access to the tailwindcss classes */

.pagination {
  @apply flex border border-gray-300 rounded overflow-hidden;
}

.pagination li {
  @apply border-r border-gray-300;
}

.pagination li:first-child {
  @apply rounded-l;
}

.pagination li:last-child {
  @apply border-r-0 rounded-r;
}

.pagination a,
.pagination span,
.pagination em.current {
  @apply block py-2 px-4 text-sm text-gray-700 bg-white font-normal;
}

.pagination a:hover {
  @apply bg-blue-50;
}

.pagination a:focus {
  @apply outline-none ring-2 ring-blue-200 ring-opacity-50;
}

.pagination em.current {
  @apply font-bold bg-blue-600 text-white;
}

.pagination .disabled,
.pagination .disabled a,
.pagination .disabled span {
  @apply text-gray-500 bg-gray-200 cursor-not-allowed;
}
/* toggle */

.toggle-bg {
    position: relative;
    width: 3rem;  /* Reducing width to 3rem */
    height: 1.5rem; /* Reducing height to match typical toggle switch heights */
    background-color: #ccc; /* default background color */
    border-radius: 999px; /* fully rounded ends */
    transition: background-color 0.2s; /* smooth transition for background color */
  }

  .toggle-dot {
    position: absolute;
    width: 1.3rem; /* Matching the height of the toggle-bg */
    height: 1.3rem; /* Making the dot a perfect circle */
    top: 0.1rem; /* Align top to the container */
    left: 0.1rem; /* small gap from the left side */
    background-color: white; /* color of the dot */
    border-radius: 50%; /* make it circular */
    transition: transform 0.2s; /* smooth transition for moving */
  }

  #toggleCancelled:checked + .toggle-bg {
    background-color: #4F46E5; /* darker background when active */
  }

  #toggleCancelled:checked + .toggle-bg > .toggle-dot {
    transform: translateX(1.5rem); /* Adjust this to correctly move the dot to the opposite end */
  }
/* Tooltip CSS using pseudo-elements */
[data-tooltip]:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  z-index: 50;
  background: black;
  color: white;
  text-align: center;
  padding: 2px 10px;
  border-radius: 4px;
  white-space: pre-wrap;
  max-width: 300px;
  word-break: break-word;
  bottom: 100%; /* Position above the cell */
  left: 50%; /* Center horizontally */
  transform: translateX(-50%) translateY(-10px); /* Adjust to hover slightly above */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
}

[data-tooltip]:hover::after {
  opacity: 1;
  visibility: visible;
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */

 .indeterminate-progress-bar {
    /* Color */
    background-color: #d1d5db;

    /* Rounded border */
    border-radius: 9999px;

    /* Size */
    height: 0.5rem;

    position: relative;
    overflow: hidden;
}

.indeterminate-progress-bar__progress {
    /* Color */
    background-color: #3b82f6;

    /* Rounded border */
    border-radius: 9999px;

    /* Absolute position */
    position: absolute;
    bottom: 0;
    top: 0;
    width: 50%;

    /* Move the bar infinitely */
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-name: indeterminate-progress-bar;
}

@keyframes indeterminate-progress-bar {
    from {
        left: -50%;
    }
    to {
        left: 100%;
    }
}

 #patients-index-header {
   background-color: #f5f5f5;
   padding: 10px;
   border-bottom: 1px solid #e3e3e3;
 }

 /* use media queries to stack the items in the patients-index-header element vertically on smaller screens */
@media (max-width: 768px) {
    #patients-index-header {
        display: block;
        text-align: center;
    }

    #patients-index-header > div {
        display: block;
        padding-top: 10px;
        margin-bottom: 10px;
        margin-top: 5px;
    }

    #patients-index-header > div > a {
     }
}