/* External fonts and libraries */
@import url('https://fonts.cdnfonts.com/css/nimbus-sans-l');
/* @import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap'); */
@import url('https://unpkg.com/vanillajs-datepicker@1.3.4/dist/css/datepicker.min.css');

/* Component styles */
/* @import "components/datepicker.css"; */
@import "components/records.css";

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

@layer components {
  /* td .record-head .attribute-value:first-child,
  td .attribute-value:first-child:not(:only-child) {
    @apply font-semibold;
  }

  .attribute-value:not(:first-child) {
    @apply text-gray-600 dark:text-gray-400;
  }

  td .attribute-value:not(:first-child) {
    @apply text-xs;
  }

  .meta-group .meta-object {
    @apply py-2 px-4 border-l border-blue-300;
  }

  table.table-with-row-number {
    counter-reset: rowNumber;

    tbody tr {
      counter-increment: rowNumber;

      td.row-number::before {
        content: counter(rowNumber);
      }
    }
  } */

  /* .btn-primary { */
  /*   @apply py-2 px-4 bg-blue-200; */
  /* } */
  .nested-fields {
    @apply relative;
  }

  .nested-fields::marker {
    @apply text-gray-400 font-medium leading-[2.625rem];
  }

  .nested-fields.destroyed::after {
    /* content: "";
    @apply absolute inset-0 bg-white opacity-70;
  }

  .nested-fields.destroyed::before { */
    content: "";
    @apply z-10 absolute inset-x-0 inset-y-0;
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.7)), repeating-linear-gradient(-45deg,
        transparent,
        transparent 5px,
        rgba(240, 82, 82, 0.35) 5px,
        rgba(240, 82, 82, 0.35) 10px);
    background-repeat: no-repeat;
    background-size: 100%, 100% 1.5rem;
    background-position: center, center;
  }

  .nested-fields .toggle-destroy {
    @apply relative z-20 bg-white flex items-center justify-between px-2 py-2 text-sm font-medium leading-5 text-gray-400 hover:text-red-500 rounded-lg dark:text-gray-400 focus:outline-none focus:ring focus:ring-gray-300;
  }

  .nested-fields.destroyed .toggle-destroy {
    @apply text-red-500;
  }

  .has-floating-label {
    @apply block w-full rounded-lg font-medium bg-gray-100 border-0 py-5 px-4 focus:ring-0 focus:bg-[#EAEAFE] transition-all duration-200 text-sm;
  }

  .has-floating-label:not(:placeholder-shown),
  .has-floating-label[readonly]:not(:placeholder-shown),
  .has-floating-label:focus {
    @apply pt-7 pb-3;
  }

  .has-floating-label-with-icon {
    @apply has-floating-label pl-10;
  }

  .form-group {
    @apply relative;
  }

  .floating-label {
    @apply absolute left-4 top-0 py-5 min-w-[50%] flex items-center rounded text-sm text-gray-500 bg-gray-100 pointer-events-none origin-top-left transition-all duration-200 ease-out;
  }

  .has-floating-label:not([type="date"], [type="time"]):focus ~ .floating-label,
  .has-floating-label:not([type="date"], [type="time"], select):not(:placeholder-shown) ~ .floating-label {
    @apply pt-3 pb-7 scale-75 bg-transparent;
  }

  /* For date and time inputs */
  .has-floating-label:is(select):invalid ~ .floating-label,
  .has-floating-label:is([type="date"], [type="time"]):not(:user-valid) ~ .floating-label {
    @apply -translate-y-0 scale-100;
  }

  .has-floating-label:is([type="date"], [type="time"], select):focus ~ .floating-label,
  .has-floating-label:is([type="date"], [type="time"]):user-valid ~ .floating-label,
  .has-floating-label:is(select):valid ~ .floating-label,
  .has-floating-label:is([type="date"], [type="time"]):out-of-range ~ .floating-label,
  .has-floating-label[value]:not(:placeholder-shown) ~ .floating-label ,
  .has-floating-label[readonly]:not(:placeholder-shown) ~ .floating-label {
    @apply pt-3 pb-7 scale-75 bg-transparent;
  }

  .dropzone.drag-over {
    @apply border-blue-500 bg-blue-50;
  }

  .datagrid {
    --column-widths: repeat(auto-fit, minmax(100px, 1fr));
    @apply flex flex-col w-full;

    .datagrid-body {
      @apply flex flex-col w-full items-stretch;
    }

    .datagrid-row {
      @apply grid gap-0 items-stretch;
      grid-template-columns: var(--column-widths);
    }

    .datagrid-th {
      @apply relative flex items-center justify-between;

      .resize-handle {
        @apply absolute right-0 top-0 h-full w-0 bg-black/10 after:z-10 after:absolute after:-inset-x-1 after:inset-y-0 after:h-full cursor-ew-resize;
      }
    }
  }
}

@layer base {
  /* You can add base styles here */
}

@layer utilities {
  /* You can add custom utilities here */
  
  /* Sheet functionality */
  .sheet-backdrop.visible {
    @apply block;
  }
  
  .updates-sheet.visible {
    @apply translate-x-0;
  }
}
@layer components {


/* Original datepicker styles - commented out as they should be moved to application.tailwind.css */
.datepicker {
  @apply w-min;
  /* width: -moz-min-content;
  width: min-content; */
}

.datepicker:not(.active) {
  @apply hidden;
  /* display: none; */
}

.datepicker-dropdown {
  @apply pt-1 absolute z-20;
  /* padding-top: 4px;
  position: absolute;
  z-index: 20; */
}

.datepicker-dropdown.datepicker-orient-top {
  @apply pb-1 pt-0;
  /* padding-bottom: 4px;
  padding-top: 0; */
}

.datepicker-picker {
  @apply bg-white rounded flex flex-col;
  /* background-color: #fff;
  border-radius: 4px;
  display: flex;
  flex-direction: column; */
}

.datepicker-dropdown .datepicker-picker {
  @apply shadow-[0_2px_3px_rgba(0,0,0,0.1),0_0_0_1px_rgba(0,0,0,0.1)];
  /* box-shadow: 0 2px 3px hsla(0, 0%, 4%, 0.1), 0 0 0 1px hsla(0, 0%, 4%, 0.1); */
}

.datepicker-main {
  @apply flex-auto p-0.5;
  /* flex: auto;
  padding: 2px; */
}

.datepicker-footer {
  @apply bg-gray-100 shadow-[inset_0_1px_1px_rgba(0,0,0,0.1)];
  /* background-color: #f5f5f5;
  box-shadow: inset 0 1px 1px hsla(0, 0%, 4%, 0.1); */
}

.datepicker-title {
  @apply bg-gray-100 shadow-[inset_0_-1px_1px_rgba(0,0,0,0.1)] font-bold py-1.5 px-3 text-center;
  /* background-color: #f5f5f5;
  box-shadow: inset 0 -1px 1px hsla(0, 0%, 4%, 0.1);
  font-weight: 700;
  padding: 0.375rem 0.75rem;
  text-align: center; */
}

.datepicker-controls {
  @apply flex;
  /* display: flex; */
}

.datepicker-header .datepicker-controls {
  @apply p-0.5 pb-0;
  /* padding: 2px 2px 0; */
}

.datepicker-controls .button {
  @apply items-center bg-white border border-gray-300 rounded cursor-pointer inline-flex text-base h-9 justify-center leading-normal m-0 px-3 py-1.5 relative text-center align-top whitespace-nowrap text-gray-700;
  /* align-items: center;
  background-color: #fff;
  border: 1px solid #dcdcdc;
  border-radius: 4px;
  box-shadow: none;
  color: #363636;
  cursor: pointer;
  display: inline-flex;
  font-size: 1rem;
  height: 2.25em;
  justify-content: center;
  line-height: 1.5;
  margin: 0;
  padding: calc(0.375em - 1px) 0.75em;
  position: relative;
  text-align: center;
  vertical-align: top;
  white-space: nowrap; */
}

.datepicker-controls .button:active,
.datepicker-controls .button:focus {
  @apply outline-none;
  /* outline: none; */
}

.datepicker-controls .button:hover {
  @apply border-gray-400 text-gray-700;
  /* border-color: #b8b8b8;
  color: #363636; */
}

.datepicker-controls .button:focus {
  @apply border-blue-500 text-gray-700;
  /* border-color: #3273dc;
  color: #363636; */
}

.datepicker-controls .button:focus:not(:active) {
  @apply shadow-[0_0_0_0.125em_rgba(50,115,220,0.25)];
  /* box-shadow: 0 0 0 0.125em rgba(50, 115, 220, 0.25); */
}

.datepicker-controls .button:active {
  @apply border-gray-600 text-gray-700;
  /* border-color: #474747;
  color: #363636; */
}

.datepicker-controls .button[disabled] {
  @apply cursor-not-allowed;
  /* cursor: not-allowed; */
}

.datepicker-header .datepicker-controls .button {
  @apply border-transparent font-bold;
  /* border-color: transparent;
  font-weight: 700; */
}

.datepicker-header .datepicker-controls .button:hover {
  @apply bg-gray-50;
  /* background-color: #f9f9f9; */
}

.datepicker-header .datepicker-controls .button:active {
  @apply bg-gray-100;
  /* background-color: #f2f2f2; */
}

.datepicker-footer .datepicker-controls .button {
  @apply rounded text-xs flex-auto m-1.5;
  /* border-radius: 2px;
  flex: auto;
  font-size: 0.75rem;
  margin: calc(0.375rem - 1px) 0.375rem; */
}

.datepicker-controls .view-switch {
  @apply flex-auto;
  /* flex: auto; */
}

.datepicker-controls .next-button,
.datepicker-controls .prev-button {
  @apply flex-[0_0_14.2857142857%] px-1.5;
  /* flex: 0 0 14.2857142857%;
  padding-left: 0.375rem;
  padding-right: 0.375rem; */
}

.datepicker-controls .next-button.disabled,
.datepicker-controls .prev-button.disabled {
  @apply invisible;
  /* visibility: hidden; */
}

.datepicker-grid,
.datepicker-view {
  @apply flex;
  /* display: flex; */
}

.datepicker-view {
  @apply items-stretch w-[15.75rem];
  /* align-items: stretch;
  width: 15.75rem; */
}

.datepicker-grid {
  @apply flex-auto flex-wrap;
  /* flex: auto;
  flex-wrap: wrap; */
}

.datepicker .days {
  @apply flex flex-auto flex-col;
  /* display: flex;
  flex: auto;
  flex-direction: column; */
}

.datepicker .days-of-week {
  @apply flex;
  /* display: flex; */
}

.datepicker .week-numbers {
  @apply flex flex-[0_0_9.6774193548%] flex-col;
  /* display: flex;
  flex: 0 0 9.6774193548%;
  flex-direction: column; */
}

.datepicker .weeks {
  @apply items-stretch flex flex-auto flex-col;
  /* align-items: stretch;
  display: flex;
  flex: auto;
  flex-direction: column; */
}

.datepicker span {
  @apply select-none items-center rounded cursor-default flex justify-center;
  /* -webkit-touch-callout: none;
  align-items: center;
  border-radius: 4px;
  cursor: default;
  display: flex;
  justify-content: center;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none; */
}

.datepicker .dow {
  @apply text-sm font-bold h-6;
  /* font-size: 0.875rem;
  font-weight: 700;
  height: 1.5rem; */
}

.datepicker .week {
  @apply text-gray-400 flex-auto text-xs;
  /* color: #b8b8b8;
  flex: auto;
  font-size: 0.75rem; */
}

.datepicker .days .dow,
.datepicker-cell {
  @apply basis-[14.2857142857%];
  /* flex-basis: 14.2857142857%; */
}

.datepicker-cell {
  @apply h-9;
  /* height: 2.25rem; */
}

.datepicker-cell:not(.day) {
  @apply basis-1/4 h-[4.5rem];
  /* flex-basis: 25%;
  height: 4.5rem; */
}

.datepicker-cell:not(.disabled):hover {
  @apply bg-gray-50 cursor-pointer;
  /* background-color: #f9f9f9;
  cursor: pointer; */
}

.datepicker-cell.focused:not(.selected) {
  @apply bg-gray-200;
  /* background-color: #e9e9e9; */
}

.datepicker-cell.selected,
.datepicker-cell.selected:hover {
  @apply bg-blue-500 text-white font-semibold;
  /* background-color: #3273dc;
  color: #fff;
  font-weight: 600; */
}

.datepicker-cell.disabled {
  @apply text-gray-300;
  /* color: #dcdcdc; */
}

.datepicker-cell.next:not(.disabled),
.datepicker-cell.prev:not(.disabled) {
  @apply text-gray-500;
  /* color: #7a7a7a; */
}

.datepicker-cell.next.selected,
.datepicker-cell.prev.selected {
  @apply text-gray-200;
  /* color: #e6e6e6; */
}

.datepicker-cell.highlighted:not(.selected):not(.range):not(.today) {
  @apply bg-gray-100;
  /* background-color: #f5f5f5;
  border-radius: 0; */
}

.datepicker-cell.highlighted:not(.selected):not(.range):not(.today):not(.disabled):hover {
  @apply bg-gray-200;
  /* background-color: #efefef; */
}

.datepicker-cell.highlighted:not(.selected):not(.range):not(.today).focused {
  @apply bg-gray-200;
  /* background-color: #e9e9e9; */
}

.datepicker-cell.today:not(.selected) {
  @apply bg-green-400;
  /* background-color: #00d1b2; */
}

.datepicker-cell.today:not(.selected):not(.disabled) {
  @apply text-white;
  /* color: #fff; */
}

.datepicker-cell.today.focused:not(.selected) {
  @apply bg-green-300;
  /* background-color: #00ccad; */
}

.datepicker-cell.range-end:not(.selected),
.datepicker-cell.range-start:not(.selected) {
  @apply bg-gray-400 text-white;
  /* background-color: #b8b8b8;
  color: #fff; */
}

.datepicker-cell.range-end.focused:not(.selected),
.datepicker-cell.range-start.focused:not(.selected) {
  @apply bg-gray-300;
  /* background-color: #b3b3b3; */
}

.datepicker-cell.range-start:not(.range-end) {
  @apply rounded-l;
  /* border-radius: 4px 0 0 4px; */
}

.datepicker-cell.range-end:not(.range-start) {
  @apply rounded-r;
  /* border-radius: 0 4px 4px 0; */
}

.datepicker-cell.range {
  @apply bg-gray-200;
  /* background-color: #dcdcdc;
  border-radius: 0; */
}

.datepicker-cell.range:not(.disabled):not(.focused):not(.today):hover {
  @apply bg-gray-300;
  /* background-color: #d7d7d7; */
}

.datepicker-cell.range.disabled {
  @apply text-gray-200;
  /* color: #c6c6c6; */
}

.datepicker-cell.range.focused {
  @apply bg-gray-300;
  /* background-color: #d1d1d1; */
}

.datepicker-input.in-edit {
  @apply border-blue-500;
  /* border-color: #276bda; */
}

.datepicker-input.in-edit:active,
.datepicker-input.in-edit:focus {
  @apply shadow-[0_0_0.25em_0.25em_rgba(39,107,218,0.2)];
  /* box-shadow: 0 0 0.25em 0.25em rgba(39, 107, 218, 0.2); */
}
}
@layer components {
  td .record-head .attribute-value:first-child,
  td .attribute-value:first-child:not(:only-child) {
    @apply font-semibold;
  }

  .attribute-value:not(:first-child) {
    @apply text-gray-600 dark:text-gray-400;
  }

  td .attribute-value:not(:first-child) {
    @apply text-xs;
  }

  .meta-group .meta-object {
    @apply py-2 px-4 border-l border-blue-300;
  }

  table.table-with-row-number {
    counter-reset: rowNumber;

    tbody tr {
      counter-increment: rowNumber;

      td.row-number::before {
        content: counter(rowNumber);
      }
    }
  }

 .with-row-number {
    counter-reset: rowNumber;

    .counter-increment {
      counter-increment: rowNumber;

      .row-number::before {
        content: counter(rowNumber);
      }
    }
  }
}
/* REVIEW: This file can be safely removed as these styles should be moved to application.tailwind.css
 * All styles below should use @layer components and @apply directives in application.tailwind.css
 */
/* Image Gallery Slideshow Styles */
.image-gallery-slide {
  transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
  /* All slides have the same width, controlled by JS */
}

.image-gallery-slide.active {
  z-index: 10;
  opacity: 1;
}

.image-gallery-slide:not(.active) {
  opacity: 0.7;
}

/* Indicator styles */
.image-gallery-indicator {
  transition: all 0.3s ease-in-out;
}

.image-gallery-indicator.active {
  background-color: white;
}

/* Navigation controls */
[data-controller="image-gallery"] .absolute.inset-0 {
  overflow: hidden;
}

[data-image-gallery-target="track"] {
  will-change: transform;
}

/* Ensure images maintain aspect ratio */
[data-image-gallery-target="slide"] img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0.5rem;
}
/* REVIEW: This file can be safely removed as we're using application.tailwind.css
 * All styles should be moved to application.tailwind.css using @layer and @apply directives
 */

/*
 * 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.
 *


 */