@import url(/assets/lexxy-content-72e008fdf152b50b6e3016016255a9490647a5fe3c4fb45add86884975f49490.css);
@import url(/assets/lexxy-editor-322f182e98fcac7829a042f7b4d3e2dcdd04cfc97ff19c579906939ce44bd367.css);
/*
 * Lexxy rich text editor styles
 * Custom styles are in lexxy.css
 */
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  .btn-primary {
    @apply rounded-md bg-primary-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-primary-500 cursor-pointer focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-600;

    @apply disabled:opacity-50 disabled:cursor-not-allowed;
  }

  .disabled {
    @apply opacity-50 cursor-not-allowed;
  }

  .btn-secondary {
    @apply rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50;
  }

  .btn-approve {
    @apply rounded-md bg-success-500 px-3 py-2 text-sm font-semibold text-white shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-success-600;
  }

  .btn-reject {
    @apply rounded-md bg-white px-3 py-2 text-sm font-semibold text-danger-600 shadow-sm ring-1 ring-inset ring-danger-500 hover:bg-gray-50;
  }

  .form-container {
    @apply h-full flex flex-col justify-between;
  }

  .form {
    @apply pb-4 sm:pb-8;
  }

  .form-errors {
    @apply text-red-600 text-sm font-medium;
  }

  .form-group {
    @apply mt-3 sm:mt-6;
  }

  .form-checkbox-group {
    @apply relative flex items-center flex-nowrap;
  }

  .form-special-checkbox-group {
    @apply form-checkbox-group flex-wrap;
  }

  .form-label {
    @apply block text-sm font-medium leading-6 text-gray-900;
  }

  .form-inline-select {
    @apply flex items-center justify-center w-10 mx-1 p-1 border border-gray-300 rounded-full cursor-pointer;
  }

  .form-inline-select-selected {
    @apply bg-primary-50 text-primary-600 border-primary-600;
  }

  .form-text {
    @apply text-sm leading-6 text-gray-600;
  }

  .form-input {
    @apply block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-primary-600 sm:text-sm sm:leading-6 mt-2;
  }

  .form-text-area {
    @apply form-input resize-none;
  }

  .form-checkbox {
    @apply h-4 w-4 rounded border-gray-300 text-primary-600 focus:ring-primary-600 mr-3;
  }

  .form-select {
    @apply inline-block cursor-pointer px-2 py-1 my-2 border border-gray-300 rounded-full mr-2 text-sm bg-none;
  }

  .form-select-selected {
    @apply bg-primary-50 text-primary-600 border-primary-600;
  }

  .form-radio {
    @apply h-4 w-4 border-gray-300 text-primary-600 focus:ring-primary-600;
  }

  .form-title {
    @apply text-2xl font-semibold text-gray-900 pb-2;
  }

  .form-buttons {
    @apply mt-6 flex items-center justify-end gap-x-6;
  }

  .modal {
    @apply fixed top-0 right-0 w-full md:w-1/2 xl:w-2/5 h-full bg-white shadow-xl overflow-y-auto transform transition ease-in-out duration-500 p-8 sm:p-12;
  }

  .modal-btn {
    @apply fixed bottom-5 left-1/2 transform -translate-x-1/2 z-50;
  }

  .leave-days-form-container {
    @apply flex flex-wrap max-h-96 content-start overflow-y-auto;
  }

  .beauty-select {
    @apply my-2 text-xs flex flex-col items-center justify-center w-full lg:w-1/2 2xl:w-1/3 font-bold;
  }

  .holiday {
    @apply text-primary-600 text-sm mr-1;
  }

  .legend {
    @apply text-gray-800 flex align-middle items-center pt-3;
  }

  .part-time-alert {
    @apply mt-2 bg-primary-200 p-3 rounded-md text-secondary-600 text-sm font-normal;
  }

  .main {
    @apply mx-auto flex flex-col h-full;
  }

  .footer {
    @apply p-2 m-2 bg-opacity-50;
  }

  .navbar {
    @apply flex items-center justify-between mt-1 px-1 pb-1;
  }

  .body {
    @apply text-secondary-900 h-screen;
  }


  .navbar-logo {
    @apply h-9 ml-1;
  }

  .navbar-menu {
    @apply flex items-center;
  }

  .navbar-profile-icon {
    @apply h-10 w-10 rounded-full;
  }

  .navbar-link {
    @apply px-4 py-2 mt-1 text-sm hover:text-primary-600;
  }

  .reminder-form {
    @apply w-full max-w-3xl mx-auto bg-white p-4 rounded-lg shadow-lg mb-4;
  }

  .highlight {
    @apply text-primary-600 font-semibold underline;
  }

  .movable {
    @apply cursor-move;
  }

  .movable:hover {
    @apply cursor-grab;
  }

  .movable:active {
    @apply cursor-grabbing;
  }

  .badge {
    @apply inline-flex items-center gap-2 px-3 py-1.5 rounded-full text-sm font-medium border;

    &.pending-badge {
      @apply bg-yellow-100 text-yellow-800 border-yellow-200;
    }
    &.approved-badge {
      @apply bg-green-100 text-green-800 border-green-200;
    }
    &.rejected-badge {
      @apply bg-red-100 text-red-800 border-red-200;
    }
    &.cancelled-badge {
      @apply bg-secondary-100 text-secondary-800 border-secondary-200;
    }
  }

  .tab {
    @apply py-2 px-1 border-b-2 font-medium text-sm border-transparent text-gray-500;
  }

  .tab:not(.selected-tab) {
    @apply hover:text-gray-700 hover:border-gray-300;
  }

  .selected-tab{
    @apply border-blue-500 text-blue-600;
  }
}

@layer utilities {
  .stretched-link {
    @apply z-10 pointer-events-none;
  }

  .stretched-link::after {
    content: "";
    @apply z-0 absolute inset-0 bg-transparent pointer-events-auto;
  }
}
.text-balance {
  text-wrap: balance;
}

.tooltip {
  position: relative;
  cursor: pointer;
}

.tooltip::after {
  content: attr(data-tooltip);
  position: absolute;
  opacity: 0;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  background-color: #333;
  color: #fff;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.tooltip:hover::after {
  opacity: 1;
  top: -20px;
}
/* Placeholder */
:where(.lexxy-editor--empty) {
  .lexxy-editor__content:not(:has(ul, ol))::before {
    font-size: 0.875rem;
  }
}

/* Headings */
.lexxy-editor__content h2 {
  font-size: 1.2rem;
}

.lexxy-editor__content h3 {
  font-size: 1rem;
}

.lexxy-editor__content h4 {
  font-size: 0.875rem;
}

.lexxy-editor__content p {
  font-size: 0.875rem;
}

.lexxy-editor__content ul {
  list-style-type: disc;
  padding-left: 1.5rem;
}

.lexxy-editor__content ol {
  list-style-type: decimal;
  padding-left: 1.5rem;
}

.lexxy-editor__content li {
  margin-bottom: 0.25rem;
}

.lexxy-content ul {
  list-style-type: disc;
  padding-left: 1.5rem;
  margin-bottom: 1rem;
}

.lexxy-content ol {
  list-style-type: decimal;
  padding-left: 1.5rem;
  margin-bottom: 1rem;
}

.lexxy-content li {
  margin-bottom: 0.25rem;
}

.lexxy-content p {
  margin-bottom: 0.5rem;
}

.lexxy-content p:last-child {
  margin-bottom: 0;
}

.lexxy-editor__content p {
  margin-bottom: 0.5rem;
}

.lexxy-editor__content p:last-child {
  margin-bottom: 0;
}
:root {
  --border-color: rgba(196, 196, 196, 0.205);
  --today-bg: rgba(255, 247, 237);
  --other-month-bg: #d1d5db;
  --hover-month-bg: rgba(120, 97, 97, 0.048);
  --leave-event-bg: #FFD8D8;
}

.simple-calendar table {
  margin-top: 0.5em;
  border-collapse: collapse;
  width: 100%;
  max-width: 100%;
}

.simple-calendar tr {
  border-collapse: collapse;
}

.simple-calendar td {
  border: 1px solid var(--border-color);
  box-sizing: border-box;
}

.simple-calendar td {
  background-color: white;
  vertical-align: top;
  width: 14%;
}

.simple-calendar .calendar-heading nav {
  display: inline-block;
}

.simple-calendar .day {
  height: 120px;
  padding: 3px;
}

.simple-calendar .day:hover {
  background-color: var(--hover-month-bg);
}

.simple-calendar .today {
  background: var(--today-bg);
}

.simple-calendar .prev-month,
.simple-calendar .next-month {
  color: rgba(152, 160, 166, 0.6);
  background-color: #ffffff;
  background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23f9f9fa' fill-opacity='1' fill-rule='evenodd'%3E%3Cpath d='M0 40L40 0H20L0 20M40 40V20L20 40'/%3E%3C/g%3E%3C/svg%3E");
}

.simple-calendar .leave-event {
  background-color: var(--leave-event-bg);
}

@media (max-width: 768px) {

  .simple-calendar th,
  .simple-calendar td {
    padding: 4px;
  }

  .simple-calendar .day {
    height: auto;
  }

  .simple-calendar .calendar-heading nav {
    display: block;
  }
}
/*
 * 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.
 *



 */