@use 'sass:color';
@use '../settings/baseColors' as *;
@use '../settings/breakpoints' as *;
@use '../tools/mixins/mediaQueriesRanges' as *;
@use '../tools/mixins/clearfix' as *;
@use '../tools/mixins/placeholder' as *;

// ---------------------------------------------------------
// @TOC

// + @Topbar
// + @Collapsed State
// + @Mobile Responsive Fixes

// ---------------------------------------------------------
// @Topbar
// ---------------------------------------------------------

.header {
  background-color: $default-white;
  border-bottom: 1px solid $border-color;
  display: block;
  margin-bottom: 0;
  padding: 0;
  position: fixed;
  transition: all 0.2s ease;
  width: calc(100% - #{$offscreen-size});
  z-index: 800;

  @include to($breakpoint-md) {
    width: 100%;
  }

  @include between($breakpoint-md, $breakpoint-xl) {
    width: calc(100% - #{$collapsed-size});
  }

  .header-container {
    @include clearfix;

    height: $header-height;

    .nav-left,
    .nav-right {
      list-style: none;
      margin-bottom: 0;
      padding-left: 0;
      position: relative;

      > li {
        float: left;

        > a {
          color: $default-text-color;
          display: block;
          line-height: $header-height;
          min-height: $header-height;
          padding: 0 15px;
          transition: all 0.2s ease-in-out;

          i {
            font-size: 17px;
          }

          &:hover,
          &:focus {
            color: $default-dark;
            text-decoration: none;
          }

          @include to($breakpoint-md) {
            padding: 0 15px;
          }
        }
      }

      .notifications {
        position: relative;

        .counter {
          background-color: $default-danger;
          border-radius: 50px;
          color: $default-white;
          font-size: 10px;
          line-height: 1;
          padding: 3px 5.5px;
          position: absolute;
          right: 6px;
          top: 12px;
        }

        .dropdown-menu {
          min-width: 350px;
          padding: 0;

          @include to($breakpoint-sm) {
            max-width: 300px;
          }
        }
      }
    }

    .dropdown-menu {
      // display: block;
      margin: 0;
      transform-origin: top right;
      // transform: scale(0, 0);
      transition: transform 0.15s ease-out;

      .divider {
        border-bottom: 1px solid $border-color;
        height: 1px;
        overflow: hidden;
      }

      > li {
        > a {
          transition: all 0.2s ease-out;
        }
      }
    }

    .show {
      .dropdown-menu {
        transform: scale(1, 1);
      }
    }

    .nav-left {
      float: left;
      margin-left: 15px;
    }

    .nav-right {
      float: right;

      .dropdown-menu {
        left: auto;
        right: 0;

        > li {
          width: 100%;

          > a {
            line-height: 1.5;
            min-height: auto;
            padding: 10px 15px;
          }
        }
      }
    }
  }

  .search-box {
    .search-icon-close {
      display: none;
    }

    &.active {
      .search-icon {
        display: none;
      }

      .search-icon-close {
        display: inline-block;
      }
    }
  }

  .search-input {
    display: none;

    &.active {
      display: inline-block;
    }

    input {
      background-color: transparent;
      border: 0;
      box-shadow: none;
      font-size: 18px;
      height: 40px;
      margin-top: 12px;
      outline: none;
      padding: 5px;

      @include to($breakpoint-sm) {
        width: 85px;
      }

      @include placeholder {
        color: color.adjust($default-text-color, $lightness: 20%);
        font-style: italic;
      }
    }
  }
}

// ---------------------------------------------------------
// @Mobile Responsive Fixes - AGGRESSIVE APPROACH
// ---------------------------------------------------------

// Tablet mobile fixes (768px to 991px)
@include to($breakpoint-md) {
  .header {
    .header-container {
      padding: 0 10px;
      
      .nav-left {
        margin-left: 5px;

        > li > a {
          padding: 0 8px !important;
        }
      }

      .nav-right {
        margin-right: 5px;

        > li {
          > a {
            padding: 0 8px !important;
            
            // Hide text in user dropdown on tablet
            .peer:last-child {
              display: none;
            }
          }
        }

        // Make theme toggle more compact
        .theme-toggle {
          padding: 0 5px !important;
          
          .form-check-label {
            font-size: 9px !important;
            margin: 0 3px !important;
          }
          
          .form-check-input {
            width: 1.8rem !important;
            height: 1rem !important;
          }
        }
      }
    }
  }
}

// Small mobile phones (576px to 767px)
@include to($breakpoint-sm) {
  .header {
    .header-container {
      height: auto;
      min-height: $header-height;
      padding: 0 5px;

      .nav-left {
        margin-left: 2px;

        > li > a {
          padding: 0 5px !important;
        }

        // Hide search toggle on small mobile - make it icon only when active
        .search-box:not(.active) {
          display: none;
        }
      }

      .nav-right {
        margin-right: 2px;

        > li {
          > a {
            padding: 0 4px !important;
            
            // Hide all text content, keep only icons
            span {
              display: none;
            }
            
            .peer:last-child {
              display: none;
            }
          }
        }

        // Ultra-compact theme toggle
        .theme-toggle {
          padding: 0 3px !important;
          
          .form-check {
            flex-direction: column;
            align-items: center;
            
            .form-check-label {
              font-size: 7px !important;
              margin: 0 !important;
              line-height: 1 !important;
              
              span {
                display: none !important;
              }
            }
            
            .form-check-input {
              width: 1.5rem !important;
              height: 0.8rem !important;
              margin: 1px 0 !important;
            }
          }
        }
      }

      // Full-screen mobile dropdowns
      .nav-right .dropdown-menu {
        position: fixed !important;
        top: $header-height !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100vw !important;
        height: calc(100vh - #{$header-height}) !important;
        max-width: none !important;
        min-width: auto !important;
        transform: none !important;
        border-radius: 0 !important;
        z-index: 9999;
        overflow-y: auto;
        
        // Close button for mobile dropdowns
        &::before {
          content: "✕ Close";
          position: sticky;
          top: 0;
          display: block;
          background: var(--c-primary);
          color: white;
          text-align: center;
          padding: 10px;
          cursor: pointer;
          font-weight: bold;
          z-index: 10000;
        }
      }
    }
  }
}

// Extra small mobile phones (less than 576px)
@include to(480px) {
  .header {
    .header-container {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: nowrap;
      padding: 0 2px;

      .nav-left {
        flex: 0 0 auto;
        margin: 0;
        
        > li {
          float: none;
          display: inline-block;
          
          > a {
            padding: 0 3px !important;
            font-size: 14px !important;
          }
        }

        // Search overlay for tiny screens
        .search-input.active {
          position: fixed;
          top: $header-height;
          left: 0;
          right: 0;
          background: var(--c-bkg-card);
          border-top: 1px solid var(--c-border);
          padding: 15px;
          z-index: 9998;
          
          input {
            width: 100%;
            padding: 12px;
            font-size: 16px;
            border: 1px solid var(--c-border);
            border-radius: 6px;
            background: var(--c-bkg-card);
            color: var(--c-text-base);
            margin-top: 0;
            
            &::placeholder {
              color: var(--c-text-muted);
            }
          }
        }
      }

      .nav-right {
        flex: 0 0 auto;
        margin: 0;
        
        > li {
          float: none;
          display: inline-block;
          
          > a {
            padding: 0 2px !important;
            font-size: 12px !important;
          }
        }

        // Minimal theme toggle
        .theme-toggle {
          padding: 0 1px !important;
          
          .form-check {
            .form-check-label {
              display: none !important;
            }
            
            .form-check-input {
              width: 1.2rem !important;
              height: 0.7rem !important;
            }
          }
        }
      }
    }
  }
}

// ---------------------------------------------------------
// @Collapsed State
// ---------------------------------------------------------

.is-collapsed {
  .header {
    width: calc(100% - #{$collapsed-size});

    @include to($breakpoint-md) {
      width: 100%;
    }

    @include between($breakpoint-md, $breakpoint-xl) {
      width: calc(100% - #{$offscreen-size});
    }
  }
}