/* Navbar */
.navbar-logo{
  display: flex;
  width: 65%;
  justify-content: space-evenly;
  align-items: center;
  flex-direction: row;
  flex-wrap: nowrap;
}

.navbar-logo .navbar {
    grid-area: navbar;
    margin-left: 3rem;
}

.navbar-logo .navbar ul {
    list-style-type: none;
    padding: 0;
    margin: 0
}

.navbar-logo .navbar ul li {
    display: inline;
    margin-right: 1rem;
}

.navbar-logo .navbar ul li a {
  font-size: .8rem;
  border-radius: .5rem;
}

.navbar-logo .navbar ul li a.active {
  padding: .5rem;
  background: #149d19;
}

.navbar-logo .navbar ul li a.active:hover {
  color: white;
}

.flatpickr-day.prevMonthDay.inRange, .flatpickr-day.nextMonthDay.inRange, .flatpickr-day.today.inRange, .flatpickr-day.prevMonthDay.today.inRange, .flatpickr-day.nextMonthDay.today.inRange, .flatpickr-day:hover, .flatpickr-day.prevMonthDay:hover, .flatpickr-day.nextMonthDay:hover, .flatpickr-day:focus, .flatpickr-day.prevMonthDay:focus, .flatpickr-day.nextMonthDay:focus {
    cursor: pointer;
    outline: 0;
    background: #149d19!important;
    border-color: #149d19!important;
}

.flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange, .flatpickr-day.selected.inRange, .flatpickr-day.startRange.inRange, .flatpickr-day.endRange.inRange, .flatpickr-day.selected:focus, .flatpickr-day.startRange:focus, .flatpickr-day.endRange:focus, .flatpickr-day.selected:hover, .flatpickr-day.startRange:hover, .flatpickr-day.endRange:hover, .flatpickr-day.selected.prevMonthDay,
.flatpickr-day.startRange.prevMonthDay, .flatpickr-day.endRange.prevMonthDay, .flatpickr-day.selected.nextMonthDay, .flatpickr-day.startRange.nextMonthDay, .flatpickr-day.endRange.nextMonthDay {
    background: #149d19!important;
    -webkit-box-shadow: none;
    box-shadow: none;
    color: #fff;
    border-color: #149d19!important;
}

.flatpickr-day.prevMonthDay.inRange, .flatpickr-day.nextMonthDay.inRange,.flatpickr-day.inRange{
  background: #7ed957!important;
  border-color: #7ed957!important;
  -webkit-box-shadow: -5px 0 0 #7ed957, 5px 0 0 #7ed957!important;
    box-shadow: -5px 0 0 #7ed957, 5px 0 0 #7ed957!important;
}

.flatpickr-calendar,.flatpickr-months .flatpickr-month,.flatpickr-monthDropdown-month,
span.flatpickr-weekday,.flatpickr-current-month .flatpickr-monthDropdown-months{
  background: #434343!important;
  border-radius: 1rem!important;

}

select.flatpickr-monthDropdown-months:focus > option:hover,select.flatpickr-monthDropdown-months option:checked{
  background: #149d19!important;
}

/* Navbar */
.admin{
  /* Dashboard */
  margin-inline: 10vw;
  margin-top: 1rem;

  @media (max-width: 1400px) {
    margin-inline: 5vw;
  }

  @media (max-width: 1200px) {
    margin-inline: 1rem;
  }
    .dashboard{
      gap:1.5rem
    }

    .container-overview {
      background: #373737;
      border-radius: 1rem;
      padding-block: .75rem 1rem;
      color: white;
      box-shadow: 2px 2px 8px #161616
    }

    .riepilogo{
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 1rem
    }

    .riepilogo h4{
      font-weight: 600;
      margin: 0;
    }

    .toggle-button {
      padding: 0.2rem 0.4rem;
      font-size: .8rem;
      background-color: #434343;
      color: white;
      border-radius: 0.5rem;
      font-weight: 600;
      cursor: pointer;
      border: none;
      box-shadow: 2px 2px 2px #2c2c2c;
      transition: background-color 0.3s, transform 0.3s;
    }

    .toggle-button[data-active="true"] {
      background-color: dimgray;
      color: white;
    }

    #datePicker{
      padding: 0.2rem 0.4rem;
      font-size: .8rem;
      background-color: #434343;
      color: white;
      border-radius: 0.5rem;
      font-weight: 600;
      cursor: pointer;
      border: none;
      box-shadow: 2px 2px 2px #2c2c2c;
      transition: background-color 0.3s, transform 0.3s;
    }

    .overview{
      /* background: #515151; */
      padding-inline: 1rem;
      border-radius: 1rem;
      color: white;
      position: relative;
    }

    :is(.overview, .detail) .title {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    :is(.overview, .detail) .title :where(p, h4) {
      font-size: 1rem;
      font-weight: 600;
      margin: 0;
    }

    :is(.overview, .detail) .title span {
      font-size: .8rem;
      font-weight: 400;
      color: darkgrey;
      cursor: pointer;
      position: relative;
      z-index: 10;
    }

    :is(.overview, .detail) .title span:hover{
      color: lightgrey;
    }

    .overview .main {
      margin-top: .75rem;
      display: flex;
      gap: 15px;
      align-items: center;
    }

    .overview .icon {
      height: 45px;
      width: 45px;
      border-radius: 50%;
      background: green;
      display: grid;
      place-items: center;
    }

    #purchase .icon{
      background: #bcd4ff;
    }

    #purchase .icon i{
      color: royalblue;
    }

    div#income {
      border-inline: 2px solid #7d7d7d;

    }

    #income .icon{
      background: #fbf5d2;
    }

    #income .icon i{
      color: #d3bd1f;
      font-size: 1.2rem;
      margin-left: -3px;
    }

    #subscribe .icon{
      background: #f6d2dd;
    }

    #subscribe .icon i{
      color: palevioletred;
    }

    .overview .main span {
      font-size: 1.5rem;
      font-weight: bold;
    }

    .caption {
      display: flex;
      align-items: center;
      gap: 1rem;
      margin-top: 0.5rem;
    }

    .caption p {
      margin: 0;
    }

    .caption p span {
      font-size: .9rem;
    }

    .caption p span:last-child {
      font-weight: 600
    }

    .trend {
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .trend.up{
      color: #68f868;
    }

    .trend.down{
      color: salmon;
    }

    .trend.up span{
      color: #68f868;
    }

    .trend.down span{
      color: salmon;
    }

    .trend i.fa-solid.fa-arrow-trend-up {
      font-size: .9rem;
    }

    .trend p {
      font-family: monospace;
      font-size: 1rem;
      font-weight: 700;
    }

    .trend p span{
      font-size: 1rem;
    }

    .chart {
      min-height: 185px;
      position: absolute;
      top: 60%;
      right: 10%;
      transform: translate(0%, -50%);
    }

  .container-detail {
    padding: 0;
    display: grid;
    grid-template-columns: 4fr 2fr;
    grid-template-rows: 2fr 2fr;
    gap: 1.5rem;
  }

  .detail.orders {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
    color:#dbe8ff
  }

  .detail.bonifici {
    grid-column: 1 / 2;
    grid-row: 2 / 2;
    align-self: start;
    color: #fffbe3;
  }

  .detail.subscribes {
    grid-column: 2 / 2;
    grid-row: 1 / 3;
    color: #ffebf1;
    padding: .75rem
  }

  .detail {
    background: #373737;
    border-radius: 1rem;
    padding: .75rem 1rem;
    color: white;
    box-shadow: 2px 2px 8px #161616;
  }

  :is(.order-main,.bonifico-main,.subscribe-main) {
    font-size: .9rem;
    padding-block: .5rem;
    margin-inline: .5rem;
  }

  :is(.order,.bonifico,.subscribe) {
    font-size: .9rem;
    margin-block: 0.5rem;
    padding-block: 0.25rem;
    background: #434343;
    border-radius: 0.5rem;
    box-shadow: 1px 1px 4px #2c2c2c;
    transition: all .2s;
    cursor: pointer;
    margin-inline: .5rem;
  }

  .subscribe, .subscribe-main{
    font-size: .8rem
  }

  :is(.order,.bonifico,.subscribe) div {
    text-transform: capitalize;
    text-wrap: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  :is(.order,.bonifico,.subscribe):hover{
    background: #696969;
  }

  :is(div#order-list,div#bonifico-list) {
    max-height: 190px;
    overflow-y: scroll;
  }

  div#subscribe-list {
    max-height: 500px;
    overflow-y: scroll;
  }

  div.no-result{
    text-align: center;
    margin-block: 1rem;
    background: #434343;
    width: fit-content;
    margin-inline: auto;
    padding: 0.325rem 0.75rem;
    border-radius: 0.75rem;
    box-shadow: 1px 1px 4px #2c2c2c;
  }

  ::-webkit-scrollbar-track{
  	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
  	border-radius: 10px;
  }

  ::-webkit-scrollbar{
  	width: 5px;
  }

  ::-webkit-scrollbar-thumb{
  	border-radius: 10px;
  	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
  	background-color: #7ed957;
  }
  /* Dashboard */

  /* Prodotti */
  .container-products {
      background: #373737;
      border-radius: 1rem;
      padding: 1rem;
      color: white;
      box-shadow: 2px 2px 8px #161616;
      margin-bottom: 2rem;
  }

  .products-title h4{
    font-weight: 600;
    margin-bottom: 1rem
  }

  .prodotti .toggle-button {
    padding: 0.25rem 0.5rem;
    font-size: 1rem;
    font-weight: 500;
  }

  .product-card {
      color: white;
      background: #434343;
      box-shadow: 3px 3px 4px #2c2c2c;
      border-radius: .5rem;
      padding: 0.5rem;
      margin-bottom: 1rem;
      transition: all 0.2s ease-in-out;
      cursor: pointer;
  }

  .product-card:hover {
    background: #353333;
  }

  .product-image {
      width: 100%;
      border-radius: 0.5rem;
      margin-bottom: 0.5rem;
  }

  .product-info h5 {
      font-size: 1rem;
      font-weight: 600;
      margin: 0;
  }

  .product-info p {
      font-size: 0.8rem;
      margin-block: 0.25rem;
  }

  .price {
      font-weight: bold;
      color: #ffd700;
  }

  .product-type {
    font-size: 0.7rem;
    background: cadetblue;
    width: fit-content;
    border-radius: 0.4rem;
    padding: 0.1rem 0.4rem;
    font-weight: 500;
  }

  .status {
      font-weight: bold;
  }

  .status.active {
      color: #4CAF50; /* Verde per i prodotti attivi */
  }

  .status.inactive {
      color: #f44336; /* Rosso per i prodotti non attivi */
  }

  .type {
      font-weight: bold;
      color: #2196F3; /* Blu per il tipo di prodotto */
  }
  /* Prodotti */

  /* Discount */
  .container-discounts {
      background: #373737;
      border-radius: 1rem;
      padding: 1rem;
      color: white;
      box-shadow: 2px 2px 8px #161616;
      margin-bottom: 2rem;
  }

  .discounts-title button{
    background: inherit;
    color: inherit;
    padding: inherit;
    margin: inherit;
    border: inherit;

  }

  .discounts-title h4{
    font-weight: 600;
    margin-bottom: 0;
  }

  :is(.form-editProduct, .form-discount) input, :is(.form-editProduct, .form-discount) textarea, :is(.form-editProduct, .form-discount) select, :is(.form-editProduct, .form-discount) button {
    margin: 5px 0;
    padding: 10px;
    width: calc(100% - 22px); /* Aggiustamento per padding */
    border-radius: 0.5rem;
    border: none;
    background-color: #434343;
    color: white;
    box-shadow: 2px 2px 2px #2c2c2c;
  }

  .input-group{
    padding: 0 0 0 10px;
    margin: 5px 0;
    width: calc(100% - 22px); /* Aggiustamento per padding */
    border-radius: 0.5rem;
    border: none;
    background-color: #434343;
    color: white;
    box-shadow: 2px 2px 2px #2c2c2c;
  }

  .input-group input{
    width: auto;
    margin: 0;
    padding: 10px 0;
    border: none;
    border-radius: 0;
    background: inherit;
    color: inherit;
    box-shadow: none;
  }

  /* Potresti voler aggiungere questo per i browser che supportano la pseudo-classe :-webkit-autofill */
  :is(.form-editProduct, .form-discount) input:-webkit-autofill {
      -webkit-box-shadow: 0 0 0px 1000px #434343 inset;
      -webkit-text-fill-color: white;
      transition: background-color 5000s ease-in-out 0s;
  }

  :is(.form-editProduct, .form-discount) input[type="date"]::-webkit-calendar-picker-indicator {
      filter: invert(1);
  }

  ::placeholder {
    color: white;
    opacity: 0.7;
  }

  .input-group span{
    z-index: 1;
    border: none;
    background: grey;
    color: inherit;
    box-shadow: none;
  }

  :is(.form-editProduct, .form-discount) button {
    cursor: pointer;
    transition: background-color 0.3s;
  }

  :is(.form-editProduct, .form-discount) button:hover {
    background-color: #149d19;
  }

  .discount-main, .users-main {
    font-size: .9rem;
    padding-block: .5rem;
    margin-inline: .5rem;
  }

  .list-discount, .list-user {
    margin-top: 1rem;
    padding-inline: 10px;
    max-height: 1000px;
    overflow-y: scroll;
    overflow-x: hidden;
    position: relative;
  }

  .list-discount div.row, .list-user div.row {
    background: #434343;
    margin-bottom: 5px;
    padding: 10px;
    border-radius: 0.5rem;
    color: #d3ffd3;
    box-shadow: 1px 1px 4px #2c2c2c;
  }

  .list-discount div.row.expired{
    color: #ffc7c0!important;
  }

  .list-discount div.row:hover, .list-user div.row:hover {
    background: #535353;
    cursor: pointer;
  }

  .discounts .toggle-button {
    padding: 0.25rem 0.5rem;
    font-size: 1rem;
    font-weight: 500;
  }

  span.notRequired{
        padding: 0.2rem 0.3rem;
        background-color: grey;
        color: white;
        border-radius: 0.3rem;
        font-size: .6rem;
        margin-left: 0.5rem;
    }

  span.isRequired{
      padding: 0.2rem 0.3rem;
      background-color: #149d19;
      color: white;
      border-radius: 0.3rem;
      font-size: .6rem;
      margin-left: 0.5rem;
  }

  .popup-menu {
    position: absolute;
    background-color: #373737;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    border-radius: 0.5rem;
    padding: 5px;
    z-index: 1000;
    width: fit-content;
    font-size: .8rem;
    right: 5px;
  }

  .popup-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .popup-menu ul li {
    padding: 8px 12px;
    color: white;
    cursor: pointer;
  }

  .popup-menu ul li:hover {
    background-color: #434343;
  }
  /* Discount */

  /* Edit products */
  .image-container {
      max-width: 50%;
      margin-top: 10px;
      margin-inline: auto;
      box-shadow: 1px 1px 4px #2c2c2c;
      width: fit-content;
      border-radius: 0.5rem;
  }

  .image-preview {
    max-width: 100%;
    /* max-height: 200px; */
    border-radius: 0.5rem;
  }
  /* Edit products */

  /* Orders */
  .container-orders {
      background: #373737;
      border-radius: 1rem;
      padding: 1rem;
      color: white;
      box-shadow: 2px 2px 8px #161616;
      margin-bottom: 2rem;
  }

  .orders-title button{
    background: inherit;
    color: inherit;
    padding: inherit;
    margin: inherit;
    border: inherit;

  }

  .orders-title h4{
    font-weight: 600;
    margin-bottom: 0;
  }

  .list-order {
    margin-top: 1rem;
    position: relative;
  }

  .list-order div.row {
    background: #434343;
    margin-bottom: 5px;
    padding: 10px;
    border-radius: 0.5rem;
    color: white;
    box-shadow: 1px 1px 4px #2c2c2c;
  }

  .list-order div.row:hover {
    background: #535353;
    cursor: pointer;
  }

  .ordini.pay{
    color: #d3ffd3!important
  }

  .ordini.wait{
    color: #ffeab3 !important
  }

  .ordini.checkout{
    color: #ffc7c0!important
  }

  .ordini div {
    text-transform: capitalize;
    /* text-wrap: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; */
  }

  #no-results div{
    text-align: center;
    margin-block: 1rem;
    background: #434343;
    width: fit-content;
    margin-inline: auto;
    padding: 0.325rem 0.75rem;
    border-radius: 0.75rem;
    box-shadow: 1px 1px 4px #2c2c2c;
  }

  /* Orders */

  /* View order detail */
  .order-summary, .user-summary {
      background-color: #373737;
      color: white;
      border-radius: 1rem;
      padding: 2rem;
      box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
  }

  .order-summary h4, .user-summary h4{
    font-size: 1.2rem;
    margin-bottom: .75rem
  }

  .summary-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 1rem;
  }

  .customers, .financial-status, .user-filter{
    display: flex;
  }

  .customer-detail, .financial-status-detail, .user-filter-detail{
    padding-inline: 1.5rem;
  }

  :is(.customer-detail, .financial-status-detail, .user-filter-detail):nth-child(2){
    border-inline: 1px solid grey;
  }

  .customer-detail p, .financial-status-detail p, .user-filter-detail p{
    color: #dddddd;
    margin-bottom: 0.35rem;
    font-size: .85rem;
  }

  .financial-main p{
    margin: 0!important;
  }

  :is(.customer-detail, .financial-detail, .financial-status-detail) span {
    font-weight: 500;
  }

  .financial-status-detail span{
    padding: 0.1rem 0.3rem;
    border-radius: 0.5rem;
    font-weight: 600;
    font-size: .8rem;
  }

  .financial-status-detail span.wait{
    background: #ffea95;
    color: #a26100;
  }

  .financial-status-detail span.success{
    background: #c5ffa9;
    color: #006f10;
  }

  .financial-status-detail span.cancel{
    background: #ffa9a9;
    color: #9d0909;
  }


  .account.customer-detail span {
    color: #7ed957;
    text-transform: uppercase;
    cursor: pointer;
    font-size: .95rem
  }

  .account.customer-detail span:hover {
    color: #6ac544;
  }

  .customers, .financials-container, .product-list{
      background-color: #434343;
      padding: 1rem;
      border-radius: 0.5rem;
      margin-bottom: 1rem;
  }

  .financials{
    display: flex;
    gap: 4rem;
  }

  .financial-main, .financial-detail{
    display: flex;
    flex-direction: column;
    gap: .5rem;
  }

  .financial-main p {
    font-weight: 300
  }

  .order-product-card {
    display: flex;display: flex;
    align-items: center;
    margin-bottom: 1rem;
    background: #373737;
    padding: 0.5rem;
    border-radius: 0.5rem;
    box-shadow: 1px 1px 4px #2c2c2c;
  }

  .order-product-image {
    height: 80px;
    margin-right: 1rem;
    border-radius: .5rem;
  }

  .order-product-info h5{
    margin: 0
  }
  /* View order detail */

  /* List Users */
  .list-user div.row{ /* Per il resto vedi list-discount */
    color: white
  }

  .user div:nth-child(n+3) span{
    background-color: dimgrey;
    font-weight: 600;
    font-size: .8rem;
    text-transform: uppercase;
    padding: 0.2rem 1rem;
    border-radius: 0.5rem;
  }

  .user div.active span{
    background-color: #149d19;
  }

  .user div.block span{
    background-color: #dc3545;
  }

  .user-filter-detail:nth-child(3){
    border-inline: 1px solid grey;
  }

  .user-filter-detail div button:first-child{
    margin-right: .5rem
  }
  /* List Users */

  /* Edit Users */
  .user-summary .customers .customer-detail:nth-child(n+2){
    border-inline: 1px solid grey;
  }

  .user-summary .customers .customer-detail:last-child{
    border-inline: none;
  }

  .user-summary .customers .customer-detail i{
    color: salmon;
    margin-left: .5rem;
    cursor: pointer;
  }

  .user-summary .customers .customer-detail i:hover{
    color: #ff4631;
  }

  .ip_block_title span{
    margin-left: .5rem;
    padding: 0.1rem 0.3rem;
    border-radius: 0.5rem;
    font-weight: 600;
    font-size: .8rem;
  }

  .ip_block_title span.free, .user-summary .summary-header span.active{
    background: #c5ffa9;
    color: #006f10;
  }

  .ip_block_title span.limit, .user-summary .summary-header span.block{
    background: #ffa9a9;
    color: #9d0909;
  }

  .user-summary .customers .customer-detail button{
    margin: 0 !important;
    margin-left: 1rem !important;
    font-size: .9rem;
    padding: 0.2rem 0.5rem;
  }

  .user-summary .customers .customer-detail input{
    margin: 0;
    padding: 3px 10px;
    width: 100%;
    font-size: 1rem;
    border-radius: 0.5rem;
    border: none;
    background-color: #434343;
    color: white;
    box-shadow: 0px 0px 9px 1px #2c2c2c;
  }

  .user-summary .summary-header span{
    background-color: dimgrey;
    font-weight: 600;
    font-size: .8rem;
    text-transform: uppercase;
    padding: 0.1rem 0.3rem;
    border-radius: 0.5rem;
    margin-left: 1rem;
  }

  .product-list.user .order-product-image{
    width: 125px;
    height: auto;
  }

  .product-list.user{
    max-height: 600px;
    overflow-y: scroll;
  }

  .product-list.user .order-product-card h5{
    font-size: 1rem;
    font-weight: 600
  }

  .order-product-card p.status.active{
    background: #c5ffa9;
    color: #006f10;
    width: fit-content;
    padding: 0.1rem 0.3rem;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: .3s all;
    font-size: .9rem;
  }

  .order-product-card p.status.disabled{
    background: #ffa9a9;
    color: #9d0909;
    width: fit-content;
    padding: 0.1rem 0.3rem;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: .3s all;
    font-size: .9rem;
  }

  .order-product-card.open-order{
    cursor: pointer;
  }

  .order-product-card.open-order span{
    font-size: .8rem;
  }

  .order-product-card.open-order span{
    font-size: .8rem;
    font-weight: 300;
  }

  .user-summary h4{
    font-size: 1.5rem;
    font-weight: 600;
  }
  /* Edit Users */
}