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

/* @import "sdp.css";
@import "event-calendar.css"; */
@layer base {
  body {
    @apply text-base;
  }
  /* Active Admin */
  fieldset.inputs ol {
    @apply flex flex-col gap-2;
  }

}

@layer components {
  .turbo-progress-bar {
    @apply !bg-indigo-800;
  }

  .vertical-separator {
    @apply bg-gray-200 w-px my-1;
  }

  .navbar-link {
    @apply rounded-md px-3 py-2 text-sm font-medium text-gray-300 hover:bg-gray-700 hover:text-white;
  }
  .navbar-link-active {
    @apply bg-gray-900 text-white;
  }

  .input {
    @apply rounded appearance-none border border-gray-300 w-full py-2 px-3 bg-white focus:outline-none focus:ring-0 focus:border-blue-500 text-sm leading-6 transition-colors duration-200 ease-in-out;
  }

  .input-sm {
    @apply !text-sm !py-1.5 !px-2;
  }

  .hint {
    @apply text-xs text-gray-500;
  }

  .title-1 {
    @apply text-xl font-medium;
  }

  .title-2 {
    @apply text-base font-medium;
  }

  .subtitle {
    @apply text-gray-400 text-xs;
  }

  .label {
    @apply text-sm font-medium text-gray-900 my-2 inline-block;
  }

  .link {
    @apply text-sm font-medium text-indigo-600 hover:text-indigo-500;
  }

  .link-mute {
    @apply link text-gray-500 p-2;
  }

  .button {
    @apply select-none cursor-pointer inline-flex items-center rounded-md justify-center gap-x-1.5 bg-gray-200 px-3 py-2.5 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-300 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-600;
  }
  .button-sm {
    @apply button !px-2.5 !py-1.5;
  }

  .button-xs {
    @apply button !px-1.5 !py-1 !text-xs;
  }

  .select {
    @apply !pr-8 focus:ring-0 focus-visible:border-gray-200;
  }

  .button-group {
    @apply isolate inline-flex;
  }

  .button-group > * {
    @apply relative focus:z-10;
  }
  .button-group > *:first-child {
    @apply rounded-r-none border-r-0;
  }

  .button-group > *:not(:first-child):not(:last-child) {
    @apply rounded-none border-x-0;
  }

  .button-group > *:not(:first-child) {
    @apply rounded-l-none border-l-0;
  }

  /* Loading state for toggle */
  [data-loading="true"] {
    @apply cursor-not-allowed;
  }

  .button-white {
    @apply button bg-white border border-gray-200 text-gray-900 hover:bg-gray-50 focus-visible:outline-gray-600 transition-all duration-150;
  }

  .button-primary {
    @apply button bg-indigo-600 text-white hover:bg-indigo-700 focus-visible:outline-indigo-600;
  }

  .button-muted {
    @apply button font-medium shadow-none bg-white text-gray-400 hover:bg-gray-50 focus-visible:outline-gray-600;
  }

  .link-sidebar {
    @apply select-none cursor-pointer inline-flex items-center rounded-md justify-start gap-x-1.5 px-3 py-2.5 text-sm font-medium text-gray-700 hover:bg-gray-200 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-600;
  }

  .link-sidebar-active {
    @apply link-sidebar bg-gray-200 text-gray-900;
  }

  .dropdown-link {
    @apply flex items-center gap-x-2 px-4 py-3.5 md:py-3 text-sm text-gray-700 hover:bg-gray-100 text-nowrap;
  }

  button[disabled] {
    @apply pointer-events-none cursor-default opacity-50;
  }

  .modal-title {
    @apply text-lg font-medium text-gray-900 mb-8;
  }

  .modal-actions {
    @apply mt-6 flex justify-end gap-x-2;
  }

  .text-danger {
    @apply text-red-500;
  }

  .check_boxes, .checkbox, input[type="checkbox"] {
    @apply rounded;
  }

}

  /* eventCalendar */

  .ec-event {
    padding: 0 !important;
    border-radius: 4px;
  }
  .ec-times {
    border-top: 1px solid white !important;
  }
  .ec-day {
    overflow: visible !important;
  }
  .ec-time {
    border: 1px solid white !important;
    border-top: 1px solid white !important;
    overflow: visible !important;
  }
  .ec-header {
    border-top: 1px solid white !important;
    border-left: 1px solid white !important;
    overflow: visible !important;
  }
  .ec-day-head {
    display: none;
    border: none;
  }

  .ec-today {
    background: white !important;
  }

  .ec-resource {
    align-items: center;
    justify-content: center;
  }

  .ec-resource span {
    padding-top: 0 !important;
  }
  .ec-resource, .ec-content .ec-days {
    min-height: 64px !important;
  }
  .ec-content .ec-resource:last-child,
  #planning .ec-timeline .ec-sidebar .ec-resource:last-child,
  #employee-planning .ec-timeline .ec-sidebar .ec-resource:last-child {
    flex-basis: auto !important;
  }

  .ec-resource:has(.event-position),
  .ec-days:has(.event-position) {
    min-height: 38px !important;
    border-bottom: 3px solid var(--ec-border-color) !important;
  }

  .ec-days:has(.event-position) .ec-preview {
    display: none !important;
  }

  .ec-timeline .ec-line,
  .ec-timeline .ec-time {
    flex-grow: 1;
    width: auto !important;
  }
  .ec-timeline .ec-main {
    width: 100%;
  }

  .ec-header {
    padding: 8px 0 !important;
  }

  .ec-timeline .ec-sidebar {
    border: 0px !important;
    border-top: 1px solid white !important;
    border-bottom: 1px solid var(--ec-border-color) !important;
  }
  .ec-all-day,
  .ec-body,
  .ec-day,
  .ec-day-head,
  .ec-days,
  .ec-header {
    border-right: none !important;
  }

  .ec-body, .ec-container {
    overflow: hidden !important;
  }

  .ec-resource-day-view .ec-line:nth-child(2n)::after {
    border-style: dashed !important;
  }

  .ec-toolbar {
    display: none !important;
  }
:root {
  --sdp-selected: rgb(239, 68, 68);
  --sdp-selected-invert: #ffffff;
  --sdp-prev-month: #888888;
  --sdp-next-month: #888888;
  --sdp-disabled: #1010104d;
  --sdp-disabled-invert: #ffffff;
  --sdp-background: #ffffff;
  --sdp-border: #dddddd;
  --sdp-shadow: 0deg 0% 50%;
  --sdp-icon: #4a4a4acc;
  --sdp-nav-button-background: #f5f5f5;
  --sdp-nav-button-background-hover: #eeeeee;
  --sdp-days-of-week: #4a4a4a;
}

@keyframes fadeIn {
  from {
    transform: translateY(-40px) scale(0.75);
    opacity: 0;
  }

  to {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

@keyframes fadeOut {
  from {
    transform: translateY(0) scale(1);
    opacity: 1;
  }

  to {
    transform: translateY(-40px) scale(0.75);
    opacity: 0;
  }
}

[data-controller="datepicker"] {
  position: relative;
}

.sdp-cal {
  top: 0;
  z-index: 1;
  position: absolute;
  margin-top: 5px;
  box-sizing: border-box;
  width: fit-content;
  border: 1px solid var(--sdp-border);
  border-radius: 12px;
  padding: 15px;
  background: white;
  box-shadow: 0 1.25em 1.25em -0.9375em hsl(var(--sdp-shadow) / 0.3);
}

.sdp-cal.fade-in {
  animation: fadeIn 0.1s ease-out;
}

.sdp-cal.fade-out {
  animation: fadeOut 0.1s ease-out;
}

@media (prefers-reduced-motion: reduce) {

  .sdp-cal.fade-in,
  .sdp-cal.fade-out {
    animation: none;
  }
}

.sdp-cal button {
  border: none;
  background: none;
  padding: 0;
}

.sdp-nav {
  margin-bottom: 1.2em;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.sdp-nav-dropdowns,
.sdp-nav-buttons {
  display: flex;
}

.sdp-nav-dropdowns select {
  -moz-appearance: none;
  -webkit-appearance: none;
  background: var(--sdp-background);
  color: currentColor;
  padding: 1px 12px 1px 1px;
  border: 1px solid transparent;
  font-size: 1.1em;
  font-weight: 500;
  cursor: pointer;
}

.sdp-nav-dropdowns>div {
  display: flex;
  align-items: center;
}

.sdp-nav-dropdowns>div::after {
  content: " ";
  border: 2px solid var(--sdp-icon);
  border-top: 0;
  border-right: 0;
  width: 0.3em;
  height: 0.3em;
  transform: translateY(-1px) rotate(-45deg);
  right: 10px;
  position: relative;
}

.sdp-nav-buttons button {
  display: flex;
  place-content: center;
  place-items: center;
  border-radius: 50%;
  width: 1.5em;
  height: 1.5em;
  color: var(--sdp-icon);
  background-color: var(--sdp-nav-button-background);
  cursor: pointer;
}

.sdp-nav-buttons button:hover {
  background-color: var(--sdp-nav-button-background-hover);
}

.sdp-nav-buttons svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  width: 0.75em;
  height: 0.75em;
}

.sdp-goto-today {
  margin-left: 0.3em;
  margin-right: 0.3em;
}

.sdp-days-of-week,
.sdp-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  place-items: center;
  gap: 0.3em;
}

.sdp-days-of-week {
  margin-bottom: 0.7em;
}

.sdp-days-of-week div {
  text-transform: uppercase;
  font-size: 0.8em;
  color: var(--sdp-days-of-week);
  font-weight: 600;
}

.sdp-days button {
  width: 3.5ch;
  height: 3.5ch;
  border-radius: 50%;
  background-color: transparent;
}

.sdp-days button:not([aria-disabled]) {
  color: currentColor;
  cursor: pointer;
}

.sdp-days button[aria-disabled] {
  color: var(--sdp-disabled);
}

/* .sdp-days button:not([aria-disabled]).sdp-selected {
  background-color: var(--sdp-selected);
  color: var(--sdp-selected-invert);
}

.sdp-days button[aria-disabled].sdp-selected {
  background-color: var(--sdp-disabled);
  color: var(--sdp-disabled-invert);
}
*/
.sdp-days button:not([aria-disabled]).sdp-today {
  /* border: 1px solid var(--sdp-selected); */
  background: var(--sdp-selected);
  color: white !important;
}

.sdp-days button[aria-disabled].sdp-today {
  /* border: 1px solid var(--sdp-disabled); */
  color: white !important;
}

/* Ideally we would use outline and outline-offset for the :hover and :focus
 * styles.  But Safari's outline doesn't follow the border-radius; it is square.
 * https://bugs.webkit.org/show_bug.cgi?id=231433
 * https://bugs.webkit.org/show_bug.cgi?id=20807
 */
.sdp-days button:hover,
.sdp-days button:focus {
  outline: none;
}

.sdp-days button:not([aria-disabled]):hover,
.sdp-days button:not([aria-disabled]):focus {
  /* border: 2px solid var(--sdp-selected); */
}

.sdp-days button[aria-disabled]:hover,
.sdp-days button[aria-disabled]:focus {
  border: 2px solid var(--sdp-disabled);
}

.sdp-days button:not([aria-disabled]).sdp-selected:hover,
.sdp-days button:not([aria-disabled]).sdp-selected:focus {
  /* border: 2px solid var(--sdp-selected-invert);
  box-shadow: 0 0 0 2px var(--sdp-selected); */
}

.sdp-days button[aria-disabled].sdp-selected:hover,
.sdp-days button[aria-disabled].sdp-selected:focus {
  border: 2px solid var(--sdp-disabled-invert);
  box-shadow: 0 0 0 2px var(--sdp-disabled);
}

.sdp-days button:not([aria-disabled]).sdp-today:hover,
.sdp-days button:not([aria-disabled]).sdp-today:focus {
  /* border: 2px solid var(--sdp-selected); */
}

.sdp-days button[aria-disabled].sdp-today:hover,
.sdp-days button[aria-disabled].sdp-today:focus {
  border: 2px solid var(--sdp-disabled);
}

.sdp-days button:not([aria-disabled]).sdp-prev-month {
  color: var(--sdp-prev-month);
}

.sdp-days button:not([aria-disabled]).sdp-next-month {
  color: var(--sdp-next-month);
}

.sdp-days button[aria-disabled].sdp-prev-month,
.sdp-days button[aria-disabled].sdp-next-month {
  color: var(--sdp-disabled);
}
/*
 * 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.
 *


 */