flare-ui/src/app/components/main/main.component.scss

.main-layout {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #fafafa;

  .header-toolbar {
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);

    mat-toolbar-row {
      padding: 0 16px;
    }

    .logo {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 20px;
      font-weight: 500;

      mat-icon {
        vertical-align: middle;
      }
    }

    .spacer {
      flex: 1;
    }

    .header-actions {
      display: flex;
      align-items: center;
      gap: 16px;

      .username {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 14px;

        mat-icon {
          font-size: 20px;
          width: 20px;
          height: 20px;
          vertical-align: middle;
        }
      }

      .activity-button {
        position: relative;

        mat-icon {
          vertical-align: middle;
        }
      }
    }
  }

  nav {
    background-color: white;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    position: sticky;
    top: 64px;
    z-index: 99;

    .mat-mdc-tab-nav-bar {
      padding: 0 16px;
    }

    .mat-mdc-tab-link {
      height: 48px;
      opacity: 0.7;
      font-weight: 500;

      &.mdc-tab--active {
        opacity: 1;
      }

      .tab-content {
        display: flex;
        align-items: center;
        gap: 8px;

        mat-icon {
          font-size: 20px;
          width: 20px;
          height: 20px;
          vertical-align: middle;
        }

        span {
          vertical-align: middle;
        }
      }
    }
  }

  .main-content {
    flex: 1;
    overflow: auto;
    background-color: #fafafa;
  }
}

// Material overrides
::ng-deep {
  .mat-toolbar-single-row {
    height: 64px;
  }

  .mat-mdc-menu-panel {
    margin-top: 8px;
  }

  .mat-mdc-tab-header {
    border-bottom: none;
  }

  .mat-mdc-tab-labels {
    gap: 8px;
  }
}

// Responsive
@media (max-width: 768px) {
  .main-layout {
    nav {
      .mat-mdc-tab-nav-bar {
        padding: 0 8px;
      }

      .mat-mdc-tab-link {
        min-width: auto;
        padding: 0 12px;

        .tab-content span {
          display: none;
        }
      }
    }
  }
}