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

@layer base {
  .dark input:focus,
  .dark textarea:focus,
  .dark select:focus {
    /* Ensure pink outline/ring in dark theme */
    --tw-ring-color: theme("colors.pink.500");
    outline-color: theme("colors.pink.500");
    border-color: theme("colors.pink.500");
  }
}

@layer utilities {
  /* Drag and drop styles */
  .sortable-ghost {
    opacity: 0.4;
    background: theme("colors.blue.50");
  }

  .dark .sortable-ghost {
    background: theme("colors.zinc.700");
  }

  .sortable-drag {
    opacity: 1;
    cursor: grabbing !important;
  }

  .sortable-chosen {
    cursor: grabbing !important;
  }

  .sortable-item {
    transition: transform 0.2s ease, opacity 0.2s ease;
  }

  .sortable-item:hover {
    transform: translateY(-2px);
  }

  /* Modal animations */
  .modal-backdrop {
    animation: fadeIn 0.2s ease-out;
  }

  .modal-content {
    animation: modalSlideIn 0.3s ease-out;
  }

  @keyframes fadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

  @keyframes modalSlideIn {
    from {
      opacity: 0;
      transform: scale(0.95) translateY(-10px);
    }
    to {
      opacity: 1;
      transform: scale(1) translateY(0);
    }
  }

  /* Image skeleton loader */
  .image-skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading 1.5s ease-in-out infinite;
  }

  .dark .image-skeleton {
    background: linear-gradient(90deg, #27272a 25%, #3f3f46 50%, #27272a 75%);
    background-size: 200% 100%;
  }

  @keyframes loading {
    0% {
      background-position: 200% 0;
    }
    100% {
      background-position: -200% 0;
    }
  }
}
/*
 * 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.
 *


 */

 hr {
    border-top: 1.5px solid #999;
}

hr.hr-text {
    display:table-header-group;
    position:relative;
      border: none;
      height: 1px;
      background: #999;
      text-align: justify;
  }

/* Change Log
----------------------------------------------------------------- */
.change-log {
    border: 1px solid $color-border;
    th {
      text-align: center;
    }
    td {
      border-bottom: none !important;
    }
  }

.center-align {
  text-align: center;
}

/* Flash
----------------------------------------------------------------- */
.flash {
  padding-top: 20px;
  text-align: center;
}

.flash-notice, .flash-success {
  color: green;
}

.flash-alert, .flash-error {
  color: red;
}

.notice-info {
  color: blue;
}

.btn-group.btn-group-sm {
  float: right; /* Float the button group to the right */
  margin-right: 20px; /* Add some margin to provide space from the right edge */
}

/* buttons */
.tr-button-primary {
  @apply inline-flex items-center px-6 py-2 text-xs font-medium tracking-tight text-white uppercase bg-slate-800 border border-transparent rounded-lg cursor-pointer gap-x-2 hover:bg-blue-600;
}
.tr-button-outline {
  @apply inline-flex items-center px-6 py-2 text-xs font-medium tracking-tight text-blue-500 uppercase border border-blue-500 rounded-lg cursor-pointer gap-x-2 hover:bg-slate-100;
}
.tr-button-transparent {
  @apply inline-flex items-center px-6 py-2 text-xs font-medium tracking-tight text-blue-500 uppercase border border-transparent rounded-lg cursor-pointer gap-x-2 hover:bg-slate-100;
}

/* Define your custom pagination styles */
.custom-pagination {
  list-style: none;
  display: flex;
  justify-content: center;
}

.page-item {
  margin: 0 5px;
}

.page-link {
  display: block;
  padding: 8px 12px;
  text-decoration: none;
  color: #333;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  transition: background-color 0.3s, color 0.3s;
}

.page-link:hover {
  background-color: #e0e0e0;
  color: #555;
}

.rendered-text {
  bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5;
}

.digg_pagination.digg_pagination a, .digg_pagination span, .digg_pagination em {
  padding: 0.2em 0.5em;
  display: inline-block; /* Change from 'block' to 'inline-block' for center alignment */
  margin-right: 1px;
  border-radius: 0.25em; /* Add border-radius for rounded corners */
}

.digg_pagination .disabled {
  color: #999999;
  border: 1px solid #dddddd;
}

.digg_pagination .current {
  font-style: normal;
  font-weight: bold;
  background: #2e6ab1;
  color: white;
  border: 1px solid #2e6ab1;
}

.digg_pagination a {
  text-decoration: none;
  color: #105cb6;
  border: 1px solid #9aafe5;
}

.digg_pagination a:hover, .digg_pagination a:focus {
  color: #000033;
  border-color: #000033;
}

.digg_pagination .page_info {
  background: #2e6ab1;
  color: white;
  padding: 0.4em 0.6em;
  width: 22em;
  margin-bottom: 0.3em;
  text-align: center;
}

.digg_pagination .page_info b {
  color: #000033;
  background: #6aa6ed;
  padding: 0.1em 0.25em;
}

.digg_pagination:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

*:first-child + html .digg_pagination {
  overflow: hidden;
}

/* checkmark */
.checkmark-wrapper {
  position: relative;
}

.checkmark {
  display: block;
  width: 30px; /* Adjust size as needed */
  height: 30px; /* Adjust size as needed */
  border: 1px solid #27ae60; /* Green color */
  border-radius: 50%;
  position: absolute;
  animation: checkmark 0.5s ease-in-out; /* Animation */
}

/* Dark mode: make the checkmark pink */
.dark .checkmark {
  border-color: #ec4899; /* Tailwind pink-500 */
}
.dark .checkmark svg path:nth-of-type(2) {
  fill: #ec4899; /* Tailwind pink-500 */
}

@keyframes checkmark {
  0% {
    transform: scale(0); /* Initial scale */
  }
  100% {
    transform: scale(1); /* Final scale */
  }
}

/* tooltips ----------------------------------------------------------------- */
[data-tooltip], .tooltip {
  position: relative;
  cursor: pointer;
}
[data-tooltip]:before, [data-tooltip]:after, .tooltip:before, .tooltip:after {
  position: absolute;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out, transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
  pointer-events: none;
}
[data-tooltip]:hover:before, [data-tooltip]:hover:after, .tooltip:hover:before, .tooltip:hover:after {
  visibility: visible;
  opacity: 1;
}
.tooltip:after, [data-tooltip]:after {
  z-index: 1000;
  padding: 8px;
  width: 160px;
  background-color: rgba(42, 42, 42, 0.574);
  color: #fff;
  content: attr(data-tooltip);
  font-size: 14px;
  line-height: 1.2;
  text-align: center;
}

/* Tooltip directions */
[data-tooltip]:before, .tooltip:before {
  bottom: 100%; /* Positioning for top tooltip */
  left: 50%;
  margin-left: -6px;
  margin-bottom: -12px;
  border-top-color: rgba(0, 0, 0, 0.9);
}
[data-tooltip]:after, .tooltip:after {
  margin-left: -80px;
}

/* Positioning for bottom tooltip */
.tooltip-bottom:before, .tooltip-bottom:after {
  top: 100%;
  bottom: auto;
  left: 50%;
}
.tooltip-bottom:before {
  margin-top: -12px;
  border-bottom-color: rgba(0, 0, 0, 0.9);
}
.tooltip-bottom:hover:before, .tooltip-bottom:hover:after {
  transform: translateY(12px);
}

.icon-small {
  width: 7%; /* or use height: auto; to maintain aspect ratio */
  height: auto;
}

/* Dark mode background for small icons */
.dark .icon-small {
  background-color: #18181b; /* zinc-900 */
  padding: 4px;
  border-radius: 6px;
}

/* Dark mode overrides for pagination */
.dark .digg_pagination,
.dark .digg_pagination a,
.dark .digg_pagination span,
.dark .digg_pagination em {
  color: #ec4899; /* Tailwind pink-500 */
}

.dark .digg_pagination .current {
  color: #ec4899; /* ensure current page text is pink */
}