/**
 * All of the CSS for your admin-specific functionality should be
 * included in this file.
 */

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

:root {
  --brand-color: #5e19cf; /*brand color*/
  --brand-color-2 : #7230DF; /*brand color 2*/
  --secondary: #f9f6ff; /*CTA bg light gray*/
  --light-gray: #f8f8f8; /*BG light gray*/
  --lighter-gray: #ececec; /*border light gray*/
  --tab-bg: #f7f6f8; /*tab bg*/
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/inter/Inter-Regular.woff2") format("woff2"),
    url("../fonts/inter/Inter-Regular.woff") format("woff");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/inter/Inter-SemiBold.woff2") format("woff2"),
    url("../fonts/inter/Inter-SemiBold.woff") format("woff");
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/inter/Inter-Bold.woff2") format("woff2"),
    url("../fonts/inter/Inter-Bold.woff") format("woff");
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/inter/Inter-Medium.woff2") format("woff2"),
    url("../fonts/inter/Inter-Medium.woff") format("woff");
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
label,
button,
li,
span,
table td 
{
  font-family: "Inter", sans-serif;
}

@layer components {
  h1 {
    @apply font-semibold text-lg;
  }
  h2 {
    @apply font-semibold text-sm;
  }
  p {
    @apply text-sm;
  }
  header {
    @apply bg-white;
  }
  nav {
    @apply mx-auto flex max-w-full items-center justify-between gap-x-6 px-5 border-b-2 border-lighter-gray;
    .brand-logo {
      @apply flex lg:flex-1;
      .divide {
        @apply w-5 h-px rotate-90 border border-lighter-gray;
      }
      span {
        @apply -m-1.5 p-1.5 flex items-center gap-2.5;
        img {
          @apply h-8 w-auto;
        }
      }
    }
    .links, .ig-es-nav-tabs {
      @apply flex gap-x-5 md:gap-x-8 xl:gap-x-12;
      a {
        @apply text-sm leading-6 text-gray-900 py-5;
      }
    }
    .links{
      a.active {
        @apply border-b-2 font-semibold py-5 border-primary;
      }
    }
    .ig-es-nav-tabs{
      @apply gap-x-8;
      a{
        @apply px-2;
      }
      a.active {
        @apply bg-gray-100;
      }
    }
    .cta {
      @apply flex flex-1 items-center justify-end gap-x-2.5;
    }
  }
  button,
  .tab {
    @apply rounded-md px-4 py-2 text-sm font-semibold focus:ring-[0.5px] focus:ring-tertiary;
    &.primary {
      @apply bg-primary text-white hover:bg-tertiary;
    }
    &.secondary {
      @apply bg-secondary text-gray-900 hover:ring-[0.5px] hover:ring-tertiary;
    }
    &.lighter-gray {
      @apply bg-lighter-gray text-gray-900 hover:ring-[0.5px] hover:ring-tertiary;
    }
    &.cross {
      @apply rounded-md bg-secondary px-0.5 text-gray-900 focus:ring-[0.5px] focus:ring-tertiary hover:ring-[0.5px] hover:ring-tertiary;
    }
    &.outline{
      @apply bg-transparent text-white outline-none ring-[0.5px] ring-white focus:ring-[0.5px] focus:ring-tertiary hover:ring-[0.5px] hover:ring-tertiary;
    }
    &.white{
      @apply bg-white hover:ring-[0.5px] hover:ring-tertiary;
    }
  }
  select {
    @apply py-1.5 px-3 text-sm bg-white border border-lighter-gray rounded-sm appearance-none truncate hover:border-light-gray focus:outline-none cursor-pointer focus:ring-[0.5px] focus:ring-tertiary hover:ring-[0.5px] hover:ring-tertiary !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e") !important;
    background-position: right 0.5rem center !important;
    background-repeat: no-repeat !important;
    background-size: 1.5rem 1.5rem !important;
    /* option{
      @apply bg-white !important;
    } */
  }

  input[type="time"]{
    @apply cursor-pointer;
  }
  /* main {
    @apply space-y-5;
  } */
  #dropdown {
    @apply z-10 w-40 bg-white divide-y divide-gray-100 rounded-lg shadow dark:bg-gray-700;
    ul {
      @apply py-2 text-sm text-gray-700 dark:text-gray-200;
      li {
        a {
          @apply block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white;
        }
      }
    }
  }
  .tabs {
    @apply flex justify-between p-4 items-start;
    ul {
      @apply flex flex-row flex-wrap justify-start gap-3 items-start w-full;
    }
    .tab {
      @apply font-normal text-xs border border-lighter-gray truncate;
      background-color: var(--tab-bg);
      &.active, &:hover {
        @apply bg-white font-medium ring-[0.5px] ring-tertiary;
      }
    }
  }
  .templates {
    @apply flex flex-row gap-5 px-5 pb-5 justify-start w-full flex-wrap;
    .create-new{
      @apply flex flex-col text-center items-center w-60 max-w-xs justify-center rounded-md outline-2 outline-dashed outline-lighter-gray p-5 space-y-8;
      background-color: var(--tab-bg);
    }
    .ig-es-card {
      @apply rounded-md w-60 max-w-xs border border-lighter-gray overflow-hidden;
      height: 350px;
      background-color: var(--tab-bg);
      .card-head {
        background-image: url('data:image/svg+xml,<svg width="240" height="131" viewBox="0 0 240 131" fill="none" xmlns="http://www.w3.org/2000/svg"><path opacity="0.8" d="M73.3763 45.7677C168.735 42.6747 170.508 75.1248 176.424 93.7568C188.998 119.214 208.95 131.193 269.498 130.966L267.014 -5.53127L0.653799 -4.53028C-2.58553 22.7607 17.2441 46.8768 73.3763 45.7677Z" fill="%23EBE5F7"/></svg>');
        @apply mx-auto py-1.5 w-full bg-no-repeat bg-right-top bg-contain opacity-80 relative h-2/3;
        .group{
          @apply w-full h-full;
        }
        img {
          @apply mx-auto my-2 relative object-contain;
          width:99%;
          height:90%;
        }
        svg{
         
        }
      }
      .card-desc{
        @apply py-5 px-3 space-y-4 bg-white h-1/3;
        .title{
          @apply flex flex-row justify-between items-center; 
        }
        ul.meta-tags{
          @apply flex flex-row gap-2.5 justify-start items-center;
          li{
            @apply px-2 py-1 rounded-sm font-normal text-xs truncate;
          }
        }
        .saved{
          button{
            @apply focus:ring-0 px-0;
          }
        }
      }
    }
  }
  
  .ig-es-list-table, .icegram-mailer-email-log-list, .es-lists-table, .es-forms-table, .es-custom-field-table, .es-reports-view, .es-campaign-reports-table {
    @apply flex flex-col bg-white space-y-5 p-4 mt-5;
    h2{
      @apply -mt-5;
    }
    .table,.wp-list-table, #post-body-content{
      @apply -mx-4 sm:mx-0 sm:rounded-sm w-full;
      table, .contacts, .lists, .forms, .customfields, .reports {
        @apply min-w-full divide-y divide-lighter-gray w-full;
      }
      .contacts, .lists, .forms, .customfields, .reports {
        @apply border-0 mt-5;
        tbody {
          tr{
            @apply bg-white;
          }
        }
      }
      input.checkbox {
        @apply absolute left-4 top-1/2 -mt-2 h-4 w-4 rounded border-gray-300 focus:ring-transparent text-primary;
      }
      
    }
  }


  thead {
    @apply text-xs font-medium text-gray-600 bg-light-gray;

    input#cb-select-all-1 {
      @apply absolute left-4 top-1/2 -mt-2 h-4 w-4 rounded border-gray-300 focus:ring-transparent text-primary -ml-0;
    }

    th {
      @apply py-4
    }

    th:first-of-type {
      @apply relative px-7 sm:px-6;
    }
    th:nth-child(2) {
      @apply py-2 pl-4 pr-3 text-left  sm:pl-6;
    }
    th {
      @apply px-3 py-2 text-left lg:table-cell;
    }
    th:nth-child(6) {
      @apply px-3 py-2 text-center lg:table-cell;
    }
    th:last-of-type {
      @apply relative py-2 pl-3 pr-4 sm:pr-6 text-left;
    }
    
    th#subject {
      @apply w-3/12;
    }
  }
  tbody {
    @apply divide-y divide-lighter-gray border-0;
    
    th:first-of-type {
      @apply relative px-7  sm:px-6;
      input.checkbox {
        @apply -ml-0;
      }
    }
    tr:first-of-type {
      @apply border-0;
    }
    td:first-of-type {
      @apply relative px-7 sm:w-12 sm:px-6;
    }
    td:nth-child(2) {
      @apply relative py-4 pl-4 pr-3 text-sm sm:pl-6;
    }
    td {
      @apply px-3 py-3.5 text-sm text-gray-800 lg:table-cell text-[15px];
    }
    td:nth-child(6) {
      @apply px-3 py-3.5 text-sm text-center text-gray-500;
    }
    td:last-of-type {
      @apply relative py-3.5 pl-3 pr-4 text-left text-sm font-medium sm:pr-6;
    }

    /* reports table column */
    td.status {
      .status-sent {
        @apply flex-shrink-0 h-6 w-6 text-green-400;
      }
    
      .status-sending {
        @apply flex-shrink-0 h-6 w-6 text-yellow-400 inline;
      }
    
      .status-paused {
        @apply flex-shrink-0 h-6 w-6 inline text-gray-500;
      }
    
      .status-queued {
        @apply flex-shrink-0 h-6 w-6 inline text-orange-400;
      }
    
      .status-failed {
        @apply flex-shrink-0 h-6 w-6 inline text-red-500;
      }
    
      .status-send-now {
        @apply h-6 w-6 inline text-yellow-400;
      }
    }

    td.column-finish_at {
      @apply text-left;
    }
    /* End */

    .list-item {
      @apply flex flex-row space-x-2.5 items-center;
      .avatar {
        @apply bg-lighter-gray rounded-md p-4;
        img {
          @apply h-full w-full max-w-full overflow-hidden max-h-full object-contain;
        }
      }
      .item-details {
        @apply flex flex-col gap-1.5;
        p {
          @apply font-semibold text-[15px];
        }
        .item-meta {
          @apply flex flex-col text-gray-400 text-[13px];
        }
      }
    }
  }

  tfoot {
    @apply text-xs font-medium text-gray-600 bg-light-gray;

    input#cb-select-all-2 {
      @apply absolute left-4 top-1/2 -mt-2 h-4 w-4 rounded border-gray-300 focus:ring-transparent text-primary -ml-0;
    }

    th:first-of-type {
      @apply relative px-7  sm:px-6;
    }
    th:nth-child(2) {
      @apply py-2 pl-4 pr-3 text-left  sm:pl-6;
    }
    th {
      @apply px-3 py-2 text-left lg:table-cell;
    }
    th:nth-child(6) {
      @apply px-3 py-2 text-center lg:table-cell;
    }
    th:last-of-type {
      @apply relative py-2 pl-3 pr-4 sm:pr-6 text-left;
    }
  }

  .ig-es-popup-container{
    @apply fixed inset-x-0 bottom-0 sm:inset-0 sm:flex sm:items-center sm:justify-center fixed inset-0 transition-opacity;
    z-index: 999999;
  }
  .ig-es-popup-overlay{
    @apply absolute inset-0 bg-gray-500 opacity-75;
  }
  .ig-es-popup{
    @apply font-medium relative overflow-hidden rounded bg-white text-left shadow-xl sm:my-8 sm:max-w-3xl;
    
    .ig-es-popup-title{
      @apply px-6 py-3;
    }
    .ig-es-popup-close-container{
      @apply absolute right-3 top-3;

      .cross{
        @apply px-0.5 py-1 !important;
      }
    }
    .ig-es-popup-close-cta{
      @apply rounded text-gray-700 hover:text-gray-900 focus:outline-none bg-gray-100 p-0;
    }
    .ig-es-popup-cta-container{
      @apply p-3 float-right;
    }
    .ig-es-new-campaign-type-tab{
      @apply cursor-pointer p-6 text-center rounded bg-white hover:scale-105 hover:shadow-md;
    } 
    .ig-es-campaign-type-title{
      @apply pt-4 text-sm font-medium;
    }
    h3.modal-headline{
      @apply text-base font-semibold leading-6 text-gray-900;
    }
  }
  

}

#wpcontent {
  padding-left: 0;
}

.item-dots {
  @apply relative flex items-center justify-center flex-shrink-0 w-5 h-5;

  span {
    @apply block w-2 h-2 transition duration-150 ease-in-out bg-gray-300 rounded-full group-hover:bg-gray-400 group-focus:bg-gray-400;
  }
}

svg {
  @apply mt-1 w-full h-full text-indigo-700 transition duration-150 ease-in-out group-hover:text-indigo-600 group-focus:text-indigo-600;
}