/*!
admin/_sessions.scss
Source file (relative to compiled *.css file): ./scss/admin/_sessions.scss

This file is included in PhotoBerry Studio. For licensing and copyright notices, please see ../../license.txt (relative to *.css file) or ../../../license.txt (relative to *.scss file).
*/

// =============================================================================
// SESSIONS LIST PAGE
// =============================================================================

//.photoberry-studio-admin-page.post-type-photoberry-session.post-php {
//  background-color : $accent-light;
//
//  .photoberry-studio-admin-header {
//    border-bottom : 1px solid $gray-2;
//    }
//  }

.post-type-photoberry-session .photoberry-studio-sidebar-wrapper {
  display    : flex;
  gap        : 10px;
  flex-wrap  : wrap;
  margin-top : 20px;
  }

@media (min-width : 782px) {
  .post-type-photoberry-session:has(.photoberry-studio-sidebar-filtering-collapsed) {
    #posts-filter {
      width : calc(100% - 60px);
      }

    .photoberry-studio-grid, .tablenav.bottom {
      width       : calc(100% + 60px);
      margin-left : -50px;
      box-sizing  : content-box;
      }
    }
  }

@media (max-width : 781px) {
  .post-type-photoberry-session .photoberry-studio-sidebar-wrapper {
    flex-direction : column;

    #posts-filter {
      width : 100%;
      }

    .photoberry-studio-sidebar-filtering {
      width : 100%;
      }
    }
  }

.post-type-photoberry-session {

  .photoberry-studio-sidebar-filtering {
    padding    : 0 10px 0 0;
    width      : 250px;
    box-sizing : border-box;
    display    : inline-block;
    position   : relative;

    &.photoberry-studio-sidebar-filtering-collapsed {
      width : 40px;

      > .photoberry-studio-sidebar-filter, h2 {
        display : none;
        }

      .photoberry-studio-button-collapse {
        top   : 0;
        right : unset;
        left  : 0;

        > a {
          box-shadow       : none;
          border           : 1px solid $gray-3;
          box-sizing       : border-box;
          background-image : url("../img/icons/gray/filter.svg");
          }
        }
      }

    .photoberry-studio-selection {
      min-height : 36px !important;
      }

    select, input, .photoberry-studio-selection {
      width     : 100%;
      max-width : unset;
      }

    h3 {
      font-size     : 13px;
      font-weight   : 400;
      margin-bottom : 10px;
      }

    .photoberry-studio-sidebar-filter {
      margin-bottom : 25px;
      }

    h2 {
      margin-bottom : 25px;
      margin-top    : 10px;
      }

    .photoberry-studio-button-collapse {
      text-align : right;
      position   : absolute;
      top        : 0;
      right      : 10px;
      }
    }

  #posts-filter {
    width      : calc(100% - 280px);
    box-sizing : border-box;
    display    : inline-block;

    .tablenav.top {
      margin-top  : 0;
      padding-top : 0;

      .photoberry-studio-tablenav-actions {
        display   : flex;
        flex-wrap : wrap;
        gap       : 5px;
        }

      .photoberry-studio-button-close-trash {
        margin-right : 5px;
        }

      input#delete_all {
        @include buttonRemove;
        }

      // Dedicated search bar row at the top of the table nav.
      .photoberry-studio-search-bar {
        width       : 100%;
        margin      : 0 0 12px;

        .search-box {
          float  : none;
          margin : 0;
          }
        }

      }

    // Hide bulk-actions immediately to avoid a layout jump when JS enhances the bar.
    // CSS fallback: if JS hasn't enhanced within 1s (e.g. JS error or slow load),
    // reveal the default WP bulk actions so they stay functional (progressive enhancement).
    .tablenav.top .bulkactions {
      display   : none;
      animation : photoberry-studio-bulkactions-fallback 0s linear 1s forwards;
      }

    // JS enhanced the bar — keep it hidden and cancel the fallback animation.
    // Selection state below re-shows it as a floating card bar.
    &.photoberry-studio-bulk-enhanced .tablenav.top .bulkactions {
      display   : none;
      animation : none;
      }

    // Selection state: turn .bulkactions into a floating card bar above the grid.
    &.photoberry-studio-bulk-enhanced.photoberry-studio-has-selection .tablenav.top .bulkactions {
      display          : flex;
      align-items      : center;
      flex-wrap        : wrap;
      gap              : 10px;
      width            : 100%;
      margin           : 0 0 16px;
      padding          : 10px 14px;
      background-color : #fff;
      border           : 1px solid $gray-2;
      border-left      : 4px solid $primary-color;
      border-radius    : 5px;
      box-shadow       : 0 1px 3px rgba(0, 0, 0, .04);
      float            : none;

      .photoberry-studio-bulk-selection-count {
        font-size    : 13px;
        font-weight  : 600;
        color        : $text-primary;
        margin-right : 4px;
        }

      select {
        max-width : 200px;
        }

      //.photoberry-studio-bulk-clear {
      //
      //  }
      }
    }

  .wp-list-table.photoberry-studio-sessions table {
    width : 100%;

    td {
      padding : 0;
      }

    .photoberry-studio-grid {
      display               : grid;
      gap                   : 16px;
      justify-content       : stretch;
      margin-bottom         : 20px;
      align-items           : stretch;
      grid-template-columns : 1fr;

      @media (min-width : 640px) {
        grid-template-columns : repeat(2, minmax(0, 1fr));
        }
      @media (min-width : 1024px) {
        grid-template-columns : repeat(3, minmax(0, 1fr));
        }
      @media (min-width : 1280px) {
        grid-template-columns : repeat(4, minmax(0, 1fr));
        }

      > * {
        background-color : #fff;
        border           : 1px solid $gray-2;
        padding          : 0;
        display          : flex;
        flex-direction   : column;
        border-radius    : 5px;
        gap              : 0;
        position         : relative;
        overflow         : hidden;
        transition       : box-shadow .2s ease;

        &:hover {
          box-shadow : 0 4px 12px rgba(0, 0, 0, .08);
          }

        // columns

        label {
          position         : absolute;
          top              : 10px;
          left             : 10px;
          width            : 20px;
          z-index          : 2;
          background-color : rgba(255, 255, 255, 0.9);
          border-radius    : 3px;
          padding          : 2px;
          line-height      : 0;
          opacity          : 0;
          transition       : opacity .15s ease;
          }

        &:hover label,
        &:focus-within label,
        label:has(input:checked) {
          opacity : 1;
          }

        .image {
          width        : 100%;
          aspect-ratio : 4 / 3;
          overflow     : hidden;
          background   : $gray-1;
          position     : relative;

          a {
            display  : block;
            width    : 100%;
            height   : 100%;
            position : relative;
            }

          img {
            width      : 100%;
            height     : 100%;
            object-fit : cover;
            display    : block;
            transition : transform .5s ease;
            }
          }

        &:hover .image img {
          transform : scale(1.02);
          }

        // Hover-revealed badge: share scope (clients) + uploaded photos count.
        .photoberry-studio-session-card-meta {
          position         : absolute;
          bottom           : 10px;
          right            : 10px;
          display          : inline-flex;
          align-items      : center;
          gap              : 8px;
          padding          : 6px 12px;
          background-color : rgba(0, 0, 0, .6);
          backdrop-filter  : blur(4px);
          border-radius    : 999px;
          color            : #fff;
          font-size        : 11px;
          line-height      : 1;
          pointer-events   : none;
          z-index          : 1;
          font-weight: 400;

          &-item {
            display     : inline-flex;
            align-items : center;
            gap         : 5px;
            }

          &-icon {
            font-size   : 13px;
            width       : 13px;
            height      : 13px;
            line-height : 13px;
            }

          &-sep {
            opacity : .5;
            }

          &-value {
            font-weight : 600;
            }
          }

        .photoberry-session-heading {
          width      : 100%;
          padding    : 20px;
          flex-grow  : 1;
          box-sizing : border-box;
          }

        .title a.row-title {
          color         : $text-primary;
          font-size     : 16px !important;
          font-weight   : bold;
          display       : block;
          line-height   : 1.5em;
          margin-bottom : 10px;
          }

        .photoberry-studio-actions {
          display : block;

          > * {
            margin-right : 3px;
            }

          .photoberry-studio-action-primary, .photoberry-studio-action-primary a,
          .photoberry-studio-actions-more {
            display        : inline-block;
            vertical-align : middle;
            }

          .photoberry-studio-action-primary a {
            @include button(secondary, very-small);
            }

          .photoberry-studio-actions-more {
            @include dropdown;

            > ul {
              display : none;
              }
            }

          .photoberry-studio-actions-more button {
            vertical-align   : middle;
            background-image : url(../img/icons/gray/more.svg);
            @include button(secondary, medium, true);
            }

          .photoberry-studio-actions-more.photoberry-studio-active > ul {
            display : block;
            }
          }

        .date {
          font-size     : 12px;
          color         : $text-primary;
          margin-bottom : 10px;
          }

        .client {

          ul {
            list-style : none;
            margin     : 0;

            li {
              display : inline-block;

              a {
                color     : $text-primary;
                font-size : 12px;
                }

              a:after {
                content      : ",";
                display      : inline-block;
                margin-right : 5px;
                }

              abbr {
                display : none;
                }
              }

            li:last-of-type a:after {
              display : none;
              }
            }
          }

        .status {
          flex-basis : 100%;
          }

        .session-type {
          flex-basis    : 100%;
          margin-bottom : 10px;

          .photoberry-studio-session-type {
            display          : inline-block;
            padding          : 4px 12px;
            background-color : $gray-1;
            border-radius    : 5px;
            font-size        : 11px;
            }
          }
        }
      }
    }

  .page-title-action {
    @include button(primary, small);
    }
  }

// =============================================================================
// EDIT PAGE
// =============================================================================

.photoberry-studio-admin-page .photoberry-studio-header-wrapper .photoberry-studio-field-wrapper {

  display : inline-block;

  label {
    margin-right : 5px;
    font-weight  : 400;
    font-size    : 12px;
    }

  select {
    width        : 150px;
    margin-right : 10px;
    max-height   : 36px;
    padding      : 5px 10px;
    line-height  : 1.3em;
    }

  .photoberry-studio-field-tooltip {
    display : none;
    }

  }

// =============================================================================
// REVISIONS
// =============================================================================

#photoberry-item-revisions {
  > li {
    position         : relative;
    box-shadow       : 0 0 10px rgba(0, 0, 0, 0.05);
    background-color : #fff;
    text-align       : center;
    padding          : 20px;

    &:hover {
      opacity    : 0.8;
      transition : all 0.5s ease-out;
      }

    img {
      margin-bottom : 0;
      }

    a {
      display : block;
      }

    span.photoberry-studio-badge-current,
    span.photoberry-studio-badge-original {

      position         : absolute;
      top              : 10px;
      right            : 10px;
      background-color : #fff;
      color            : $text-primary;
      border-radius    : 5px;
      padding          : 8px 12px;
      font-size        : 11px;
      border           : 1px solid $gray-2;
      box-shadow       : 0 0 10px rgba(0, 0, 0, 0.05);
      line-height      : 1.2;
      }

    .photoberry-studio-revision-date {
      display    : block;
      font-size  : 11px;
      color      : $text-primary;
      margin-top : 10px;
      }
    }

  .photoberry-studio-revision-actions {
    margin-top : 10px;
    padding    : 0;

    > li {
      @include button(secondary, small, true);
      }
    }
  }

// =============================================================================
// SESSION WORKFLOW STAGES
// =============================================================================

$session-stage-icons: (
  photography : "camera",
  upload      : "upload",
  proofing    : "check1",
  delivery    : "delivery",
  archive     : "archive"
);

@mixin session-stage-icon($size : 28px, $bg-size : 15px) {
  display             : block;
  flex-shrink         : 0;
  margin              : 0;
  width               : $size;
  height              : $size;
  padding             : 6px;
  box-sizing          : border-box;
  border-radius       : 50%;
  background-size     : $bg-size;
  background-repeat   : no-repeat;
  background-position : center;

  @each $stage, $icon in $session-stage-icons {
    &.photoberry-studio-session-stage-#{$stage} {
      background-image : url("../img/icons/white/#{$icon}.svg");
      }

    &.photoberry-studio-session-stage-status-not-started.photoberry-studio-session-stage-#{$stage} {
      background-image : url("../img/icons/gray/#{$icon}.svg");
      }
    }

  &.photoberry-studio-session-stage-status-not-started {
    opacity          : .5;
    background-color : $gray-2;
    }

  &.photoberry-studio-session-stage-status-in-progress {
    background-color : $accent-yellow;
    }

  &.photoberry-studio-session-stage-status-failed {
    background-color : $accent-red;
    }

  &.photoberry-studio-session-stage-status-complete {
    background-color : $accent-green-dark;
    }
  }

.photoberry-studio-session-workflow-stages {
  width        : 100%;
  display      : flex;
  list-style   : none;
  padding      : 0;
  margin       : 10px 0 0;
  position     : relative;
  z-index      : 10;

  > li.photoberry-studio-session-stage {
    position    : relative;
    display     : flex;
    align-items : center;
    margin      : 0;
    cursor      : pointer;

    // Connector before this step; color follows this step's status
    &:not(:first-child)::before {
      content       : "";
      flex-shrink   : 0;
      width         : 20px;
      height        : 1px;
      margin        : 0 12px;
      background    : $gray-2;
      border-radius : 999px;
      }

    &.photoberry-studio-session-stage-status-complete::before,
    &.photoberry-studio-session-stage-status-in-progress::before,
    &.photoberry-studio-session-stage-status-failed::before {
      background : $gray-4;
      }

    &:hover > .photoberry-studio-session-stage-title {
      opacity : .85;
      }
    }

  .photoberry-studio-session-stage-title {
    display     : flex;
    gap         : 8px;
    align-items : center;
    margin      : 0;
    padding     : .5rem 0;
    transition  : opacity .3s ease;

    &.photoberry-studio-session-stage-title-status-not-started {
      color       : $gray-5;
      font-weight : 500;
      }
    }

  .photoberry-studio-session-stage-icon {
    @include session-stage-icon;
    }

  .photoberry-studio-session-tooltip {
    display       : none;
    position      : absolute;
    top           : 100%;
    left          : 70%;
    z-index       : 10;
    width         : 200px;
    padding       : 20px 15px 15px;
    text-align    : left;
    background    : #fff;
    border-radius : 5px;
    box-shadow    : 0 0 10px rgba(0, 0, 0, .05);
    transform     : translateX(-50%);

    h4 {
      margin         : 0 0 15px;
      padding-bottom : 15px;
      font-size      : 14px;
      color          : $text-primary;
      border-bottom  : 1px solid #e7ecef;
      }

    p {
      margin      : 0 0 20px;
      font-size   : 12px;
      font-weight : normal;
      color       : $text-primary;
      }

    .photoberry-studio-session-stage-actions {
      list-style : none;
      padding    : 0;
      margin     : 10px 0 0;

      a {
        font-size       : 12px;
        font-weight     : bold;
        color           : $primary-color;
        text-decoration : none;

        &:hover {
          text-decoration : underline;
          }
        }
      }
    }

  > li.photoberry-studio-session-stage:hover > .photoberry-studio-session-tooltip,
  > li.photoberry-studio-session-stage:focus-within > .photoberry-studio-session-tooltip {
    display : block;
    }
  }

// Grid list: contextual workflow status (stage + detail)
.photoberry-studio-grid .photoberry-studio-session-grid-status {
  display       : inline-flex;
  align-items   : flex-start;
  gap           : 8px;
  max-width     : 100%;
  margin        : 0 0 14px;
  border-radius : 6px;
  line-height   : 1.25;

  &-dot {
    flex-shrink   : 0;
    width         : 7px;
    height        : 7px;
    margin-top    : 4px;
    border-radius : 50%;
    }

  &-text {
    display        : flex;
    gap            : 5px;
    min-width      : 0;
    align-items: center;
    }

  &-stage {
    font-size   : 13px;
    font-weight : 600;
    color       : $text-primary;

    &:after {
      content: "·";
      margin-left: 5px;
      }
    }

  &-detail {
    font-size   : 12px;
    font-weight : 400;
    color       : $gray-5;
    }

  &--not-started {

    .photoberry-studio-session-grid-status-dot {
      background-color : $gray-3;
      }
    }

  &--in-progress {
     color : lighten($accent-yellow, 32%);

    .photoberry-studio-session-grid-status-dot {
      background-color : $accent-yellow;
      }

    .photoberry-studio-session-grid-status-stage  {
      color : darken($accent-yellow, 10%);
      }
    }

  &--complete {
    color : lighten($accent-green, 40%);

    .photoberry-studio-session-grid-status-dot {
      background-color : $accent-green-dark;
      }

    .photoberry-studio-session-grid-status-stage {
      color : $accent-green-dark;
      }
    }

  &--failed {
    color : lighten($accent-red, 32%);

    .photoberry-studio-session-grid-status-dot {
      background-color : $accent-red;
      }

    .photoberry-studio-session-grid-status-stage {
      color : darken($accent-red, 10%);
      }
    }
  }

.photoberry-studio-title-container .photoberry-studio-session-workflow-stages {
  flex-basis       : 100%;
  //padding          : .5rem 1.2rem;
  //background-color : #fff;
  //border           : 1px solid $gray-2;
  //border-radius    : 10px;
  }

// =============================================================================
// EMPTY TRASH / NO ITEMS
// =============================================================================

.photoberry-studio-no-items {
  width  : 100%;
  margin : 15px 0;

  p {
    display : block;
    }

  a {
    display    : inline-block;
    text-align : center;
    }
  }