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

@import url("https://fonts.googleapis.com/css2?family=Baloo+Paaji+2:wght@300;400;500;600;700;800;900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700;800;900&display=swap");

/*

@layer components {
  .btn-primary {
    @apply py-2 px-4 bg-blue-200;
  }
}

*/

.card {
  @apply relative flex h-fit flex-col break-words border border-grey-100 bg-white bg-clip-border border-solid;
}

.expense-form {
  @apply border-0 md:border p-0 md:p-6;
}

/* Form */
label {
  @apply inline-block cursor-pointer text-sm leading-5 font-semibold text-grey-600;
}

.form-input {
  @apply block w-full rounded border-grey-100 bg-white text-sm leading-5 font-normal focus:ring-offset-0 focus:ring-0;
}

.form-input:focus {
  outline: transparent solid 2px;
  outline-offset: 2px;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow),
    var(--tw-shadow, 0 0 #0000);
  --tw-border-opacity: 1;
  border-color: rgb(209 213 219 / var(--tw-border-opacity));
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0
    var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0
    calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
}

.field_with_errors > input,
input.invalid-feedback {
  @apply border-red-500;
}

.field_with_errors > label {
  @apply text-red-500;
}

/* switch */

label.toggle-label {
  @apply h-6 relative flex;
}

input.toggle {
  @apply w-11 h-0 cursor-pointer inline-block;
  @apply focus:outline-0 dark:focus:outline-0;
  @apply border-0 dark:border-0;
  @apply focus:ring-offset-transparent dark:focus:ring-offset-transparent;
  @apply focus:ring-transparent dark:focus:ring-transparent;
  @apply focus-within:ring-0 dark:focus-within:ring-0;
  @apply focus:shadow-none dark:focus:shadow-none;

  @apply after:absolute before:absolute;
  @apply after:top-0 before:top-0;
  @apply after:block before:inline-block;
  @apply before:rounded-full after:rounded-full;

  @apply after:content-[''] after:w-5 after:h-5 after:mt-0.5 after:ml-0.5;
  @apply after:shadow-md after:duration-100;

  @apply before:content-[''] before:w-10 before:h-full;
  @apply before:shadow-[inset_0_0_#000];

  @apply after:bg-white dark:after:bg-gray-50;
  @apply before:bg-gray-300 dark:before:bg-gray-600;
  @apply before:checked:bg-primary-500 dark:before:checked:bg-primary-500;
  @apply checked:after:duration-300 checked:after:translate-x-4;

  @apply disabled:after:bg-opacity-75 disabled:cursor-not-allowed;
  @apply disabled:checked:before:bg-opacity-40;
}

/* App Wrapper */

.app-wrapper {
  @apply flex min-h-screen;
}

/* side menu */

.app-menu {
  @apply sticky w-64 bg-white border-r border-grey-100 md:block hidden;
}

.app-menu > .menu-items {
}

.logo-wrapper {
  @apply sticky  h-16 flex items-center justify-start ml-[15px] mt-1.5;
}

.app-content {
  @apply w-full;
}

.app-main {
  @apply bg-grey w-full md:p-6 min-h-lvh h-full;
}

.menu-item {
}

.menu-item:hover {
}

.menu-item a,
.menu-item form button {
  @apply text-grey-600 py-3 px-5 relative flex gap-3 items-center whitespace-nowrap bg-transparent transition-all ease-in-out rounded text-sm;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-transition-property: all;
  -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  -webkit-transition-duration: 150ms;

  &:hover {
    @apply bg-primary-100 text-primary-400;
  }

  & i {
    @apply text-lg;
    display: flex;
    flex: 0.475;
  }

  & span {
    flex: 4;
  }
}

.menu-item a.active {
  @apply bg-primary-100 text-primary-400;
}

/* Invoice form */

.invoice-form-wrapper {
  /* box-shadow: 0 3px 10px rgb(0, 0, 0, 0.2); */
  /* box-shadow: rgba(17, 17, 26, 0.1) 0px 0px 16px; */
}

.invoice-line-items-header {
  @apply md:flex items-center font-semibold mb-3 gap-x-4 hidden;
}

.invoice-line-items-header > div {
  @apply font-bold;
}

.invoice-line-item-fields-wrapper {
  @apply flex items-center justify-between gap-x-4 mb-3 flex-wrap md:flex-nowrap gap-y-3;
}

.invoice-line-item-fields-wrapper > div {
}

.invoice-line-items-header > div:first-child,
.invoice-line-item-fields-wrapper > div:first-child {
  @apply flex-[0_0_100%] md:flex-[0_0_50%];
}
.invoice-line-items-header > div:nth-child(2),
.invoice-line-item-fields-wrapper > div:nth-child(2) {
  @apply flex-[0_0_100%] md:flex-[0_0_10%];
}
.invoice-line-items-header > div:nth-child(3),
.invoice-line-item-fields-wrapper > div:nth-child(3) {
  @apply flex-[0_0_100%] md:flex-[0_0_5%];
}
.invoice-line-items-header > div:nth-child(4),
.invoice-line-item-fields-wrapper > div:nth-child(4) {
  @apply flex-[0_0_100%] md:flex-[0_0_5%];
}
.invoice-line-items-header > div:nth-child(5),
.invoice-line-item-fields-wrapper > div:nth-child(5) {
  @apply flex-[0_0_100%] md:flex-[0_0_10%];
}
.invoice-line-items-header > div:nth-child(6),
.invoice-line-item-fields-wrapper > div:nth-child(6) {
  @apply flex-[0_0_100%] md:flex-[0_0_10%];
}

/* new select */

.select {
  @apply relative w-full;
}
.select svg,
.select i {
  @apply absolute  w-2.5 h-1.5 stroke-[2px] stroke-[#9098A9] fill-none pointer-events-none right-3;
  stroke-linecap: round;
  stroke-linejoin: round;
  top: calc(50% + 7px);
  color: #9098a9;
}
.select select {
  @apply font-normal  w-full border shadow-[0_1px_3px_-2px_#9098A9] cursor-pointer text-base  pl-3 pr-10 py-[7px] rounded-[5px] border-solid border-[#E8EAED] focus:shadow-[0_0_0_2px_rgba(#0077FF,0.2)];
  -webkit-appearance: none;
  background: white;
}

.select select option {
  @apply text-primary-700;
}

.select select:focus {
  outline: none;
}

.select select:hover + svg {
  @apply stroke-primary-500;
}
.sprites {
  @apply absolute w-0 h-0 pointer-events-none select-none;
}

select {
  /* Reset Select */
  @apply text-grey-500 bg-white;
  appearance: none;
  outline: 10px red;
  border: 0;
  box-shadow: none;
  /* Personalize */
  flex: 1;
  padding: 0 1em;
  background-image: none;
  cursor: pointer;
}
/* Remove IE arrow */
select::-ms-expand {
  display: none;
}

/* Buttons */

.btn {
  @apply inline-flex items-center justify-center rounded border text-center text-base leading-5 
transition-all ease-in-out px-3 py-1.5 border-transparent font-normal;
}
.btn-sm {
  @apply text-sm;
}

.btn-xs {
  @apply text-xs;
}

.btn-md {
  @apply text-base px-5 py-2;
}

.btn-lg {
  @apply text-lg px-6 py-3;
}

.btn-primary {
  @apply bg-primary-500 text-white;
}

.btn-primary-soft {
  @apply bg-primary-200 text-primary-700;
}

.btn-secondary {
  @apply bg-grey-400 text-white;
}

.btn-dark {
  @apply bg-tertiary-400 text-white;
}

.btn-white {
  @apply bg-white text-tertiary-400;
}

.btn-success {
  @apply bg-green-500 text-white;
}

.btn-danger {
  @apply bg-danger-700 text-white;
}

.btn-danger-outline {
  @apply text-danger-700 bg-white border-danger-700 border;
}

.btn--icon {
  @apply items-center justify-center gap-2;
}

.btn-muted {
  @apply bg-grey-100 text-grey-700;
}

.btn-muted:hover {
  @apply bg-grey-200 text-grey-700;
}

.btn-warning {
  @apply bg-yellow-500 text-white;
}

.btn-warning:hover {
  @apply bg-yellow-600;
}

/* form inputs */

.form-input {
  @apply block w-full rounded border-grey-100 bg-white text-sm leading-5 font-normal focus:ring-offset-0 focus:ring-0;
}

.form-input--auth {
  @apply px-[20px] pt-[11px] pb-[9px] text-base outline-none h-[50px] text-[#535353] rounded-[3px] border border-transparent bg-white;
}

.invoice-form-wrapper {
  & .field {
    @apply flex flex-col justify-start gap-y-1 mb-5;
  }
}

form {
  & legend {
    @apply md:block hidden;
  }
}

.invoice-field {
  & input {
    @apply block w-full rounded border-grey-100 bg-white text-sm leading-5 font-normal focus:ring-offset-0 focus:ring-0;
  }

  & input:focus {
    outline: transparent solid 2px;
    outline-offset: 2px;
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-color: #fff;
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow),
      var(--tw-shadow, 0 0 #0000);
    --tw-border-opacity: 1;
    border-color: rgb(209 213 219 / var(--tw-border-opacity));
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0
      var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0
      calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  }
}

/* modal */
.modal {
  @apply fixed bg-white rounded-lg p-8 w-[95%]  md:w-5/12;
  z-index: 100;
  /* width: 400px; */
  word-break: break-word;
  transform: translate(-50%, -50%);
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  box-shadow: rgba(17, 17, 26, 0.1) 0px 0px 16px;
}

.modal-bg {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1040;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(15px);
}

/* menu */
.badge {
  @apply items-center justify-center whitespace-nowrap text-xs font-normal px-3 py-0.5 rounded block text-center w-24 text-white;
}

.ff {
}

.dropdown-body {
  @apply opacity-100 absolute hidden text-grey-800 bg-white rounded-lg shadow-lg mt-1 top-0 right-6 text-base font-normal  border border-grey-100;
  overflow-wrap: break-word;
  z-index: 50;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 0.3s;
}

.dropdown.open {
  & .dropdown-body {
    @apply block;
  }
}

.dropdown-item {
  @apply flex items-center py-2 px-3 rounded-md text-sm text-gray-800 hover:bg-gray-100 min-w-[7.5rem];
}

.pill {
  display: block;

  & input[type="radio"] {
    display: none;
  }

  & input[type="radio"]:checked + label {
    @apply md:bg-primary-100 text-grey-900 bg-white font-semibold md:font-normal;
  }

  & label {
    @apply font-normal text-sm text-grey-700 block p-0 rounded-2xl md:px-2.5 md:py-1;
    cursor: pointer;
    display: block;
  }
}

/* header */

.app-header {
  @apply sticky top-0 z-50 bg-white shadow-md;
  height: 70px;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.05), 0 1px 0 rgba(0, 0, 0, 0.05);
}

/* pagy */
.pagy {
  @apply flex space-x-1 font-semibold text-sm text-gray-500 justify-end;

  label {
    @apply inline-block whitespace-nowrap bg-gray-200 rounded-lg px-3 py-0.5;
    input {
      @apply bg-gray-100 border-none rounded-md;
    }
  }

  &.info {
    @apply text-grey-600 font-normal;
  }

  a.current {
    @apply bg-primary-500 text-danger-700;
  }
}

/* table */

.table-actions {
  @apply mb-4 bg-white py-2 px-2 rounded-none md:rounded-md flex justify-between items-center flex-wrap md:flex-nowrap w-full;
}

/* Select2 */
.select2-container--default
  .select2-selection--single
  .select2-selection__rendered {
  @apply text-sm !text-grey-500 font-normal !py-[3px];
}

.select2-container--default .select2-selection--single {
  @apply !h-auto !border !border-gray-300 !rounded;
}

.select2-container--default
  .select2-selection--single
  .select2-selection__arrow {
  @apply !top-1;
}

#select2-bank-select-results {
  max-height: 350px !important;
}

/* Toggle Switch */
input:checked ~ .switch {
  @apply left-[18px];
}
/*
 * 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.
 *


 */