/*
 * This file is part of the UX SDC Bundle
 *
 * (c) Jozef Môstka <https://github.com/tito10047/ux-sdc>
 *
 * For the full copyright and license information, please view the LICENSE
 * file that was distributed with this source code.
 */

/* Styles for Header component */
@layer components {
  .dashboard-header {
    height: 64px;
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-inline: var(--space-l);
    flex-shrink: 0;
    gap: var(--space-m);

    & .dashboard-header__hamburger {
      display: none;
      background: transparent;
      border: none;
      color: var(--color-text-main);
      cursor: pointer;
      padding: var(--space-xs);
      border-radius: var(--radius-s);
      transition: var(--transition-fast);

      &:hover {
        background: rgba(255, 255, 255, 0.05);
      }
    }

    & .dashboard-header__hamburger-icon {
      width: 24px;
      height: 24px;
    }

    & .dashboard-header__mobile-title {
      display: none;
      font-weight: 600;
      font-size: var(--size-step-0);
      color: var(--color-text-main);
    }

    & .dashboard-header__search {
      display: flex;
      align-items: center;
      gap: var(--space-xs);
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid var(--color-border);
      border-radius: var(--radius-s);
      padding: 6px 12px;
      width: 100%;
      max-width: 400px;
      transition: var(--transition-fast);

      &:focus-within {
        border-color: rgba(255, 255, 255, 0.2);
        background: rgba(255, 255, 255, 0.08);
      }
    }

    & .dashboard-header__icon {
      width: 16px;
      height: 16px;
      color: var(--color-text-muted);
    }

    & .dashboard-header__input {
      background: transparent;
      border: none;
      color: var(--color-text-main);
      font-size: var(--size-step--1);
      outline: none;
      width: 100%;

      &::placeholder {
        color: var(--color-text-muted);
      }
    }

    & .dashboard-header__status {
        flex: 1;
        display: flex;
        justify-content: center;
    }

    & .status-badge {
        font-size: 10px;
        color: var(--color-accent-blue);
        background: rgba(0, 112, 243, 0.05);
        padding: 4px 12px;
        border-radius: 4px;
        border: 1px solid rgba(0, 112, 243, 0.2);
        font-family: var(--font-mono);
        text-transform: uppercase;
        letter-spacing: 0.1em;
        display: flex;
        align-items: center;
        gap: 8px;
        box-shadow: 0 0 15px rgba(0, 112, 243, 0.05);
        animation: status-pulse 2s infinite ease-in-out;
        white-space: nowrap;
    }

    & .status-badge__dot {
        width: 6px;
        height: 6px;
        background: var(--color-accent-blue);
        border-radius: 50%;
        box-shadow: 0 0 8px var(--color-accent-blue);
        display: block;
    }

    @keyframes status-pulse {
        0%, 100% { border-color: rgba(0, 112, 243, 0.2); box-shadow: 0 0 10px rgba(0, 112, 243, 0.05); }
        50% { border-color: rgba(0, 112, 243, 0.5); box-shadow: 0 0 20px rgba(0, 112, 243, 0.15); }
    }

    & .dashboard-header__user {
      display: flex;
      align-items: center;
      gap: var(--space-m);
    }

    & .user-info__email {
      font-size: var(--size-step--1);
      color: var(--color-text-muted);
    }

    & .user-avatar {
      width: 32px;
      height: 32px;
      border-radius: 6px;
      background: rgba(255, 255, 255, 0.1);
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1px solid var(--color-border);
    }

    & .header-settings {
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--color-text-muted);
      cursor: pointer;
      transition: var(--transition-fast);

      &:hover {
        color: var(--color-text-main);
      }
    }

    & .header-settings__icon {
      width: 20px;
      height: 20px;
    }

    & .btn-simulation-close {
        display: none;
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid var(--color-border);
        color: var(--color-text-main);
        padding: 6px 12px;
        border-radius: var(--radius-s);
        font-size: 10px;
        font-family: var(--font-mono);
        cursor: pointer;
        transition: var(--transition-fast);
        white-space: nowrap;

        &:hover {
            border-color: rgba(255, 255, 255, 0.2);
            background: rgba(255, 255, 255, 0.08);
        }
    }

    /* Responzívny dizajn */
    @media (max-width: 1024px) {
      padding-inline: var(--space-s);
      gap: var(--space-s);

      & .btn-simulation-close {
          display: block;
      }

      & .dashboard-header__hamburger {
        display: block;
      }

      & .dashboard-header__search {
        display: none;
      }

      & .dashboard-header__status {
          display: none;
      }

      & .user-info__email {
        display: none;
      }

      /* Center "Formalitka" if we want to match img_1.png exactly */
      /* Since Formalitka is in Sidebar, we might need a mobile-only title or just rely on Sidebar being openable */
    }
  }
}