@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap");
@tailwind base;
@tailwind components;
@tailwind utilities;

.table {
  border-spacing: 0 15px;
}

.pagy.nav {
  @apply flex justify-center mt-10 gap-4;

  .page {
    @apply text-base font-normal;
  }
    a[aria-label="Previous"], a[aria-label="Next"] {
        display: none;
    }
  .current {
    @apply font-bold border-b-2 border-b-black;
  }
}

@layer utilities {
  .hamburger-toggle {
    @apply
    [&>div]:h-0
    [&>div::before]:translate-y-0
    [&>div::before]:rotate-45
    [&>div::after]:translate-y-0
    [&>div::after]:-rotate-45
  }

  .active-mobile-navbar {
    @apply sticky top-0 h-screen;
  }

  .badge-primary {
    @apply text-gray-50 rounded-md px-2 bg-green-400;
  }
  .badge-warning {
    @apply text-gray-50 rounded-md px-2 bg-yellow-400;
  }
  .badge-danger {
    @apply text-gray-50 rounded-md px-2 bg-red-400;
  }
}

@layer base {
  .base-grid-4 {
    @apply min-h-screen w-full inline-grid grid-cols-2 gap-4 p-4;
  }

  .details-table-container {
    @apply flex w-full h-full self-center;
  }
}

@layer components {
  .config-section-wrapper {
    @apply bg-white rounded shadow-1 mx-auto mt-10
      sm:config-section-w
      xl:mt-8 xl:w-full
      2xl:mx-0;
  }

  .config-section-container {
    @apply py-10 border-b border-grey-6 config-section-w config-section-max-w config-section-margin-x;
  }

  .config-section-header-part {
    @apply py-9 flex justify-between font-medium config-section-w config-section-max-w config-section-margin-x
      xl:text-xl xl:pt-10 xl:pb-8;
  }

  .config-section-w {
    @apply w-11/12 xl:w-auto;
  }

  .config-section-max-w {
    @apply max-w-[26rem] xl:max-w-none;
  }

  .config-section-margin-x {
    @apply mx-auto xl:mx-10 2xl:mx-15;
  }

  .config-section-header {
    @apply text-grey-8 font-medium uppercase
  }

  .config-section-content-separator {
    @apply border-t border-grey-6
  }

  .admin-section-wrapper {
    @apply flex flex-col w-full pt-4 px-10 pb-16 overflow-y-hidden;
  }
  tr.admin-table-row{
    @apply border-b text-base font-normal;
  }
  tr.admin-table-row td{
    @apply py-5 pr-2;
  }
  tr.admin-table-row td.admin-table-actions-cell{
    @apply pr-8 flex justify-between items-center gap-x-6 max-w-fit;
  }
  .admin-table-wrapper{
    @apply w-full mt-6 pt-10 px-8 pb-10 bg-white overflow-auto
  }

  .admin-form-input-wrapper{
    @apply flex flex-col gap-2
  }

  .admin-section-title {
    @apply text-center font-bold leading-8 uppercase text-xl;
  }

  .admin-section-subtitle {
    @apply text-center font-bold leading-8 uppercase;
  }

  .admin-section-subtitle-with-decoration {
    @apply
      before:content-['']
      before:absolute
      before:w-12
      before:h-1
      before:top-6
      before:left-[calc(50%-1.5rem)]
      before:bg-kerno-900
    ;
  }

  .admin-filter-tabs-wrapper {
    @apply flex justify-center gap-x-10 mt-6;
  }

  .admin-filter-tab {
    @apply text-base uppercase font-medium hover:scale-110;
  }

  .admin-form-table-input{
    @apply w-80 h-10 border rounded border-grey-6
  }

  .admin-form-table-label{
    @apply text-base font-medium
  }

  .admin-active-filter-tab {
    @apply text-base uppercase font-bold relative hover:scale-110
    after:content-['']
    after:absolute
    after:w-12
    after:block
    after:h-0.5
    after:-bottom-1.5
    after:inset-x-0
    after:mx-auto
    after:bg-kerno-900;
  }

  .admin-table-link {
    @apply text-sm uppercase underline text-kerno-900 font-semibold hover:scale-105 whitespace-nowrap;
  }

  .admin-aspects-wrapper {
    @apply mt-30 flex gap-x-15;
  }

  .admin-aspects-nav-container {
    @apply flex flex-col text-center bg-white pt-8 pb-3 min-w-fit;
  }

  .admin-subaspects-nav-bg {
    @apply bg-grey-7/30;
  }

  .base-aspect-link {
    @apply text-base uppercase font-medium mb-5 px-5 cursor-pointer hover:scale-105;
  }

  .active-aspect-link {
    @apply !font-bold relative
    after:content-['']
    after:absolute
    after:w-12
    after:block
    after:h-0.5
    after:-bottom-0
    after:inset-x-0
    after:mx-auto
    after:bg-kerno-900;
  }

  .base-subaspect-link {
    @apply text-xs font-medium uppercase px-5 mb-5 hover:scale-105;
  }

  .active-subaspect-link {
    @apply !font-bold;
  }

  .branch{
    @apply
    after:content-['']
    after:absolute
    after:w-3
    after:block
    after:h-[calc(var(--branch-count)*2.5em)]
    after:top-5
    after:-left-3
    after:rounded
    after:inset-x-0
    ;
  }

  .branch-badge-green{
    @apply bg-green-100 text-green-500 hover:bg-green-200 hover:text-green-600
  }
  .branch-badge-brown{
    @apply bg-brown-100 text-brown-500 hover:bg-brown-200 hover:text-brown-600
  }
  .branch-badge-rose{
    @apply bg-rose-100 text-rose-500 hover:bg-rose-200 hover:text-rose-600
  }

  .checkbox {
    @apply w-8 h-8 !bg-white !border-grey-5 border-2
    checked:!bg-kerno-900;
  }

  .details-data-tile {
    @apply grid grid-cols-[9rem_auto];
  }

  .left-details-table-wrapper {
    @apply w-fit min-w-[35%] max-w-[45%];
  }

  .right-details-table-wrapper {
    @apply flex-grow;
  }

  .details-table {
    @apply flex flex-col items-center w-full h-fit;
  }

  .details-table-header {
    @apply border-b-2 border-gray-300 w-full flex p-4 text-xl text-gray-400 justify-between;
  }

  .details-table-header-primary {
    @apply font-normal p-3 align-middle border-solid border-b-2 text-gray-400 border-gray-200 py-3 text-left;
  }

  .details-table-cell {
    @apply border-t-0 p-3 align-middle text-sm text-grey-9 border-solid border-b-2 border-gray-200;
  }

  .details-table-content {
    @apply flex flex-col w-full h-min p-1 gap-4 overflow-auto;
  }

  .details-table-content-row {
    @apply flex justify-evenly items-center;
  }

  .input-main {
    @apply mb-2 font-normal p-2 rounded-lg shadow-md focus:outline-none border-grey-7 text-grey-10;
  }
  .input-secondary {
    @apply w-full h-10 border rounded border-grey-6;
  }
  .input-admin-wizard {
   @apply border-definition-name w-80 p-2 ml-3 pl-4 text-grey-11 h-14
  }

  .border-definition-name {
    @apply mr-8 p-2 rounded-lg border border-grey-7 focus:outline-none;
  }

  .btn-primary {
    @apply bg-kerno-900 rounded text-white font-medium cursor-pointer inline-flex min-w-[8rem] px-9 h-10 justify-center items-center text-sm hover:scale-105
  }

  .btn-secondary {
    @apply px-4 py-2 bg-kerno-500 outline-none border border-kerno-100 rounded text-white font-medium
    active:scale-95
    cursor-pointer
    hover:bg-kerno-400
    focus:ring-2
    focus:ring-kerno-600
    focus:ring-offset-2
    disabled:bg-gray-400/80
    disabled:shadow-none
    disabled:cursor-not-allowed transition-colors duration-200;
  }

  .btn-outline {
    @apply px-4 py-2 bg-transparent outline-none border-2 border-kerno-400 rounded text-kerno-500 font-medium
    active:scale-95
    cursor-pointer
    hover:bg-kerno-600
    hover:text-white
    hover:border-transparent
    focus:bg-kerno-600
    focus:text-white
    focus:border-transparent
    focus:ring-2
    focus:ring-kerno-600
    focus:ring-offset-2
    disabled:bg-gray-400/80
    disabled:shadow-none
    disabled:cursor-not-allowed transition-colors duration-200;
  }

  .btn-outline-2 {
    @apply px-4 py-2 bg-transparent outline-none border border-kerno-900 rounded text-kerno-900 font-medium
    active:scale-95
    cursor-pointer
    hover:bg-kerno-900
    hover:text-white
    hover:border-transparent
    focus:bg-kerno-900
    focus:text-white
    focus:border-transparent
    focus:ring-2
    focus:ring-kerno-900
    focus:ring-offset-2
    disabled:bg-gray-400/80
    disabled:shadow-none
    disabled:cursor-not-allowed transition-colors duration-200;
  }

  .btn-transparent {
    @apply inline-flex w-32 h-10 items-center justify-center bg-transparent border border-grey-6 rounded text-kerno-500 font-medium
  }

  .btn-icon {
    @apply w-10 h-10 flex items-center justify-center bg-gray-100 outline-none border-gray-200 border text-kerno-500 rounded group
    hover:bg-kerno-500
    cursor-pointer
    hover:text-white
    hover:border-transparent
    focus:bg-kerno-500
    focus:text-white
    focus:border-transparent
    focus:ring-2
    focus:ring-kerno-600
    focus:ring-offset-2 n
    active:scale-95
    disabled:bg-gray-400/80
    disabled:shadow-none
    disabled:cursor-not-allowed;
  }

  .rectangle_radio_label {
    @apply flex h-15 items-center font-bold uppercase justify-center border border-kerno-900 peer-checked:bg-kerno-900 peer-checked:text-white
  }

  .popup_on_hover_wrapper {
    @apply relative cursor-pointer;
  }

  .ref_num_popup {
    @apply hidden absolute left-0 top-[50%] -translate-y-[145%] bg-kerno-900 text-white w-max p-2 rounded z-10;
  }

  .position_definition_hint_popup {
    @apply hidden absolute left-0 bottom-8 z-10 bg-kerno-900 text-white p-2 rounded normal-case text-xs font-normal
    xl:w-max xl:max-w-[36rem];
  }
}

@keyframes notification-countdown {
  from {
    width: 100%;
  }
  to {
    width: 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.
 *


 */